With Next.js, why does Apollo’s useQuery fetch data twice (once on the server, and once again when the page loads on the client)?
Setting { ssr: false } stops the server fetch, but that doesn’t feel like the right solution.
For example, if I add console log below the query and then refresh the page, I will see the browser tab loading, then watch the data go from undefined to {…} in the terminal, and then the page layout shows up on the client, and but it’s empty until you see the undefined go to {…} in the browser console. Then all the data shows up
Hello! It sounds like you’re performing server-side rendering, but the rendered content isn’t being passed to the browser. If you haven’t yet, please see the documentation on server-side rendering, particularly the “Example” section.
Feel free to post here with followup questions!
1 Like
Thank you for the reply! It looks like the previous developer has SSR configured correctly, like in the example you linked to. Yet, when I console.log the data prop returned by useQuery, I see undefined on the server, then the response object, then the page shows in the browser, browser console says undefined, then it logs the data. So, it seems clear that it is fetching twice even though ssr is configured. If I set {ssr: false} in useQuery, it does skip the server fetch, but again, that’s not really the solution I’m looking for.
Any help would be appreciated 
. I will be here, reading apollo docs 
Hi Chile I am also facing the same issue. can you please help me on this
This should help:
Server-side rendering - Apollo GraphQL Docs
You need to pass the apollo state from server to client and rehydrate it:
If done properly, the query should only execute once on server during initial load.