Why Gatsby Uses GraphQL
Create a Gatsby Page With Hard-Coded Data
Why does Gatsby use GraphQL? This is part 2 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.
In this video, you’ll create a page by hard-coding data into the context, then accessing it via the pageContext prop that Gatsby will pass to the template React component.
Instructor: [00:00] If you're creating pages in Gatsby that need data to be passed down, we need to introduce a new concept called context. Inside a Gatsby, the way we create pages is by using the createPages API, which is exported from Gatsby Node.
[00:14] We're going to do exports.createPages, and this is a function, and inside of the function we get some arguments. We're going to get into the actions argument, and then we want createPage, which is the code that will actually add a page to Gatsby.
[00:31] Inside of this, we're going to createPage, and this is going to receive three pieces, the path, the component, and the context. Context is what we actually pass down to the page. Our path is what will show up on the actual website, so yoursite.com/blog or about.
[00:58] We're going to call this page with context, and the component, we haven't built it yet, but let's decide where it's going to be. We're going to use required.resolve, we're going to put this in src/templates, and we're going to call this with-context.js.
[01:15] Then down in context, we're going to pass in two items.We're going to give it a title, and the title is going to be We Don't Need No Stinking GraphQL, and the context is going to be a little bit html so let's do a paragraph. This is page content, and let's add a second paragraph in here, no GraphQL required.
[01:46] Then that is going to expect that this page exists, so let's create it. In templates, we're going to create a new file called with context, and in this file we're going to import React from "react," and then we're going to have our component.
[02:05] We'll call this with context, and this is going to be a React component, so it's going to have a section, and inside of it we want to get the title, and then we're also going to want to get our content. This will be exported as the default with context.
[02:27] How do we actually get to that context? Inside of Gatsby, anything that gets passed to context here, to a page it's going to be added to a prop called pageContext. Inside of pageContext, whatever we pass to context here, in our case title and content, will be available as properties on this object.
[02:50] What we can do is we can grab out that pageContext.title, and this is actually going to be dangerouslySetInnerHTML. We're assuming that we know exactly where this HTML came from, because we would never do this with user content.
[03:14] We're assuming that we got this content by running, let's say, Remark or some other kind of HTML generation that would give us HTML that we want to set. Once we have this, now we can say we're going to pull out of the page context the title and the...Not the context, the content.
[03:36] Content lines up with this HTML, title lines up with page one, so let's save that. Now that we've got this ready, let's go ahead and run Gatsby. We're going to do Gatsby develop, and this is going to build out our page using that context.
[03:54] Again, that page was created at page with context, so let's go out here to localhost:8000, we'll paste in page with context, and that gives us the title that we set, and the HTML is rendered as HTML.