7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 10Length: 1.2 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.1 Generating Pages With Data

We use Gatsby to build data-driven websites. So we naturally need to incorporate data. In this lesson, we'll use JSON-formatted data in the simplest way to generate an index page.

3.1 Generating Pages With Data

So far we've been working with just static pages. And that's perfectly fine because just about every website has static pages. However, most of the time we want data driven pages. By that I mean that when somebody makes a request to a typical web application well, the application goes and fetches data. It's either in the database, or it's a web API, or maybe it's just a file on the file system. But it retrieves that data, it dynamically builds the markup and then sends that back to the browser. Now with Gatsby all of that work is done up front so that before we even deploy our application, all of that work is done so that when a user requests a page, there's no back end processing going on. The web server just returns that page and that's it. So of course, we need to be able to build data driven pages. And so the first thing we need is some data. So at the root of our project let's create a new folder called data and inside of data, we're going to create a file called employees.jason. This is going to be an array of objects, and this objects will have a first name property. Will have John Doe, so let's have a last name as well And then let's also have the title and John can be our CEO. So with that in place, we can just copy this and use that to create another person and we can create as many people as we want but I'm just going to stick with two for right now. So the second person I'll call Jim James, and he will be our CTO. Now based upon this data, we want essentially to create three pages. We want an index page to display all of our employees. And then we want an individual page for each employee. So there's three pages that we need to create. Now we're going to do this dynamically. So that while yes, we are creating this number of pages, it's all going to be based upon the data that we have. And so to do this, we need to hook into node. And so we need to create a new file at the root of our project called gatsby_node.js and we're going to export a function called create pages. This receives an object that has an actions property. That's the only property that we are concerned with right now. And really, the only thing that we're concerned with as far as actions is a CreatePage function. So that's what we want to use. Inside of this creates pages function. So as Gatsby builds our website, it's going to use this create pages function to create pages dynamically based upon our data. So let's first of all retrieve our data. And so I'm going to call this employees and we will simply require. Our JSON file inside of data. So we will specify the path there. And then we will use the Create Page function. We will pass an object that contains information about this particular page, so the first thing is going to be the URL path. So we have our Home page which is root then we have the About page. Let's say that our employees Going to be at the slash employees. So let's specify that path there. And then we need a template because it's not enough to have just the data to work with. We need to pass that data to a component. So that the component will be built using that data. So we need to create a component. And inside of source we will create a new folder called templates. And inside of templates, we will create a new file, let's call it employee-list.js and let's take the about page and let's copy the contents and paste it into employee list. Because this gives us everything we need, we need helmet. So let's change the title to our employees. Let's also have a heading and I'm thinking an h2. That might be too big, but we'll just have employees there. And then we will have an unordered element so that our list of employees will be just a list. Li elements and of course we need to build these Li elements. So this is going to be a little bit more involved at least as far as the function is concerned. So we will have some curly braces, and then we will return this markup. And then we need to build all of those LI elements based upon our employees. So I'm just going to call that items, but then how do we get our data? Well, we have a Of course our props. Every react component has a props that is passed to the components function. And in our case, we're going to want to use. Here's a prop called page context. Now we will see how to set this in a moment. But this gives us some flexibility because we get to determine what is inside. Have the page context. So let's say that we're going to have a property called employees. And we will just use map and we will map using the item as well as the index because we don't want the browser To complain about not having the key for our list of elements. So for right now we will just have our Li elements we'll set the key equal to the index and then we will have. Of the first name and then the last name and that will be our li element there. So then inside of our unordered list We can just say items, and that should work. Now ideally we would have links to the individual employees, but we will do that in the next lesson. For right now, we want to go back to our Gatsby node file. And we want to specify the component that we just created as the templates for This page, so we will use require resolve, and then we will specify the path to that component. So that was source templates and then employed -list. j s. And then we get to specify the context. This is that page context that we used inside of the component. And so we can just add the employees A property to context. And there we go. So one less thing is a link to this new page. So let's change services so that it is employees. And we of course want to change the anchor to a link and we will need to get rid of the href so that we can set to. That was employees. So with this done, we now see employees in our menu. Let's click on it and what do we get? We get an error. That's always wonderful. Let's go to the console because sometimes the command line will give us a better an error. And sometimes we just need to stop Gatsby and restart it. And if you get results that you don't expect inside of the browser, that's usually a good thing to do. Because behind the scenes, Gatsby is going to cache everything. And sometimes you actually have to clear out the cache before seeing the results that you would prefer to see. So let's refresh the page because it looked like it was done. It is still building the bundle so I guess we need to wait. And looks like everything's okay. So there we go, we have our employees listed there so we can go to Home, we can go to About and then we can go to Employees and we have our list. So we have just built a data driven page with Gatsby. Of course, it is static data, but it is data. So in the next lesson, we will create an individual page for each employee.

Back to the top