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.
Did I miss the step of wrapping the app in ApolloProvider?
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