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.
Next, let’s get some basic matter from our frontmatter. We have to get this by the below query.
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.
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.
Since, in all blog posts the posts are sorted by date, we will do the same by updating our query.
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.
Next, update the PostList.js as below.
Now, let’s show it in our home page by updating the index.js file.
Now, both the components are been shown in the home page of browser.
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.
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.
We can open the console and check the result.
This completes part-6 of the series.
You can find the code for the same in this github repo.