Why Gatsby Uses GraphQL
Create a Gatsby Page Without Any Data
Why does Gatsby use GraphQL? This is part 1 of a 4-part series that shows how to create pages in Gatsby, how data becomes hard to manage over time, and how GraphQL helps limit the complexity of data management.
Let's create a page using React component templates and no data at all.
Jason Lengstorf: [0:00] In its simplest form, a Gatsby page just needs a template and then an API called to create it.
[0:06] Let's start by creating a template, which we'll put in templates, and we'll call this one no-data because we're not going to put any data at all into it. It's all going to be hard-coded. We'll import React from 'react.' Let's set up our component. We'll do this one as a NoData component because we're going to hard code everything.
[0:24] We'll create a section. Inside of that section we're going to have a header that's going to say, "This Page Was Created Programmatically." Then we'll add a little more. "No data was required to create this page - it's just a React component!"
[0:48] Down at the bottom we will export this, export default NoData, and save it. Then we're going to create a gatsby-node.js. Once we've created gatsby-node, we're going to export a function to create pages.
[1:11] In Gatsby, the way that this works is we hook into the createPages API and that's going to get a function. The function gets arguments and we're going to destructure that. We want to get the actions. This is a collection of helper functions that do things inside of Gatsby. The one that we need is the createPage.
[1:32] Once we have createPage, we're going to do that. We'll create the page, and that gets two arguments, the path and the component. The path is where it will live on the website. For example, if we want the site to look at, let's say, example.com/blog, we would put /blog/ in here.
[1:56] That's not actually what we want. In this case, we're going to create a page called no-data, because that's what this page is called, and we want to tell people what they're getting into, so no-data. Then down here we need to point to this no-data component we created. We're going to use require.resolve, and let's get to it, src/templates/no-data.js.
[2:15] Let's start the site with gatsby develop. Once this gets running, we're going to go to localhost:8000. We created no-data, so let's visit that. We see our content, "This Page Was Created Programmatically."
[2:37] As you can see, no GraphQL required, no data layer at all required, because we're just hard coding a React component.