Manage Product Details with a Custom GraphCMS Schema Model

Instructor: [0:00] We're now dynamically pulling in content into our home page, but we're missing the most important part, our actual products that we want to sell.

[0:07] Just like we created a page schema for our home page content, we're going to create a product schema where we can add all of these products where we can manage them inside of GraphCMS.

[0:18] Now that we're back inside of GraphCMS, we want to head over to our schema section. While inside, we want to actually add a new model. Let's click this add button, where we're going to create a display name. Let's call that product.

[0:30] We can see just like we did with our page schema, it's going to automatically fill in our API IDs, where we have our singular version and our plural version, which looks great. I'm going to go ahead and click create model.

[0:42] Looking at our products, we can see that we have three immediate things that we're going to need. We have our image. We have a title and we have a price.

[0:50] Later, when we create dynamic page routes where each one of these projects will have its own page, we also want to add a description. We're going to add that field as well.

[0:58] Just like we did with the page, the first thing we're going to add is our name. We're going to click single line text. We're going to call this field name, where we can see already the API ID. If we scroll down, just like before, we want to use this as our title field.

[1:12] We're going to go ahead and click create with that value. In addition to the name, we want to add the description, which is going to be used on the actual product pages. We have two options here.

[1:23] Instead of multi-line text, which is just going to be a really plain field for people to use, we can either use markdown or I'm going to use rich text. Which is going to give a rich editor for people to actually use when they're managing that content. I'm going to click rich text.

[1:37] I'm going to call that my description. We can see the API ID, and we can see we do have a few options. I'm going to leave those as is and I'm going to click create. Next, we want to actually add our product image.

[1:49] Like we saw in the past, we're going to use the asset picker again, where we can select that, we can call it image, and we can see the API ID, and we can click create. Arguably, one of the more important things is the actual price of the product.

[2:02] How much are people going to pay for this product? We have a few options, where, of course, we could use single line text if we want. I want to store this value as a number. As far as numbers go, we have two options for that.

[2:14] We have the actual number of field, which is going to be more like a whole number. We can see ID and quantity as examples. We want to use flow, which is going to allow us to use decimal places, which we can even see in the examples as ratings and price.

[2:27] Which is exactly what we want to use it for. Let's click flow, and let's actually call this display name price because of our API ID. Let's click create. Finally, we want to add our slug, which is going to give us that unique identifier for our actual products. It's going to also be used inside of our actual URLs.

[2:46] I'm going to go ahead and click this slug field to add it. I'm going to call it a slug. We can see like we did with the page, we want to generate this slug from a template. I'm going to use the name property. That way, it's going to be a friendly URL that makes sense for the actual name of the product.

[3:02] Then, I'm going to go ahead and click create. Now that we actually have our product schema, let's start adding some products. Navigating over to the content section, I'm going to go ahead and select product view, and then I'm going to click create item.

[3:15] This might be a little bit small and hard to see, but inside of the project directory under public images, I also included all the product images, that way you can follow along with the same products that I'm going to be adding. I also have all the data associated with those products including the name and the price inside of the source data products.json file.

[3:35] You can easily copy and paste those into GraphCMS. To start, I'm going to grab this Cosmo-fitted hat which I have for $30. I'm going to go ahead and paste the name. Then we're going to skip the description for now. Then we can see we can add an existing image.

[3:49] I'm going to go ahead and click add existing image, where right now we only have that one Space Jelly banner as an actual asset. We need to upload all of our other photos in order to make them available as assets. I'm going to click upload again.

[4:02] Then I can either click or drag and drop. I'm going to go ahead and select that Cosmo hat model right at the top, which is going to be our fitted hat. I'm going to go ahead and upload that as an asset and make it available to use inside of my product.

[4:15] Similar to before, it's going to be uploaded as a draft. As soon as I save and publish it, it's going to be published alongside my actual content. Then finally, we want to add the price. We can add that as 30.00 for $30. We can generate our slug, where we can click regenerate. We have our Cosmo-fitted hat.

[4:34] Finally, we have all the data that we need. Again, we'll come back later for the description. Now, we can hit save and publish. Check our image and click save and publish.

[4:44] Before we move onto the other products, we have one way we can make this a little bit easier for uploading our images. Where if we head over to the assets directory, we can upload all these images at once, that way we don't have to keep doing them individually.

[4:57] Over on assets, I'm going to click upload, where I can select my files to upload. I'm going to add all of those different images except for the hat model and banner, since we already uploaded those before.

