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.