This course has been updated! We now recommend you take the Introduction to Gatsby, v2 course.
Transcript from the "Rendering a Post Listing" Lesson
[00:00:00]
>> Jason Lengstorf: To see this in action, we can do npm run develop.
>> Jason Lengstorf: Okay, and if you remember, when we looked at this last time, it showed us the site, site plug-ins. Well, if I reload now. Now I've got stuff. I've got the files. I've got MDX. I've got a whole bunch of new things, all that became available, but you'll notice that they all kinda sorta look the same.
[00:00:32] Like we've got a list of fields that come back. Some of them are the same, some of them are different. But what I wanna do is, I just wanna make a query for all MDX. And we're gonna do this the same way that we did in the the site metadata.
[00:00:54] So I'm gonna do all,
>> Jason Lengstorf: All MDX.
>> Jason Lengstorf: And I want to get the nodes and so, in graph ql speak this is kind of the, most theory that we'll get into today. Graph ql is based on graph theory, which is a way of kind of describing relationships between things.
[00:01:22] And so you've got, when you look at data, you've got nodes, which is the data itself. And then you've got edges, which is the relationship between the different nodes. Because of that, you'll see in graph ql queries, especially in gatsby, that will have like edges, nodes, or like edges and then node.
[00:01:41] When you see that, just know edge is describing a relationship, node is describing the data itself and nodes here is just shorthand so we can say, all of the data that comes back from all MDX. And let's get the excerpt of each of our MDX files. Okay, we got data.
[00:01:59] We've got the excerpt that is the first blog post and the second blog post. So what if I want that front matter? Well, let's hit command or option space. And there's my front matter. Said option space and see what's in here. Title slogan author, perfect subtitle. Slug, author.
[00:02:20] Okay, we've got our, got ourselves a thing, it's happening. And now I wanna change this out so that we're displaying these blog posts on the homepage. Because right now, when I go home, it's not showing anything. We don't necessarily want to. We don't have enough content for a dedicated home page, right?
[00:02:42] So let's show blog posts there. So the way that we're gonna do that is we're going to create another hook to load our blog post. So let's go in to our hooks. Let's create a new one. This one's gonna be called use-posts.js. And I'm going to import graph ql and useStaticQuery again from gatsby.
[00:03:08]
>> Jason Lengstorf: And then, describe that hook. So usePosts, doesn't take any arguments. If you wanted to get more creative here, you could theoretically add ways to filter and stuff.
>> Jason Lengstorf: We don't need that here, so we're not gonna bother. But there are a lot of options. So we're gonna do useStaticQuery, get this graph ql template tag in there.
[00:03:34] And then, I'm going to pull out this query that we just wrote. Let's grab that and drop it right in. So again, we're loading from gatsby's data layer, all the MDX files, and then we get into each node and look at its front matter and its excerpt. And of the front matter we want the title slug and author.
[00:03:56] Go ahead.
>> Speaker 2: Where did that front matter come from?
>> Jason Lengstorf: The front matter is this part here.
>> Speaker 2: Okay, so that's. You didn't define front matter. It's just inside the fences that's the word for it?
>> Jason Lengstorf: Yeah, so this is a convention that you'll see in MDX and markdown, is you kinda just do YML definitions up at the top, and it will automatically parse that out, it's what's called front matter.
[00:04:20] So yeah, that's not a gatsby thing, that's a, I believe a just like generic markdown thing. At least all the markdown parsing libraries I've seen have some variation on front matter. So now that we've got our use-posts, we are going to simplify this. So I want to actually return an object.
[00:04:43] And the object that I wanna return, is going to look,
>> Jason Lengstorf: Let's see. I want it to have the title. I want it to have the author. I want it to have the slug. And I want it to have the excerpt. And I need to get that for each post which means that I also am going to have to loop so i'm going to do data.allmdx.nodes.map and that gives me a post, and then I'm gonna return this,
[00:05:20]
>> Jason Lengstorf: Okay, so I just did some kind of like wrap around coding so just to step through this again. I'm getting the data out of the query and then I'm stepping into it allMdx.nodes and then I'm mapping over those. And each of those is going to be a post object that has the front matter and the excerpt.
[00:05:41] I'm implicit returning an object that has these four items in it. And I'm doing this for convenience. Again, I don't wanna have to type like data.allMdx.nodes.frontmatter.title. I wanna be able to just say post.title. So what I'm doing is I'm taking my post, and then I'm gonna say post.frontmatter.title, and that gives me what I want.
[00:06:05] And I can drop this down here and say author. Same here for slug. And then this one is not in the front matter. So it's just post.excerpt. So this will now give us a like, simplified object so that we're only loading the stuff that we need to use in a way that's easy to use.
[00:06:27] So let's export that. Export default use hosts. Okay. And then on the home page, we are going to actually use those. So let's go to index. Let's import that hook. Import usePosts from hooks/use-posts. And then same thing here. We need to get rid of the implicit return. So now we have our default export.
[00:07:01] So I'm gonna do const posts = usePosts(). And then down here, I can just add another section. Let's do h2, read my blog. Not react my blog. Boy, that's muscle memory. So I can do post.map and get a post. And we're gonna return and react element. So we haven't written this react element yet.
[00:07:30] So for now, let's just dump this. This is my favorite way to debug in react in general, is to just
>> Jason Lengstorf: Take whatever it is that I just got and do json.stringify. The thing that I wanna log, null, because I can't remember what that change is. And then two spaces so that it's kinda nice looking.
[00:07:55] So if I change that, and then I come back out here, it's gonna show me the content. So we can see, all right, we're looping through, and we're showing their blog. That's great. That's what we want.