[5:08] I'm going to click open and GraphCMS is going to allow me to upload all those files and we now have them all available as grouped draft assets.

[5:16] This time when adding my next product, which is going to be this Cosmo trucker hat at $24. When I scroll down to add my existing image, I can see that I already have all those assets that I can choose from. I'm going to scroll down until I find that actual trucker hat, where I can go ahead and click that link where it's going to add it right into my product.

[5:36] Now that everything else is filled out except my description which again we'll do later, I'm going to click save and publish, which is going to also allow me to publish that hat image, and we have our data.

[5:46] When we look inside of the content manager, if we're seeing the list of the products that we have, we don't have easy way to recognize which products are which, when we have this view. If we scroll over to the right enough, we can see that we do have the names and we have the images for them.

[6:01] They're not in the location that's easy for us to see right away. While this is the default view, I can click configure columns or we can see we have the option to configure how we want to arrange, and even what data we want to include.

[6:14] Where I see the name, the description of the image and the price, so I'm going to drag this name all the way to the top along with the image and the price. That way we can even see real time that those are being shifted over for us to easily see.

[6:27] This is going to give us a lot easier of a way to be able to scan through our products and see which is which. At this point, I'm going to skip ahead a little bit and add the rest of my products before we continue on. Once I have all of my product data inside of GraphCMS, we can now start to query that and pull it into our page.

[6:44] Later in this course, we'll learn how to create a featured category which will allow us to more easily edit and add and manage our featured products for the home page. For now, we're going to query all of our products and we're going to pick the first four off of the top, just so that we have a way to display these on the page.

[7:01] Back to our handy API playground, we want to select all those products. I'm going to find that product's field. We can even see that we have the option to grab the first specific amount of product. I'm going to select first, I'm going to enter in four, as we ultimately want the first four products.

[7:17] Then, we can scroll down and we can start to select the fields that we want for each of those products, where I want to get things like my name, my price, my slug, and we even want to grab that image.

[7:27] I'm going to open up that image node where we want to similar to before, we're going to grab the height, we're going to grab the URL, and we're going to grab the width. We can click play and we can see that's exactly what we get. We get those first four products with all of the data that we need for the home page.

[7:44] I'm going to go ahead and grab the products part of that query because since we already have a defined query, we don't need this query definition wrapper. Back to my home page, I'm going to scroll all the way down to my getStaticProps where I already have that page query and simply go to the end and paste in that products query.

[8:02] Just like before, we want to grab that data. I'm going to go ahead and clone that. I'm going to say, I want my products to come from data.data.products. Similar to before, I'm going to pass that right through as my products constant, scroll up to the top, and make that available as a prop.

[8:19] Let's console log that out to see what we're getting. I'm going to console log out my products constant.

[8:24] Once we reload the page, we can see that we broke a few things where these images specifically, because we were using the same products variable when we were importing our local product data, we're using a different property inside of each and every one of those products to define the image.

[8:42] While the similar property name existed for both the local and the GraphCMS data, for both the price and the title, that wasn't the case with the image. We can see inside of our console that we do have that array of products, including that data that we are defining from GraphCMS.

[9:00] Really, the only thing we need to do because we have the name and the price already set, we need to define that image. Instead of my code, if I scroll down until we get to the products. First of all, we know we don't need to slice these products to the first four anymore, since we're defining that inside of the query.

[9:18] We want to make sure that we're defining all the attributes that we need. We're not querying for an ID, we're querying for a slug, so we can update this key to product.slug to make sure that that is appropriately working for React sake. Then we can see that we have the rest of this intact except for the image where we can dynamically set the product image.

[9:39] If we look at the structure of the data, it's going to be product.image.URL along with the height and width. Let's set that. Because we're already using that image property, I can simply say .URL. Then let's programmatically define our width and height.

[9:54] I'm going to say instead of this 500 static value, I'm going to add a dynamic value which is going to be product.image, where product.image.width, and my product.image.height. Once the page reloads, we can see there's no more errors related to our application, and we can see all of the products in all of their glory.

[10:14] In review, we wanted to set up a schema for the most important part of our store, our products. We set up all the fields that we'll need, including the name, the image, and the price.

[10:24] We also set up the description, which we'll use later when we're setting up individual product pages. Then we were able to see how we can easily construct and query for our data inside of GraphCMS and append that products query to the end of our existing query.

[10:38] Where we were able to pass along that data, just like our existing home page data to our app, where we were able to dynamically render our first four products inside of GraphCMS.