Create a page in Gatsby to show WordPress blog post previews

Jason Lengstorf: [0:00] To show a list of our latest posts, we're going to create a new page called blog.js. Inside of it, we're going to import React from 'react'. We also need { graphql , Link } from 'gatsby'. Then we're going to import our Layout from '../components/layout'.

[0:24] The first thing we need to do is, we need to load our post data. We're going to export a const called query. That's going to use graphql. Inside of graphql we are going to run a query that gets into wpgraphql posts. We want nodes, and we're going to get the id, the title, the uri, and the excerpt.

[0:50] Below that, we're going to create a new component called Blog that is going to receive the data which is the result of our query. Inside, we're going to extract the posts from that data. We'll go data.wpgraphql.posts.nodes. Again, this just drills down, data is the result of the query, we go wpgraphql.posts.nodes.

[1:13] Then below here, we can return a Layout. Inside of our Layout, we want to map over our posts. We will just do a post.map(), get each post, and then inside of it, we will return an article component with a key of the post.id so that we have a way for React to track which element is which.

[1:37] We'll use an <h2> because we don't want to have more than one <h1> on any given page, and we will use the Link component to link to it.

[1:46] We're going to run to blog and the posts.uri, and our dangerouslySetInnerHTML, because that title might contain some HTML encoded entities, so __html: post.title. Next, we're going to have a div which is also going to have dangerouslySetInnerHTML, and that will be the post.excerpt.

[2:23] Export default Blog, save it, and then let's head out to our blog page. If we click into them, we can see that they are working properly.