Become a Data Champion with Gatsby

Paul Scanlon
December 3rd, 2021

…and iiiiiiin the Purple Corner, it’s 3 times Super Lightweight Page Rendering Champion, Gatsby The “Little Hands Of Hotness” Js!

Data is hard right? I think so too, and with Gatsby there’s more than one way to boil that egg so in this series of blog posts I plan to walk you through the various methods you can use and explain ways you might like to use them.

Core Concepts: Gatsby’s Global Data Layer

Gatsby has a global data layer, and this can be a difficult thing to wrap your head around at first and some say it’s complex. I can’t say I agree but I would like to point out that in any given React application if you were to implement Redux or React’s Context API, your application would invariably become slightly more complex

So think about it like this: when your project grows, which it could, and needs a global data layer you don’t need to do anything, Gatsby has you covered, but, like with Redux and the Context API, there are specific methods beyond vanilla JavaScript and React that you’ll need to understand.

It can be daunting at first but, as I’m sure you know data can be sourced from anywhere, local files, remote files, databases, API’s, CMS’s etc and this data is always sourced in different ways

With Gatsby, once the data is in the data layer the way you query it is always the same! 

In this series of posts I’ll be using data from various sources, adding them to Gatsby’s data layer and using this data in various ways. 

One small caveat for; Gatsby’s newest page rendering method SSR: With this method you won’t need to do anything beyond vanilla JavaScript. 

… and shock, horror… I won’t be using any plugins. 

Not that plugins are bad, they’re not but just like with node modules, you do have to think twice before installing them. Are they well maintained, do Gatsby officially maintain them, were they designed to work with the version of Gatsby you’re using… the list goes on. 

If you’d like to read more about my top tips for plugins have a peek at this post: Gatsby Plugin Not Working, But Why?

Using methods from this series of blog posts you’ll be stripping away the mystery, rolling up your sleeves and going deep, and I’m confident you’ll leave ready to take your Gatsby project to the next level.

So, are you ready champ?

Give me, @PaulieScanlon or @GatsbyJS a follow on Twitter and we’ll be Tweeting soon about more ways in which you can source and use data in your Gatsby projects!

To get you started here’s the first post.

Fetch data from the US National Weather Service API and render using SSR

Fetch data from the US National Weather Service API using SSR
In this post you’ll learn how to build a Weather application using SSR and the US National Weather Service API.

📝 Read post

Fetch data from the New York Times API and render using SSG

Fetch data from the New York Times API using SSG
In this post you’ll learn how to build a News application using SSG and the New York Times Archive API.

📝 Read post

Fetch Data from the Unsplash API and render using DSG

Fetch Data from the Unsplash API and render using DSG
In this post you’ll learn how to build a Photo application using DSG and the Unsplash API.

📝 Read post

Share on TwitterShare on LinkedInShare on FacebookShare on PinterestShare via Email

After all is said and done, structure + order = fun! Senior Software Engineer (Developer Relations) for Gatsby

Follow Paul Scanlon on Twitter

Tagged with data-sourcing, Deferred Static Generation, Server Side Rendering, SSGView all Tags

Talk to our team of Gatsby Experts to supercharge your website performance.

Contact Gatsby Now
© 2022 Gatsby, Inc.