Unexpected Data Fetching with useBackgroundQuery, StrictMode, fetchPolicy: network-only (or no-cache), and state changes

[wand2016]

Issue Description

When utilizing useBackgroundQuery alongside React StrictMode and setting fetchPolicy to network-only or no-cache, coupled with state changes within the same component as the useBackgroundQuery call, it leads to the creation of a new queryRef instance. Consequently, this triggers undesired refetching behavior.

Link to Reproduction

https://codesandbox.io/p/sandbox/cool-shadow-3nm9s9?file=%2Fsrc%2FApp.js%3A58%2C35

Reproduction Steps

1. Click the increment %d button.
2. Upon clicking, the Grandchild component is re-rendered with a new queryRef instance, resulting in undesired fetching.

cool-shadow-3nm9s9.-.CodeSandbox.-.Google.Chrome.2024-04-27.23-00-30.mp4

Note

disabling StrictMode fixes the issue.

cool-shadow-3nm9s9.-.CodeSandbox.-.Google.Chrome.2024-04-27.23-03-39.mp4

Expected Behavior

The useBackgroundQuery hook should not create a new queryRef instance upon state changes within the same component, as long as it does not alter the options of the hook call.

Actual Behavior

The combination of the mentioned factors leads to the creation of a new queryRef instance, resulting in unexpected fetching behavior.

@apollo/client version

3.10.1

[bignimbus]

Hi @misacorn 👋🏻 thanks for reporting this and for providing a reproduction! We'll take a look at figure out next steps.

[jerelmiller]

Hey @wand2016 👋

I've got a fix for this with #11821 and can confirm it fixes the issue given your reproduction. If you want to try this out for yourself, you can install the snapshot release with:

npm i @apollo/client@0.0.0-pr-11821-20240501000021

We'll try and get this out in the next version!

[wand2016]

@jerelmiller Thank you so much! This fix is a lifesaver for our product.

[jerelmiller]

@wand2016 Awesome! If you need a temporary fix until we get this out, you should be able to downgrade to 3.9.9 which doesn't have this issue. It was introduced in 3.9.10. Not sure if you depend on any of the functionality in 3.10 but wanted to give you this option as well! I'm hoping we can get this patch out quickly though so you don't have to do this 🙂

[github-actions]

Do you have any feedback for the maintainers? Please tell us by taking a one-minute survey. Your responses will help us understand Apollo Client usage and allow us to serve you better.