Alt Text

Welcome to part-16 of the series.

As told in the earlier post, this series is based on the learning from this awesome udemy course by John Smilga

In this part we will show the blog pages, when a user clicks on it. For this we will follow the same template approach, which we followed in tour.

So, create a file blog-template.js inside templates folder. And for now put a dummy data, which we are going to replace soon.

blog-template.jsblog-template.js

Let’s first write our graphql query in Graphiql playground.

graphql querygraphql query

Next, open gatsby-node.js and add this new query.

gatsby-node.jsgatsby-node.js

Next, we will loop through the node and create the page.

data.postsdata.posts

To, test whether everything is working we need to stop and start gatsby develop in terminal. After that move to any non-existing page in the browser and you can see those pages been created.

New pagesNew pages

Click on any one of them and you will get our dummy text.

dummy datadummy data

Let’s first create the query to show the single blog post in our playground.

QueryQuery

Let’s also add the styles in the css folder as single-blog.module.css

stylesstyles

Now, we will start to update our blog-template.js. We are using the query which we created in our playground. After that we are de-structuring data which we are receiving. We are right now showing the title and published field in the blog.

blog-template.jsblog-template.js

So, when we head over to a blog post we can see that it is getting rendered properly.

Hippie hampiHippie hampi

Let’s also add the author and a link to go back to Blog page.

authorauthor

Now, to display a markdown file which we are getting back in the description field, requires some configuration.

I found this blog, which was helpful me do the setup.

For displaying markdown files, we need to npm install the plugin gatsby-transformer-remark. So, head over to the terminal and stop the gatsby develop and install it.

npm installnpm install

Next, also add it in the gatsby-config.js file.

gatsby-config.jsgatsby-config.js

Next, move back to your blog-template.js. Here we need to update the query for description a bit to add transformer plugin thing.

markdown renderingmarkdown rendering

Now, start your gatsby develop from the terminal and head over to a blog post after that. You can see the markdown rendered successfully.

awesome hampiawesome hampi

This completes part-16 of the series. You can find the code for the same here.

Also, because of the continuous deployment it got successfully pushed to netlify site.

This post is also available on DEV.