Create Products in Fauna and Display Them on a Next.js Product Page
Now is time to use actual data product data to create and display products on a page in Next.js. Similar to before, I'll create a ProductsList component which will have styles and structure predefined. Look through the component in the code to get an idea of what's going on here.
There are a couple updates we'll have to do with Fauna to accomplish this. First you'll notice that there is no 'getAllProducts' query that is available to us. To create such a query, we will update our schema with a query of getAllProducts that returns an array of products. We'll test it out in the GraphiQL playground and add it to Next.js.
The first time you run a query like this, you'll notice you get a permission denied from the fauna endpoint. This is because we need to update our permissions to include the new index that Fauna made for getAllProducts. Once we do that we'll be in business.
Shadid Haque: [0:00] Here in our home page, we want to show all the products. Let's go ahead and create a new ProductList component. I'm going to add in two prewritten component -- ProductList and ProductItem -- in this file. The code for these two components are provided with the lesson notes.
[0:17] The code for these two components are very self-explanatory. ProductList component takes in a products array as props and then maps over the products array and returns ProductItem. ProductItem, on the other hand, renders information about an individual product, such as the name of the product, price, and image associated with the product.
[0:40] Finally, at the bottom, we export the ProductList component. Now, let's add this ProductList component to our home page. For our products prop, I'm just going to pass in array of numbers for now. Let's import the ProductList component. Now, we see some products in our home page.
[1:03] These are just some hard-coded data. We want to be able to pull in real data from Fauna. Let's go ahead and create some new products in our Fauna database.
[1:12] We're going to create a new mutation. This is going to be createProduct mutation. For data input, we're going to give it a name, description of the product, price of the product.
[1:26] Then, we associate our product with a shop. We will use the connect keyword to establish one-to-many relationship. To connect this product with a shop, we need a shop's id. I'm going to pick a random shop from our Shop collection. We'll go back to GraphQL and add this to our mutation.
[1:47] Next, I'll add a category as well. Let's return the _id of the newly created product. Let's go and run this. It's created. Now, I'm going to create couple more products here. We can go to collection and Product collection to verify that we indeed created couple products.
[2:19] Let's head back to the GraphQL Playground. We need a query to return all our products. When we open the doc tab in our GraphQL Playground, we notice that we don't have a query that returns all the products. We need to create a custom query. Creating custom queries are really simple in Fauna. All we have to do is make some changes to our schema file.
[2:42] Let's head back to our code and let's open our schema.graphql file. Here, we'll define a new query. We will name our query getAllProducts, and we will simply return an array of products.
[2:57] Let's head back to Fauna. We will select Merge Schema and we will upload our newly updated schema. Notice we have a getAllProducts query available to us now.
[3:09] Let's go ahead and run this query to get all the products. It returns a data sub-selection, which is an array of all the products. Inside data, we can return any fields that belongs to Product. We get all the products back as an array.
[3:31] Let's add this query to our home page. We will also change the name from GET_SHOP to GET_PRODUCTS. Now, if we refresh our page and open our Network tab, we will see that we actually get a permission denied error. This is because our front-end doesn't have permission to make this query.
[3:56] We're going to head back to Fauna and we will go to the security tab, we'll go to Roles, and select our FrontEndRole. Here in the Indexes, we are going to find the getAllProducts index. We are going to give read permission to it and we will save it. Now, if we go back to our app and we refresh and in the Network tab, we'll see that data is being returned.
[4:25] Next, we will plug in the returned products to the ProductList. Then, we'll go to the ProductItem component and we'll replace the hard-coded values with product.name and product.price. We also have to return the price sub-selection right here in our query and now we're getting all the data back from our back-end.