Show Recent MDX Posts

[00:00:00]
>> Instead of what we've been doing, which is where I've been like intentionally forming the site, so that I can see a list of the blog posts. Let's actually build a list of blog posts on the homepage so that we can see what's been written and show the latest posts.

[00:00:12]
So I'm gonna come back out here, refresh, I wanna show down here a list of my latest posts, so first, let's figure out how to get that. So I'm gonna go back into the GraphQL, and I want all MDX nodes, okay, that part is good. But let's turn this part off for now, and let's get a few things that we need.

[00:00:34]
So the first and foremost, we want the ID, whenever you're querying for making a list in Gatsby, it's worth grabbing the ID. Because you're probably gonna need to set a key If you're iterating over these fields in React. If you wanna look up the posts, the ID is the thing that's guaranteed to be the same, so it's a consistent thing to grab.

[00:00:53]
So grab that ID, I also want the slug of the post and then out of the front matter, I wanna be able to show the title. And I wanna show the date, or let's see, we want the description for sure, and then let's get the date, and let's do that like relative time.

[00:01:13]
That should be everything we need to build a blog role. So from here I can make a list of here are my posts, and then you know what else we should do? Let's actually sort these, so I'm gonna sort by the date. So here I've checked fields, and this is one of the purple ones, I know the contrast is low here, and I apologize about that.

[00:01:34]
But under fields, we can choose one of these and I want frontmatter. And you see these underscores indicate that it's one of the fields inside of frontmatter. So we want the date and I wanna order it by descending, so the most recent, post first, right? And if I change that to ascending, it would show me the oldest blog at the top of the list, so we're gonna go descending.

[00:02:00]
So now we've got an ordered list of our posts, but for now we're just gonna make it everything. And because I want this to be a unique name, we'll call it, get blog posts, and I'm gonna copy this and now we can use it, right? So we've got a list of these, so I'm gonna go into the home page and let's use a static query again.

[00:02:27]
We'll get our data. Do a tagged template literal GraphQL and inside we can paste our query. So now that we've got that, we have data and that's gonna contain all of our MDX posts. So we can pull those out, we'll just put them into a variable so it's easier for us to reason about we'll get posts, and that's gonna be data.allmdx.nodes.

[00:03:04]
Because again, the way that this works is we go data is the query and then we have the query name, so all MDX. So data.allmdx.nodes and then each post is going to have ID slug and frontmatter with the the details that we need. Then down in here I wanna create a second level heading, and we'll say check out my resent blog post.

[00:03:31]
And let's make a list out of it, so we'll do an unordered list, and inside of the unordered list we gonna do a post.map over each post. And for each of these, we're going to return a list item and that list item is gonna have a key of the post.id.

[00:03:52]
And inside of it I want to use that link component to the post.slug. And so the post slug is here, that's the actual URL, right? And then we're going to link to post.frontmatter.title. And then I wanna show when it was written, so we'll do like a small tag and we'll say it was posted, post.frontmatter.date.

[00:04:32]
Okay, so it will add that space for us so that we can break it across two lines, all right, this is good, this should work, let's go check it out, see how we did. Hey, look at that, okay, so now we have on our homepage, a heading and the ability to get into our posts, and so now we can actually navigate these posts, right?

[00:04:52]
So, this is where Gatsby really starts to shine because we added this data in and because it's predictably in our GraphQL layer. All the things that we learned for querying metadata still apply when we wanna get MDX data, right? It feels very predictable, the things we're doing are the same.

[00:05:15]
We're gonna go to graphical, we're gonna build a query, we're gonna copy-paste that query into our component. And then we use that data so it you'll start to see like these are the patterns that will carry you through all of your Gatsby builds. It's really nice, really powerful, you'll get a lot of mileage out of it.

[00:05:32]
So why don't we commit our work there because we're gonna shift over and start talking about images.