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.
No matter what I try I keep getting: Server Error TypeError: Cannot read properties of undefined (reading 'getAllProducts')
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Can you check your network tab in your browser. Are you able to see a network request for GraphQL?
Can you also check if there is any error in the browser console. Finally will be You be able to share your code on GitHub for me to take a look at?
Jason, useQuery hook returns several properties. Among them, data and loading. It seems that when loading is true, data is undefined so that must be the error. A better approach would be something like:
const Home: NextPage = () => { const { data, loading } = useQuery(GET_PRODUCTS) return loading ? 'Loading...' : <ProductList products={data.getAllProducts.data} /> ; }
Sorry, indentation does not work here well, here's my code: https://gist.github.com/igmoweb/01787482729e3368caf870d873eff75e