Illustrating Gatsby's Key Concepts

I already have some illustrated notes up on using the

put out an egghead course on that's better suited to Gatsby beginners.

I made a set of illustrations that capture the key concepts from Khaled's course. They don't summarise all the course content. They're just supporting material that help clarify the most important ideas.

First up is a big picture view showing all the essential parts of a Gatsby site.

Gatsby sites are able to pull in data from multiple sources all at once. This includes REST API endpoints, classic content management systems like or , or just your local file system.

These are pulled in through , which acts as a transportation layer.

is the main engine inside a Gatsby site which generates the pages, nodes, and metadata.

And finally creates all the user interface elements.

Page Queries vs. Static Queries

Once people wrap their heads around the structure of a Gatsby project, GraphQL is usually one the first sticking points.

If you've never worked with it before, the syntax looks very odd and it's hard to tell what it's doing.

It gets more confusing to learn there are two types of queries - page queries and static queries

It only seems complex on the surface, but it's easy to distinguish these two. Most of your queries will be page queries – these live inside your page files like blog.js or about.js

Static queries go inside individual component files like Navbar.js or Footer.js. There's also a handy React hook to handle these for us:

Progressive Enhancement

One of the main benefits of a Gatsby site is it uses a technique called Progressive Enhancement to render pages.

This is what makes Gatsby page look like they load quickly. The lightweight static HTML version appears first, and then heavier files and interactive elements are layered on afterwards.

React handles any changes and user interactions. Once an element is clicked or changed, React "" the page.

These illustrations are part of the on Khaled's .

You can find more notes taken by people who have been through the course on there. If you take the course yourself, you can also add to them to the shared .