Display Paginated Posts using Gatsby

Man: [00:00] Here we've got a Gatsby app, which we're using to display nine news items. These news items are being pulled in from markdown files, and we're using the gatsby-node.js. file to create this news page. If we have a look at the news template page, we'll see that we're exporting a query, which generates these news items by gathering all markdown files that match a regex of news, then we're using this component to display them in a list.

[00:28] As you can see, we're listing all of the news items on this page. Let's break this up using pagination, so we render five news items per page. We'll that by first taking a look at the gatsby-note.js file.

[00:40] We had to create three variables to begin with. The first one is the total number of posts per page, which we're going to set to 5. Next, we need to create the number of news items. We can work that out by simply typing posts.length. Finally, we need to work out how many news pages we're going to have. We can do that by rounding up the number of news items divided by the posts per page.

[01:02] Next, we'll create a for loop and have it run once for each of the news listing pages. We're using a zero-based index here, so to work out the page number we simply add one to it. For the first news page, we want to render it at /news. For the second news page, we render it at /news/2 and so on. We can work that out like so. So if the page index is zero, we're on the first page and we will render this page at /news. Otherwise, we're going to render it at /news/ the page number.

[01:51] Another important variable we need is the number of posts each page should skip. The first news page shouldn't skip any news posts. The second news page should skip the first five, and so on. We can work this out by multiplying the page index by the number of posts per page. This works because on the first page the index is 0so zero times five is zero, which means we skip no posts.

[02:18] The next step is to pull the createPage function into this loop. The path is now equal to the variable path. The component stays the same, and then we need to pass some context to the template. We'll pass the limit, which is the number of posts we're going to show on each page. Then we're also going to pass the skip variable through.

[02:44] The news template also needs two other bits of information to properly support pagination, and that is the link to the next page, if it exists, and the link to the previous page, if that exists. Let's work at how to create this.

[02:57] I'm going to create a new function called getNextPageLink. In this function, if the current page number is less than the number of news pages, then we're going to return a string of news/ the current page number plus one. Otherwise, we're going to return NULL.

[03:18] Next, I'm going to create another function called getPreviousPageLink. In this function, if the page index is 0or falsy, we'll return NULL because there are no previous pages. If the page index is 1, then we know the previous page URL is just /news. If there's anything else, we can return /news/ the page index, because it's always one less than the value of the current page.

[03:50] Then we can pass this to our template using context. The link to the next page is going to be getNextPageLink. The link to the previous page will be the result of getPreviousPage. I can see I've made a typo here, so I'm going to fix that now. Everything looks good.

[04:20] Let's head over to the news template. We're going to need to edit the query. The news query now receives a few arguments, so let's pass those three.

[04:30] The first one is limit, which is an integer. The second one is skip, which is also an integer. Now, let's use these variables in our query. The first one we want to do is limit, and that's just equal to the variable we passed through. The same with skip.

[04:52] Everything should now be working, so I'm going to restart the server. If we refresh the page, we can see that the most recent news posts are displayed first. Then we have this link to view some of the older news posts. If we take a look back at how the components rendered, you can see that at the top of the function, I'm pulling out the next and previous values we passed through in the context and I'm using those to generate the links to the newer and older posts.