This course has been updated! We now recommend you take the Intermediate Gatsby, v2 course.
Transcript from the "Templates" Lesson
[00:00:00]
>> Jason Lengstorf: Now that we are able to get that custom data, we can start using it. So let's get these stuff up onto the screen. So the first thing that we're gonna need is we're gonna need react components to actually show this stuff on the screen. So let's get into our theme docs.
[00:00:21] And we're gonna create a couple new things. So the first thing we want is a template. And this is a convention that I like, but that is not required. Whenever I create pages programmatically in Gatsby, I like to call them templates the component that gets used by Gatsby's on page create, I call that a template and I keep those in a separate directory.
[00:00:43] So I'm gonna create source templates and I'll call this one docs page template.js. And inside of it, I'm going to import react from react and I will import the MDXRenderer, so this is the helper that I was talking about awhile back that'll help us show that MDX stuff is code.
[00:01:08] So MDX gives us this, like this functions and stuff, and that pulls out that layout component that we use and it wraps up all the same MDX stuff, so that if we write React inside of our MDX files it'll get rendered. But we don't wanna have to manually parse that.
[00:01:24] So the Docs page template is going to do one thing, which is load data. And then we'll build a Docs page component that will display data. And that's a very deliberate choice to separate the sourcing of the data, from the display of the data, because what it means is that if I wanna make changes to one or the other, I don't necessarily wanna have to rewrite the full query or rewrite the full component.
[00:01:49] When we get into component shadowing it's a little easier to understand why that's a helpful distinction to make. But so, in a template what we'll do is we wanna have React in the context so we'll import React from React. And then we're going to import graph qL, from Gatsby.
[00:02:07] And then we're going to export a query. So the query, it has to be exported. It doesn't necessarily need to be named query. You can name it whatever you want, but Gatsby does require that it is export it. And what we're doing here is what's called a page query.
[00:02:22] And these only work on files that will be parsed as part of the the page creation process by Gatsby. So in the on Create Page or the create pages API is the only time that this works. And that's why I like to keep these in a separate folder under templates so that it's more clear that these get handled differently than the average component.
[00:02:46] So the query that I wanna write is going to load a page by its ID. So what I wanna do to show how that works is, we get an ID, and let's just write our query here. So, one of the ways that I love to develop in Gatsby is to use the GraphQL explorer, and just copy paste it in so I can verify that my queries work before I save it and start up Gatsby.
[00:03:08] So the first thing I'm going to do is set up a query variable. And I'm gonna call this page ID. And the page ID is going to be a string, and we're gonna give it the this ID from the homepage. So to use that, I can close this docs page, and I'm gonna do a single docs page request.
[00:03:31] And I want to use this page ID that we set up, so now I can reference this. And to source that I want to make sure that the page we request matches that ID. And then inside of it I wanna get the title when it was updated, and I want to make that relative to now and then I want the body and that's all I need to display the page.
[00:04:01] So we're gonna stick with that. And I think I, oops I forgot to start the server. So let's yarn workspace theme-dev develop.
>> Jason Lengstorf: Okay, and now when I run it, it should work. So we've got the homepage, it was updated an hour ago and it's got this body in it.
[00:04:27] So that I can then just copy and drop straight in here, fix my indent so that it looks the way I want. And so this page ID is gonna have to get set. But we can set that from the Create Page API in Gatsby using context. We'll look at that in a second when we go to use this, template.