Include Links to Next and Previous Gatsby v1 Blog Posts

Taylor Bell
InstructorTaylor Bell

Share this video with your friends

Send Tweet
Published 5 years ago
Updated 4 years ago

Gatsby’s createPage action allows for additional data to be passed in via context. In this lesson, we will add a processing step to include links between posts, and update our templates to conditionally display them as appropriate.

Instructor: [00:00] Gatsby's build all our posts, but in order to navigate between them, I have to go back home and choose a new one. It'd be easier to add next and previous links to each post. We can do this inside of gatsby node js.

[00:11] First, let's add the index to our For-each loop. It will add the context object after the component. Let's create a key called, "Prev." If it's zero, there is no previous ones, so we'll make it null. Otherwise, we'll look for the node or post at index-1.

[00:24] We'll do a similar check for next. If the index is equal to post start link-1, that means it's the last one, otherwise it would be the same as above, but with index+1. We need to update our blog post template to actually make links.

[00:37] When we define our template, we'll also destruct a path context. We'll destruct a next end prev from the path context. Let's add the links below our post. We'll display a previous link, if it exists. This is our link from gatsby-link, and our two prop would be prev.frontmatter.path and our link will be prev.frontmatter.title.

[00:59] Just to make this simple, we'll do the same thing. We'll just copy and paste it, and just change it to next. [laughs] Although, next js doesn't really work. I also noticed that, I had an extra comma after the month, so we'll go into deep there from our GraphQL Query. Now, we'll restart gatsby develop, reload our page, and there we go.

Scott Spence
Scott Spence
~ 5 years ago

Hi, this doesn't quite seem to work for me, I have pretty much the same setup but when I have my most recent post the previous and next point to posts that are not in the same order as what is displayed on the main page.

I've tried looking at the query on ___grapgql but it only returns one post, I'm struggling to debug what exactly is going on.

Marcus
Marcus
~ 5 years ago

Hey Scott, same here. I'm running into the same issue :(

Scott Spence
Scott Spence
~ 5 years ago

Take a look at gatsby-node.js Marcus

https://github.com/tayiorbeii/gatsby-demo-blog-code/issues/2

Marcus
Marcus
~ 5 years ago

Thanks Scott!

Scott Spence
Scott Spence
~ 5 years ago

LMK if that worked for you, worked for me. It did take me a while to figure it out.

Stephen James
Stephen James
~ 5 years ago

Is there something special about pathContext variable name? Just creating an object context is mapped to pathContext in all cases?