Gatsby Tutorial #19 - Generating Pages

Key Takeaways

all right then so now we have this template file for the project details we want to tell gatsby to fetch the data for each project that we have and then we want to pump it into our template to generate a page for it so by the end of the process we have six pages one for each project that we have right here inside the projects folder all right so how do we do this well to do this we use a file called gatsby node now it doesn't exist yet so we're going to need to create it and we do that in the root folder not inside source but over here so i'm going to right click and create a new file and that is called gatsby hyphen node dot js so this gatsby node file is a file that will run a build time in a node environment so we can run certain functions inside this file to do things like fetch data and then generate pages with that data based on a template file which we already have so the first step inside this file is to create a property called create pages on the exports object so i'm going to say exports dot create pages like so now this is how we export things in a node environment it's a little bit different from es6 modules but i'm going to set this equal to an asynchronous function right now and the reason it's going to be asynchronous is because we're going to fetch the data that we need to pump into the template so it's asynchronous and it means we can use the await keyword inside this function now as an argument we get an object inside this function and we can destructure a couple of things from this object the first thing is going to be graphql so much like we used graphql and we imported it in our page components to make queries we're destructuring it from this object right here so we can use it to make queries inside this function the second thing we're going to grab from here is something called actions and actions contains a few different methods that we can use inside this function and one of those is a method to generate pages so the first thing we need to do inside this function now is to grab the data that we need to make pages for and that is all the markdown files so what i'm going to do is say right here const and we're going to destructure the data from the response here because it gives us a response object we're just destructing the data property on that object and we're going to set that equal to a weight and graph ql like so now this time this is a function so we don't just place our back ticks at the end over here we invoke the function and then we pass in whatever the query is so we do our backticks now and then we pass in the query right here now what do we need we need all the markdown files and what we'll do is grab them first of all from graphical so let me just bring this back up so we can start from scratch like so so all markdown remark we don't need to sort them but from here all we need is the slug so let me get rid of the id as well and the reason we need the slug is because when we're generating pages we want to know what is the route going to be for that page now remember if we take a look inside our projects let me close the images take a look inside one of these we see a slog property now that is going to be the route or part of the route for this page and we're going to tell gatsby that that is the case right because we need to generate as well as a page a route for that page all right so what i'm going to do is grab this query that we have right here in fact we don't need to name it so i'm going to get rid of that bit i'm going to grab it and i'm going to paste it right here like so now the query right here is not for the projects page so i'm going to get rid of that and i'll just call it project like this so we get all the markdown files as nodes we go into the front matter and we grab the slug for each one so now we have that data we can do something with it we want to generate a page for each one of those items in the data so then how do we do this well it's pretty simple first of all we want to cycle through all of the items in our data now to do that we need to say data then we want to go into all markdown remark this is much like we drilled into the objects before once we get that data back then we want the nodes right here now remember this nodes this is going to be an array right here of all of the different items that we get back and on each one of those items we're going to have access to the front matter and then on that the slug so what i want to do is cycle through these nodes and for each one we want to generate a page based on our template and in each case we want to pass in the data for that template somehow now the only thing we have is the slug right here but we can still pass in the slug to the template and then from the template we can use that slug to make another query to get the data for the project with that slug i hope that makes sense so to do this i'm going to use the for each method on this nodes array and for each node what we'll do is fire a function and then the way we create a page oops this is all wrong so let me just change this and change this back to lowercase okay so then the way we create a page is by using this actions thing right here so i'm going to take that and i'm going to use a method called create page so this is a method and we're passing an object so that gatsby knows how to create the page what template or component do we want to use to create this page what is going to be the path the route for this page and what data do we want to pass into the template for this page well we can set all of that up inside this object so first of all the path what is going to be the path for this page well i want it to be forward slash projects and then forward slash whatever the slug is going to be now i can access this log from the node so i'll say plus node which is the thing we take in to the function and then i want to access the front matter then the slug property on it so that is the route or the path for that page forward slash project forward slash whatever the slug is next we'll say what components do we want to use to generate this page now this is just going to be the template page and it needs to be an absolute path to that so in order to create this absolute path i'm going to import something so at the top oops i don't want to close that down at the top i'm going to say const path is equal to require this is how we import something in a node environment we use require and we want to require the path module now we don't need to install anything for that it's automatically built into node so don't worry about anything like that but down here we can use that path now to resolve a path so we're going to say path dot resolve and then inside here we're going to say dot forward slash to say the current directory then into source then templates then project hyphen details dot js and this is going to generate an absolute path for us not a relative one so this requires that absolute path remember okay so that's the second property the third one is going to be context and basically this is going to be what do we want to pass what variable do we want to pass in to the template when we're generating this page now i want to pass in the slug so first of all we pass in an object and then whatever variables we want to add we create a property for them so the slug in our case is going to be node dot front matter dot slug now this slug right here is passed in as a query variable for us now we've not learned about query variables yet we're going to talk about those in the next video but it means that when we're making a query down here for this template page we have access to that slug and we're going to use that query variable to make sure we get the data for whatever project we need then once we have that data we can output it right here so that's going to come in the next video but for now what i want to do is make sure that we've actually created these pages and we should just have a blank project details page using this template for each of these different routes right here so it's still going to generate those even though we're not using this inside the template page yet it's still going to generate them based on this component and we should be able to at least go to those pages okay so now what we need to do is cancel out of our process down here so ctrl c and then i'm going to run gatsby develop again and then i'm going to go over here to the browser and i'm going to try clicking on one of these things and notice now it's no longer a 404 we get a page for it and it uses this template over here project details currently it just says title and stack but once we use that query variable that we passed into it right here using the oops that should be context not context once we use that then we're going to be able to pass in the data or query the data for that project and pass that data into the template instead but at least now for each one of these we have the page set up and you can see the path for those pages at the top so this is all working so next up what we're going to do is we'll see how to use that query variable the slog right here that we pass in in our query in this template so we can get that data and actually use it in the template