Query Data with GraphQL in Next.js from a Fauna Database
Now that Apollo Client is set up and ready to be used, we can finally query data from Fauna to use in our application.
We'll go to the Fauna GraphiQL playground and copy the findShopById query that we ran previously. This query will be passed into Apollo's useQuery hook.
Shadid Haque: [0:00] Let's make sure our server is running. I'm going to do npm run dev in the terminal. We're going to go to our index.tsx page. Head and Image is not being used, so I'm going to delete them for now. We are going to import gql and useQuery from apollo/client.
[0:20] Next, we'll define a GraphQL query. I'm going to call this query GET_SHOP. I'm going to type gql and two backticks. Inside these backticks, our GraphQL query is going to go. Now, we can head back to Fauna. We can copy this previously written GraphQL query, and we can paste this in our code.
[0:42] Next, we will destructure data from the result of useQuery hook. We're passing in GET_SHOP as a parameter to useQuery, and we will console.log the data.
[0:55] Back in our browser, if we refresh localhost:3000, we'll notice that data is getting returned. We can also go check the Network tab and we'll see that we're receiving data back from Fauna.