Unexpected Behavior with `fetchPolicy` "network-only" and `nextFetchPolicy` "cache-first" In 3.7.x

I’m in the middle of doing an upgrade of AC 3.6.8 to 3.7.x (currently tested and template made with 3.7.1) and I found something that I think is a bug, but I’m not sure.

Intended outcome: I have useQuery inside a component that is conditionally shown that uses the fetchPolicy of "network-only" and nextFetchPolicy of "cache-first". In the demo below, I’ve made the querying component conditionally mount with a toggle button. I expect that every time the component is mounted fresh, it should always fetch from the network and ignore the cache for that first load.

Actual outcome: It appears that, instead, the component comes to life, fetches from the network, fills the cache, then when I hide and fully unmount the component, then when I toggle it back to mounted, it does in fact start fetching from the network but seems to “apply” the "cache-first" policy too quickly and displays the cached data before the data comes back from the network. In the demo below, I’ve raised the delay on the network to 1.5s so it’s more obvious and made the length of the people array a count of the number of times the server data is used.

In other words, I think I expect:

• click to show the querying component, I see Loading... for 1.5s, then 1 as the count.
• click to hide the querying component
• click to show the querying component, I see Loading... for 1.5s, then 2 as the count.

but instead, what actually happens on that last bullet is I never see Loading..., I see 1 as the count, then 1.5s later it updates to 2.

How to reproduce the issue: https://github.com/dairyisscary/react-apollo-error-template

Versions 3.7.x

[skrivle]

Hi All 👋

We are also experiencing this issue it seems. We were able to reproduce this both in a test case and in browser here: https://github.com/skrivle/apollo-next-fetch

This is a regular CRA project. You can run npm test and you’ll see the test failing. To make the test pass you can comment out the nextFetchPolicy config item in App.tsx

For the in browser reproduction please follow these steps:

• npm start
• click contact 1
• click contact 2
• click unload (which will unmount the app component)
• click contact 1
• observe that “loading” is shown very briefly and then it incorrectly shows the cached data for contact 2 until data for contact 1 is loaded.

Note: the conversation items have the same id but different content across the two requests. This is to illustrate the scenario where the properties of an object with a consistent id change over time.

[levrik]

@jerelmiller Exactly. I’ll try to assemble an example highlighting the issue latest next week.