Alt Text Welcome to part-6 of the series. In this part we will, first start with our GraphQL queries. So, head over to http://localhost:8000/___graphql but make sure gatsby develop is running in the terminal.

Here, we will first check our allMdx query by checking the totalCount. And it returns the right count.

allMdxallMdx

Next, let’s get some basic matter from our frontmatter. We have to get this by the below query.

frontmatterfrontmatter

Now, i found out that for images to be optimised they need to be put inside the posts folder as our gatsby-source-filesystem is pointing to that folder. So, i moved all images to that folder and made the following changes in the mdx files.

mdx filesmdx files

Now, we need to restart gatsby develop and refresh graphql in browser, to see the changes.

Let’s get the image details by below updated query and we are also getting the short description by using excerpt.

imageimage

Since, in all blog posts the posts are sorted by date, we will do the same by updating our query.

DESCDESC

Let’s now start to code for displaying our posts. We will first add two files in components folder — PostList.js and PostCard.js

And add the below holding content in PostCard.js.

PostCard.jsPostCard.js

Next, update the PostList.js as below.

PostList.jsPostList.js

Now, let’s show it in our home page by updating the index.js file.

index.jsindex.js

Now, both the components are been shown in the home page of browser.

localhostlocalhost

We will call GraphQL from our index.js page and then the result will be passed down to the component. We are adding the import and the GraphQL query which we got from the graphql playground.

index.jsindex.js

Next, we will use the getPosts inside useStaticQuery to get the response. We are further destructuring it in posts and the passing it as props in PostList component.

index.jsindex.js

We can open the console and check the result.

consoleconsole

This completes part-6 of the series.

You can find the code for the same in this github repo.

This post is also available on DEV.