useQuery with fetchPolicy: network-only return cache data at first render when remount component

[chenesan]

I'm trying to use @apollo/[email protected] and find out behavior change of useQuery with fetchPolicy: 'network-only' between AC3.4 and AC3.3, not sure if it's a bug or intended behavior.

Intended outcome:

For example we render an <A /> component, and query with fetchPolicy: 'network-only':

function A() {
  const { data, loading } = useQuery(query, { fetchPolicy: 'network-only' };
  return <Blablabla data={data} />
}

Then we, unmount <A />, and remount <A /> again. e.g. route or state change.

I expect when we remount <A />, the initial data returned by useQuery should be undefined, and after data fetching, the data will be renewed. which is the behavior of AC3.3 .

Actual outcome:

When I try the above use case on AC3.4, the initial returned data in <A /> on remount will be cache data, not undefined.

How to reproduce the issue:

reproduction: https://codesandbox.io/s/fervent-tesla-sb8oe?file=/src/App.js

Reproduction steps:

1. At first the App will render <A />. There's a console.log in useEffect of <A /> to record data value on mount so you can see console printing data on mount: undefined.
2. click link B to switch to <B />
3. click link A to remount <A />. In AC3.4 the console will printing full data, but in AC3.3 (or AC2) it will print undefined.

Versions

System:
    OS: macOS 10.15.3
  Binaries:
    Node: 12.16.3 - ~/.nvm/versions/node/v12.16.3/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v12.16.3/bin/npm
  Browsers:
    Chrome: 92.0.4515.159
    Firefox: 89.0
    Safari: 13.0.5
  npmPackages:
    @apollo/client: ^3.4.9 => 3.4.9

[lprokein]

Same here.

After upgrading from 3.3 to 3.4 this started happening. I checked that last 3.3.21 version worked as expected. Change behaviour started from 3.4.0 and still occurs in 3.4.9 release.

[brainkim]

Probably caused by this PR #8422

[chenesan]

Thanks for the quick fix 🙇