Network requests get run twice with React.StrictMode and watchQuery.fetchPolicy: 'cache-and-network'

[meglkts]

Intended outcome:

See a component mounted once and queries / network requests issued once in the browser while using React.StrictMode

Actual outcome:

We recently upgraded from @apollo/client:3.0.2 to 3.1.2 and are noticing components re-rendering and queries / network requests getting issued twice with the same data while dependencies remain the same. This issue only occurs in development, where we use React.StrictMode and set the fetchPolicy for watchQuery to cache-and-network. Duplicate queries do not occur if I remove React.StrictMode or use the default fetchPolicy for watchQuery.

How to reproduce the issue:

You can see the issue with a very basic Create React App + Apollo here

• refresh the inner browser and see the page reload twice
• inspect the network tab to see graphql request issued twice

I was able to revert to @apollo/client:3.0.0 here with otherwise identical code and the issue is gone and client runs as expected, so it seems to be a regression between 3.0.0 and 3.1.0.

Versions
3.0.0 - works
3.1.0 - regression with double queries

Thanks for any insights!

[hinok]

Probably related:

• Updating cache triggers queries when fetchPolicy: cache-and-network is used #6833

[davidgilbertson]

Yeah this just bit me in the behind. For the Apollo team: I'd reckon if people are logging issues related to query fetching that you can't replicate, one of the first questions should be "Are you using strict mode?".

Perhaps a note in the docs to not use strict mode (until this is fixed) would save a lot of people a lot of time.

[oknesar]

Get similar issue with fetchPolicy: 'network-only', I would never have thought it was because of React.StrictMode if it were not for this topic.

[bstro]

encountering this issue on 3.4.0-rc.21

[bstro]

Still got this in 3.4.13. We had to disable StrictMode altogether.

With StrictMode, we began to see an infinite request loop. Disabling strictmode solved the issue.

[brainkim]

@bstro Can you try the 3.5 beta? We did a bunch of refactoring which might help with StrictMode bugs.

[kainosnoema]

This is still an issue for us as of 3.7.5. See #9903 as well (same issue?). Sometimes we see dozens of unmounted but still active queries refetching. We're holding off upgrading to React 18 until this is resolved.