Add a List of Posts to a Gatsby Blog with a GraphQL Page Query

Instructor: [00:00] Let's add a list of all of our posts. Since we're going to be writing a page-level query, we can start by removing the static query import. We'll write our query at the bottom of the file, above our export.

[00:10] We'll write "export const query" and then "graphql" with two backticks for our tag template. We'll use the query keyword because that's what we're going to get from GraphQL .

[00:19] Let's call our query home pageQuery. Now we can use the GraphQL browser in order to help us write our query. We can browse through the root query type. We're going to be doing posts. We want allMarkdownRemark.

[00:30] Remember that this is a remark connection. We click that. Then we have edges, which is the paths in the file system. A node is going to be each file. We go through. We have the frontmatter. These are all of our frontmatter options.

[00:45] To close this out, we'll move this over to have a little room. You can see that I've written the query here. If I click run, this is all the information that we have, which is what we would expect.

[00:55] Let's go ahead and add it to our file. Now that we've written our query, we need to bring it into our layout component. Let's take a look at the props that get passed into our layout.

[01:04] Inside the console of our localhost 8000, we can see that our query is showing up under the data key. This means that we can ahead and destructure data from props inside of our layout component.

[01:15] We can get to our edges from data.allMarkdownRemark. Now let's try just console.logging edges. These have our nodes like we'd expect. Now let's map over our edges in order to display our post titles.

[01:27] Between a couple braces, we'll do edges.map. We'll pass each edge in. From each edge, we want to get to the frontmatter. We'll destructure it. Then we'll return a div with the frontmatter's title.

[01:42] The first thing I notice is that I should add a key. Now we have a list of our posts, but you'll notice that they're not in order. Let's fix it.

[01:50] Going back to the GraphQL browser, we can scroll back through to allMarkdownRemark. We can see that it will take some arguments, one of them being sort. We can sort on fields. We can provide an order.

[02:02] The fields include a frontmatter date, which is a pretty solid choice, and an order. Makes sense that it would be ascending or descending.

[02:10] What we can do here is in our query, next to allMarkdownRemark, add a couple parens. We are going to sort and provide options here. Let's do order descending. For fields, we'll provide it with frontmatter___date.

[02:28] Save it. Check it out. There they are, newest to oldest. Now, through the magic of editing, I've added some styling.