This course has been updated! We now recommend you take the Introduction to Gatsby, v2 course.

Check out a free preview of the full Introduction to Gatsby course:
The "Gatsby & GraphQL" Lesson is part of the full, Introduction to Gatsby course featured in this preview video. Here's what you'd learn in this lesson:

Jason briefly touches on the GraphQL playground and gives an overview of how Gatsby handles data retrieval.

Get Unlimited Access Now

Transcript from the "Gatsby & GraphQL" Lesson

>> Jason Lengstorf: So now we're gonna start with GraphQL. We're gonna learn the fundamentals of how it works. And we're going to start adding data to our Gatsby site using GraphQL. And the way that we'll do that to start is we're gonna add some site metadata. Up here at the top, we are currently just showing the URL.

[00:00:16] And that's not a great user experience. If I navigate away, I have no idea what's in this tab. So I want to show the title. And also for SEO purposes, let's add a description as well. The way that that is going to work is first, we're just gonna hop into our Gatsby config.

[00:00:33] And we're gonna add some data. So the first data that we're gonna add. We just get in. Let's open up that Gatsby config. And I'm going to add a new prop to this object called site metadata. And this one also takes an object and I can put whatever I want in here.

[00:00:55] So I'm going to add a title and let's call this Frontend Masters Gatsby Workshop. And then I can add a description. And the description that I'm going to add is a site we built together, during a full day,
>> Jason Lengstorf: Frontend Masters. Let's wrap, not the thing that I wanted here, Gatsby workshop.

[00:01:26] Okay, so that gives us the data that we need. So we've got a title and a description. Now, to get this to load, because we're changing Gatsby configuration files, I'm going to stop and start the server. So Control+C and then npm run develop again.
>> Jason Lengstorf: And by default, nothing's gonna change here.

[00:01:50] We're not using the data yet, so this site is completely unphased. But, we also have this GraphQL Playground. And the GraphQL Playground is gonna be one of the most useful things in Gatsby, because it gives us the ability to play with our ideas. So let me delete all this stuff and we'll just start with a blank slate.

[00:02:13] So GraphQL, at its core, is a way of describing relationships between types of data. So if you've ever used a REST API, REST APIs are typically I want a type of thing. And it's going to deliver back a list of those types of things. And then if there are relationships, if it's a normalized REST API, it's going to give you back a list of IDs.

[00:02:38] So that you would then need to go and query for the IDs of, so you got a post let's say, and then it would say the comments and here's an array of IDs for comments. And then you would have to go make queries for, give me the comment with ID one, the comment with ID two, you end up making all these calls.

[00:02:54] GraphQL describes data a little differently, where you're able to say, well give me the post and then give me the comments. And for each comment, I want the author's name and then for that author, give me the list of posts that they wrote. And you can just make these arbitrarily nested queries that are theoretically can recurse infinitely, you might not want to actually do that.

[00:03:12] But that's one of the reasons that GraphQL is so exciting, and one of the reasons that we like it. So by default Gatsby doesn't do a whole lot with GraphQL. It's just gonna set up some some default things, what pages you've got, what plugins you've got, and then your site data.

[00:03:30] And so inside of your site data, I can click this open. And I can see that we have our site metadata, which is that field that we just filled out. And then we see our title and description, so it's picked up that title and description from the config file.

[00:03:46] And that means that we can write a query. So the query that I want is to get into the site. And then I wanna get that site metadata. And in here, if I hit Option+Space, it's gonna show me the available fields so that I can just choose the ones that I want.

[00:04:01] So I'm gonna choose both the title and description, and then I can run this query. And I can see, here it is, we have the data that we just added. So this is pretty sweet, because now instead of having to hard code this into a config file somewhere, and then people just need to know that, if you want this config, you have to open like this, like slash data, slash site, slash metadata.json or something.

[00:04:28] Now we can just say, yeah, it's all in the GraphQL layer, just query for what you need. That's a pretty powerful model.