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.
Hey Chris, what's the error you are getting ? I can help 😃
Maybe I missed it in the video but I was missing <ApolloProvider client={client}> in _app.tsx
Ahh glad it's working now. You can always refer to the code. Feel free to reach out if you have any questions
I had the same problem Chris had. Luckily I've worked with Apollo before. I think the video should show the ApolloProvider part too.
Good call Bruno. I'll update this video. Thanks for the feedback
Do we need to configure something right now I am getting a CORS error
localhost/:1 Access to fetch at 'https://dashboard.fauna.com/graphql' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Yeah, adding the apollo Provider step is something not included in the video
Hey Eduardo, what's the error message you are getting?
You get Invariant Violation: Could not find "client" in the context or passed in as an option. Wrap the root component in an <ApolloProvider>, or pass an ApolloClient instance in via options.
The way to fix it is the way Chris says, adding <ApolloProvider client={client}> in _app.tsx
I get 404 in console after running the app or refreshing the page. And data is undefined for me.
Even after adding ApolloProvider to app.tsx file.
Can you please share the code? I can help
Did I miss the step of wrapping the app in ApolloProvider?