Gatsby Pagination with gatsby-awesome-pagination - Daily Dose of Gatsby Episode 10

[Music] hello everyone and welcome to another daily dose of Gatsby today we're in episode number 10 as always I am Shane Thomas make sure you're following me on twitter at SM Thomas 3 I also make sure to check out the code Crotty website sign up for the newsletter and subscribe on youtube today we're going to be talking about how to create pagers or pages of content using Gatsby awesome pagination basically this is for if you have a listing of blog posts or any other kind of list that you want to add a pager to it so you want to be able to go to the next page so rather than have a list of a thousand you maybe have lists of 100 or ten at a time and you can just page through it so this is going to make it very easy for you to set these pages up and once you see how it can be used on our example today you're going to be able to use it for any list that you want to create a pager for let's get started so we're going to start on the Gatsby j/s org page for Gatsby awesome pagination so you can see there is some instructions here I didn't follow these exactly but it's pretty close it gives you the good a good idea of pretty much how it should work so you can definitely check that out we're gonna go ahead and take a look at our site starting on the command line and you're gonna have to add this plugin you depending on if you're using yarn or NPM it's either gonna be NPM install - - save gatsby awesome pagination or yarn add Gatsby awesome pagination just like that so we'll let that run and that's gonna go ahead and add that to our site and once we'll go ahead and leave this running we're gonna open up a code editor here and we're gonna need to go to Gatsby nodejs and remember this is where it actually goes out during the build process and pulls in any of that content that you're gonna need for your site one thing we're gonna want to do is we're gonna want to add this paginate function here is your names like that leave and it's required and then we actually need gatsby awesome pagination just like that so then this is going to allow us to use this function to actually create pagination and if we go back to the documentation you can see we're basically doing this we're just requiring it rather than importing it and then you can use the paginate function similar to this so you can see here that it's the plugin was added so we're good to go if we go back to our page we're now going to add this paginate function we just needed to be somewhere after our graph QL query that creates our listing so in this case we have a graph QL query that's running it's just pulling articles from our Drupal site if you watch past episodes you'll be able to follow along directly with this if not just know that you have to have a graph QL query that gives you a list of items right so this could be anything whether you're querying markdown files or a wordpress site a Drupal site or any other type of hosted CMS you're just gonna need your graphical graph QL query there that gives you that list and we're just gonna go ahead and we're gonna call paginate and we need to pass in create page here so you see we would get it there but we're gonna pass it in now we need to pass in our list of items and we need to actually get down to our list so in this case it's going to be articles dot data that all node article dot nodes so it's gonna articles data go to all node article get all the nodes yours well Vic could vary a little bit depending on what your graph QL query looks like just make sure you need to get the actual listing so it's getting a list of items we need to tell it how many items per page and typically I wouldn't do a number this low but I don't have that many articles so I want to show you how it works I would typically you know do 10 or 20 or whatever whatever you think makes sense for your use case but that's how many items are gonna show up on a single page we need to give it a path prefix and this is what path you want it to live at I'm just going to put it at slash blog you could put this at whatever path you wanted that page to live at and now we need to tell it what component to use so this is similar to if you look down below when I create the page I'm telling it what component to use so I'm doing essentially the same thing but I'm going to tell it to use template it's slash we'll call it blog yes and I haven't created this yet so this doesn't exist we'll create this next and go ahead and do that so that's all I need to do in Gatsby nodejs I need to make sure I'm bringing in this paginating function I need to go ahead and call this paginate function making sure I'm passing in the list of items now let's go ahead and create this template so I'm gonna go into my source templates folder I'm gonna create a blog j/s file and here's where our templates gonna actually live so we're just going to start off like we normally would import react from react import crop types from crop types and then import graft well from Gatsby now I also have some other components that based on my sight I'm gonna pull in this would vary depending on how you've laid out your sight so I'm gonna import our layout component from components layout import SEO from components SEO import article preview so I have an article preview which is basically just like a teaser for my articles and then we're actually going to create a new component here in just a little bit for our pager because rather than you know create it on this specific template I want to create every usable component that I can use anytime I need a pager on my site so in this case we're only gonna have one but if you could imagine a case where you might have multiple pagers depending on different listings if you're looking at you know blog posts or you know different types of content that you might want to display having multiple you have being able to reuse it multiple times as convenient so it's just a good practice to get into the habit of breaking things up into smaller components that can then be pieced together on your page so we're going to import pager from components and then we'll call it pager and we haven't created that yet but we will here shortly so we'll just call this blog and we need to pull in our data we're gonna create a query that's gonna populate that and we also need to pull in our page context and this is something that is going to contain information about our pager component that we're going to create so all we're gonna need to do here is we need to well let's actually go down and let's create this query first so I'm gonna start by just setting up my prop types again you could get more specific with this or you don't technically even need it but I like to put it in there just basically saying it's an object that's required page context is also an object that is required as well and now let's create a graphic ul query so this page query is going to pull in all of our data for for articles so this way we can get the specific data so if you look here all I'm getting is the ID the title the path alias so that really isn't isn't going to get all of the information I actually need but in the query here I can actually get more of that information I probably should add a sort on here to Matt to exactly match the sort that I'm gonna put here in this case it just works out that way but just keep in mind you may you're gonna want to make sure that this your articles or whatever content you're pulling here matches the same as the query you're writing here so you're gonna want to make sure it's sort of the same way in this case it works out but just keep it keep a note on that if it doesn't seem like it's working the way you'd expect it to so I'm just gonna copy in this query because it's a little bit long but we'll go through it once I get a copy then okay so let's walk through and see what this is actually doing so this is going to pass in these variables here this K the Skip and this limit value and this is information that's passed in from that paginate function this is important because this skip and limit is how it tells the page to be created so this blog templates going to get run once for each page that the paginate function is creating and each time it's going to pass in where to start in the list and essentially how many to show and that's going to allow this graphic you all query to pull in the right items each time it's building the page so this graphic UL query is gonna get run multiple times once for each page so you need to make sure here's where I say I'm sorting I'd probably want to add that back to this if it didn't match for some reason but it in this case it really it sorts this by default so it's fine we want to make sure we say this skip that's how many items are going to be skipped and how many items to show so you want to pass that in to your graphical query again note that yours might look a little bit different depending on what you're actually querying in this case I'm querying a Drupal site so I'm pulling in a bunch of information go back and watch past episodes if you want to see how we got to this query but essentially it's just what information do you need to populate your templates or your page so I'm pulling in this info this is going to get passed into this data attribute here now let's go ahead and actually create this component we're going to start with layout give it just some SEO meta tag information here create an h1 now I'm actually going to want to return this so since I'm creating the component this way we need to make sure we're returning them our JSX and up here I'm gonna actually just grab an article constant here just so I don't have to reach into this data variable as much or as deep each time so node articles dot nodes something like that should work so I'm just simplifying this a little bit now i creating my JSX that's just gonna return a layout and what's going to be in that layout well we want to actually map through all of the articles list that I'm getting so in this case I think I was only pulling in 3 but whatever however many articles will be the number that you set right here in items per page so if you had 100 you had a thousand articles this would get run ten times and each time this articles constant would end up with 100 items in this case it will be three but we want to do articles dot map we'll put in an article variable and something like that just to create it and then in here we actually want to put whatever information we want to display for each item in this case I'm loading in this article preview component so I'm gonna use that think that is all we need so let's review this quick so I'm just creating this article preview component yours could be different you might have just you might put JSX right in here or you know actual HTML markup and just put print the title if you want to just do the title in the path something like that it just really depends on your setup but this is a sense just a teaser component if you look at it it's going to create a link with around the title field put the image and then print the de summary so it's a just reusing that component each time to make it a little bit more reusable a little bit more friendly to pull it across in multiple places because I do have other places that this previews getting used and that's all there is to it as far as that is concerned but now we also need to talk about this pager component that we didn't actually use yet we haven't implemented so this is what is actually going to display the pager at the bottom of the page you could put at the top if you wanted you can put it wherever you want but essentially these are the links to go to the next page of the previous page for your actual pager to work so all I'm gonna do is I'm going to create or call this pager component I haven't created it yet but I know what it's gonna be and it's going to require page context the page context is what contains the information to tell the pager or pager links what page to go to so you need to make sure you pass in this page context so I'll save this but again it won't work quite yet so I'm going to go to my source components folder and create a page or j/s file and inside this page as files what we're actually going to create this page of component so we need to use link the link component from gatsby and this is going to allow us to create links to the next and previous pages I'm gonna go ahead and import prop types from crop types again that's not necessarily required but I would recommend it why put that first there we go like to start with react and then work down to the Gatsby stuff but it doesn't really matter it's more just a preference so we're gonna get that page context prop that I had mentioned before we want to make sure we have that know what are we actually gonna do in this well we actually want to spit out the mark-up for this pager so I'm gonna D structure just some variables here so on previous page path and next page path and I can get this from this page context and this is going to allow it these path variables are essentially going to be what this previous pager would be or what the next page it would be so when you're creating these links you can use these to know okay this is the URL or the link I'd click on to get to the next page in this pager that I'm creating so we're gonna return this and I'm just gonna create a div you I'm not gonna spend a lot of time styling this but just keep in mind that you could style this however you want to right so I'm going to start by checking if previous page path exists and if it does then I'm going to spit out some actual markup so if this section right here this part of the conditional won't run if previous page path isn't set that way if there isn't a preview if I'm on the first page I don't necessarily want to show the previous link right you only want to show it if there's a previous page to go to so in this case this so simple way to check that I'll just create a span again I'm not spending too much time on the actual styling of it now I'm going to use that link component and what am i what am I going to link to well I'm gonna link the previous page path and in the actual text so I'll just put previous and close out that link component close up a span I'm gonna do the same thing for next page path so now we have our markup I am gonna go down here and I'm going to set my prop types again I'm just gonna do a page context just make sure it is required and then export always make sure you export your actual component if you don't export it it's not gonna work just like that so create the pager set the prop types export the component inside here I'm creating a link for the previous path only if it exists creating a link for the next path only if it exists so let's save this and if it works great if it blows up we'll go ahead and have to debug it a little bit run yarn develop or if you're using just NPM you can just use gatsby develop this is going to go ahead and run this it does tell me my plugins have changed now you probably don't want to write all this code without article preview so see I have a problem article previews defined but never used well it's because I didn't spell it correctly so let's go into here article preview so that's going to not work oh okay well that's because it was added a second time there automatically so it's automatically important so let's fix it so make sure I got the spelling right funny how one little character can cause such a such an issue right so here we go we're gonna do it again hopefully I spelled everything right this time just syntactically we are good to go it looks like there we go so little debugging never hurt I'm gonna open up this page and we will take a look so remember I said the path prefix was going to be blog and it didn't work okay well let's take a look here blog done yes okay as I sometimes if you've watched past videos forget to do forgot to expect export at the bottom that should fix it cannot read property nodes have undefined alright so let's see here data dot all node article just try again child image sharp so this is just a case of me trying to type faster than I'm actually capable of typing clearly but as you'll you'll notice when you go through this you'll easily run into these types of problems as well where you know anytime you've actually wrote any code you run into small little issues of syntax where you didn't quite type it right there we go so again just so a bunch of little minor mistakes you probably caught as I was typing out and said that doesn't look quite right but I was a little hasty and my typing this out to try to get it done quickly so I just had to fix some of those little syntax issues now it works and the ears are pretty self-explanatory so read through them and just they're pretty helpful in figuring out what you did wrong at least I've got pretty good at reading them because I make a lot of mistakes so now let's take a look we got three articles and you can see there's a next link here I don't see a previous link you notice how it changes the URL here so that's exactly what we would expect and now I have a previous and an ex link again didn't worry too much about the styling but you can Sal that however you want go to the third page and I only have eight articles so there is no next link but I can go back that's really all there is to it in order to get pagination or pagers set up on your Gatsby site using Gatsby awesome pagination you can see we ran into some syntax issues along the way you probably will as well or maybe your maybe you won't and then I'll congratulate you for that but either way just work through the errors read their messages figure things out and you are able to actually go ahead and get pagers set up pretty easily as you can see it didn't take too long and now we can reuse pagers and now they understand how it works it's very easy to set up pagers for any lists of content that you might need on your Gatsby site so that's it for this time we'll see you next time goodbye [Music]

Channel: Code Karate

Views: 5,014

Keywords: Daily Dose of Gatsby, GatsbyJS, React, JavaScript, Website Development, Static Site Generators, Pagination, Pagers

Id: KJyxJYKLm6g

Length: 23min 29sec (1409 seconds)

Published: Fri Oct 04 2019