Duplicate GraphQL queries

[wayne530]

Hi there - new to nextjs + Apollo, so apologies in advance if there is an obvious reason/solution to this. Following the example from the README, my next pages are able to query/mutate data using GraphQL but I noticed the server seems to be making a query while compiling, then the client also makes the same query. It's not necessarily an issue for read-only operations, but some mutations aren't idempotent so the second call from the browser fails.

Is this the expected behavior? Is there a way to have the query execute in either the server or the browser for a given page, but not both? If not, is the only solution to make mutations idempotent so both requests will succeed?

Thanks in advance for any tips/pointers!

[colinappnovation]

Note: Do not be alarmed that you see two renders being executed. Apollo recursively traverses the React render tree looking for Apollo query components. When it has done that, it fetches all these queries and then passes the result to a cache. This cache is then used to render the data on the server side (another React render). https://www.apollographql.com/docs/react/api/react-ssr/#getdatafromtree

[wayne530]

@colinappnovation thanks for the reply. To be clear, I’m not seeing multiple different queries, I’m seeing exactly two identical graphql queries on a page that in theory should only execute one. By adding a console.log, I verified the server is executing one and the client is executing one. I would expect that if the page is rendered server-side, I would only see a single query by the server, and similarly, if the page is rendered client side, I’d see a single query by the client. Seeing both feels unexpected and certainly could have unintended consequences for mutations.

[wayne530]

@adamsoffer I'm wondering if you might be able to comment on the "expectedness" of what I'm seeing? Do you see the same thing with your canonical example?

[adamsoffer]

@wayne530 - Looks like someone got to the bottom of this a couple days ago on the next.js apollo example :) https://github.com/zeit/next.js/pull/8917

I'll look into implementing the fix here as well.

[wayne530]

That's awesome news, thanks @adamsoffer for the update!

[wayne530]

Hey @adamsoffer, just checking to see if you have any updates on this?

[chandan-reddy-k]

@adamsoffer @wayne530 was this issue resolved ? I face the same issue.

[wayne530]

@chandan-reddy-k unfortunately, I don’t think it has yet.

[adamsoffer]

This should be fixed in v4.0.0