Refetch resolves queries with variables from every previous component mounts

[kestutis-buivydas]

Intended outcome:
Refetch should resolve query only with current variable.

Actual outcome:
Multiple queries with variables from every previous component mounts are resolved.

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

Create component with useQuery which has skip: true and fetch-policy: 'network-only':

const { refetch } = useQuery(PERSON, {
    fetchPolicy: 'network-only',
    skip: true,
});

Then on refetch pass variable:

const onChange = () => {
    refetch({ id: '1' })
};

Dismount and mount component again and refetch with different variable value:

const onChange = () => {
    refetch({ id: '2' })
};

Result: Queries both for id '2' and '1' will be resolved.

Note: with every additional dismount and mount count of queries resolved will increase.

Versions

System:
    OS: macOS 10.15.7
Binaries:
    Node: 11.3.0
    npm: 6.10.1
Browsers:
    Chrome: 86.0.4240.111
npmPackages:
    @apollo/client: ^3.2.5 => 3.2.5 

[benjamn]

Thanks for the reproduction @kestas-devbridge! We'll look into this and have an answer for you soon.

[benjamn]

OK, it looks like your reproduction can be fixed by updating to at least @apollo/client@3.3.0-beta.15, presumably thanks to #7205. Give npm i @apollo/client@beta a try if you want to see for yourself.

However, I am concerned that #7205 only works here because you happen to be passing skip: true to useQuery. If you weren't passing skip: true, I believe this.currentObservable.tearDownQuery would not be called, so this bug would keep happening. Hopefully we can generalize #7205 to be less skip-specific.

[kestutis-buivydas]

Thanks for looking at this @benjamn ! Works as expected in @apollo/client@3.3.0-beta.15.

[hwillson]

Sounds like this has been solved. Thanks!