Use GraphCMS Schema Models to Manage Page Content

Instructor: [0:00] When building out our data inside of GraphCMS, we have two important concepts. First of all, we have our schema, which is going to define what our data looks like. Then we have our content, which is going to be the actual data.

[0:13] The first content that we're actually going to build out is the home page content. Here, we can see we have a banner where we're using this Prepare for Liftoff. We even have a graphic in the background.

[0:24] We want to actually define this data so that we can manage it inside a GraphCMS. Trying to think of this data abstractly, we have our home page which represents a page.

[0:35] We're going to define our schema as a page where that page has different attributes, including what might be a headline and a sub-headline, where our home page is going to be an instance of that page. The first thing we're going to do is actually create that schema.

[0:50] You can either click Setup Your Schema from the project home page, or you can go to the schema section in the sidebar. Then I'm going to go ahead and click Create Model. When creating our model, we want to give that model a name. As we mentioned, it's going to be page for this particular schema. I'm going to call it Page, as our display name.

[1:11] We can see that the other fields actually get filled in by default for us, so that we don't actually have to manage that ourselves. Our API ID is going to be page and the plural version of that is going to be pages. I'm good with this and I'm going to go ahead and click Create Model.

[1:26] Once our page model is created, we can see that we're dropped into our schema editor. Now we have the ability to add whatever fields we want that's going to represent the data of our particular page.

[1:37] First things first, each and every one of our pages is going to have a name associated with that page. For instance, our home page is going to be called, well, home page. We want to add a name field for that particular page field.

[1:50] I'm going to go ahead and click this single-line text, which is going to give me the new options for creating this field. I want to call this field Name, where we can see that it's, again, going to fill in the API ID. We can optionally add a description.

[2:04] Then we can see we have a few field options. Particularly, I want to select Use as Title Field, where we can use that in the future for our queering. Once we select that Use as Title Field, I'm going to go ahead and click Create.

[2:18] We can now see in our schema editor that we have that name field. Really the main thing that we want to actually define on this page is this banner that has the text inside. We're going to call this our hero section, where we have a few things associated with this.

[2:32] We have our title. We have some text associated with that. We have our background images. Then finally, we want to be able to add a link, so that somebody can actually click this and go to whatever it is that we're trying to advertise at the top of our home page.

[2:47] A quick note. If you're wondering how we're going to manage these products, we'll see in the future lesson where we can manage this by category. Back in my schema editor, I'm going to go ahead and select single-line text again. This time I'm going to call it Hero Title. Where we can see again, it's filling in that programmatically, but we don't want to change any of these values for now.

[3:07] I'm going to go ahead and click Create. Now that we have our title, we also have this text field where we don't want this to be just a single line of text, we want the ability to add as much text as we want. We want to be able to fit it within the design, but we want to make sure that we have the ability to be flexible with the content that we add.

[3:26] This time, instead of single-line text, we're going to add multi-line text, which it's going to be pretty similar to what we did with the single-line text. I'm going to go ahead and call this Hero Text. We can scroll down, see the typical fields as normal and we'll go ahead and click Create.

[3:42] Now for the link that's going to be associated with that hero, we can go ahead and click single-line text and I'm going to call it Hero Link and go ahead and click Create. Now we want to create a field that's going to allow us to upload an image that we can use for this background.

[3:57] Then in the Add Field section, I'm going to scroll all the way close to the bottom where I'm going to find the asset picker field, where I'm going to call this My Hero Background. We can see we have some of the similar options to our other fields, but this time, we have the ability to allow multiple assets.

[4:12] Where in our case, since we're only adding a single hero background image for this particular module, we do not want to allow multiple assets. We're going to allow it to be a single asset. We're good with the rest of the defaults here, and we're going to go ahead and click Create.

[4:28] Finally, we have all these different field that's going to represent the data on our page, but we have one more that we want to add. That's going to be the slug which is going to be an ID that we can query with. We can see at the top of add fields that we have a field called slug.

[4:43] Let's go ahead and select that. We're going to also name it Slug. If we scroll down, we can see that we have some different options. Where first of all lower case is checked as we want to make sure that all of these IDs are lowercase, so that it's very consistent for when we query these.

[4:59] Plus, it's general best practice that because we're going to use this in our URL, that the URL is all lower case. Also, what we can do is generate this slug from a template. You can certainly manually add this if you'd like to, but this is an easy way to generate these.

[5:17] I'm going to go ahead and select Generate and we can see that we have a few available fields that we can use. We're going to go ahead and use the name which is going to be the name that we give to each of our different pages, such as the home page.

[5:30] I'm going to add a bracket. I'm going to add name. We can see that it even gave us the autofill. That's going to be our slug template. We're going to leave the rest of the fields as it is and go ahead and click Create. Now we have all the data fields we need.

[5:44] We can get started creating our home page. We're going to navigate over to the content section right in the sidebar, where we can see that we have our different views, where since we only have our page model so far, that's all we see.

[5:56] Inside of page, we're going to go ahead and click Create Item. Where now, we can see all those different fields that we created. To start off, we want to add our name as home, or home page, which ever you prefer. We can see our hero titles prepare for liftoff.

[6:11] Our text is apparel that's out of this world. I went ahead and added those two values in the other fields. For our link, we don't have the correct link for this apparel category yet. We're going to go ahead and put / which is going to be the home page.

[6:26] For our hero background, to make it easy to follow along, I included an image right inside of the starter project where you can select it to upload to your particular page. Once we go ahead and click add existing hero background, we can see that we're going to select an asset.

[6:42] Since we haven't uploaded any assets to GraphCMS yet, we do need to upload one. I'm going to go ahead and click upload, which is going to give us a few options for how we add this image. Where I'm going to grab it from my desktop.

[6:56] I'm going to go ahead and click select files, where I know this is going to be a little small and hard to see. We can see inside of the public directory, we have our images directory. Inside of there, I have the file called Space Jelly Gear Banner, which is exactly the image that we want to select. We're going to upload to GraphCMS.

[7:15] One thing to note is, we can see that it was uploaded as a draft. Before it's made available, we'll have to publish that. Before we do that, we can finish off our actual page by clicking regenerate for our slug, which we can see once we click that, it's going to grab our home page.

[7:31] Because there's nothing special going on with it except for that capital letter in the beginning, we can see that it's basically the same thing except for a lowercase h. Now, we have all of our home page content filled out.

[7:44] I'm going to go ahead and click Save and Publish, where we can see now that because we don't have that background published, GraphCMS is giving us the ability to publish it as part of the page publishing. I'm going to go ahead and select that asset, and I'm going to click Save and Publish.

[8:01] Our home page is published and it's going to be queryable, which we'll see in the next lesson. Before we move ahead, let's see where we can visit all of those different assets that we'll upload through this time. Where if we see in the sidebar, we have this little paper clip, where if we click Assets, we can see that we do have our single asset so far.

[8:19] Where we can even click edit and we can see more information about this asset, where this is the banner that we uploaded. It's going to give us a way that we can navigate, delete, update and manage our assets that we're going to be uploading to GraphCMS as part of this course.

[8:36] We have our home page data managed inside of GraphCMS. In the next lesson, we'll learn how to query this data and replace the static content inside of our code with this data that we'll query.