useQuery and/or useLazyQuery with a fetchPolicy of 'cache-and-network' gets called twice.

[christo8989]

Intended outcome:
A single request is made when using 'network-and-cache' for the first time.

Actual outcome:
Two requests are made for the query with 'cache-and-network' when multiple useQuery(s) and/or useLazyQuery(s) are present. It also seems to be related to placing the 'cache-and-network' query below the other query.

How to reproduce the issue:
I have a unit test that uses MockProvider and it's throwing Error: No more mocked responses for the query.
This mock doesn't break in the unit test but you can see it when you look at the console and refresh the (inner) browser/app.
The loading state on query FOO_GQL goes from true -> false -> true.

https://codesandbox.io/s/sharp-darkness-dzy0b

Versions

System:
OS: macOS 10.15.6
Binaries:
Node: 11.15.0 - ~/.nvm/versions/node/v11.15.0/bin/node
Yarn: 1.22.4 - /usr/local/bin/yarn
npm: 6.7.0 - ~/.nvm/versions/node/v11.15.0/bin/npm
Browsers:
Chrome: 86.0.4240.198
Edge: 86.0.622.69
Firefox: 82.0.2
Safari: 14.0
npmPackages:
@apollo/client: ^3.2.7 => 3.2.7
apollo-link-tracer: ^1.0.26 => 1.0.26
apollo-upload-client: ^14.1.3 => 14.1.3

[jgan42]

Hi, I had a similar issue and this can worth a try :

const bar = useQuery(BAR_GQL);
  const foo = useQuery(FOO_GQL, {
    fetchPolicy: "cache-and-network",
    nextFetchPolicy: "cache-first",
  });

I couldn't find any documentation about it but by testing it, it works as exepected. If you rerender the component, it will make a server call for "foo" and not "bar"

[benjamn]

@christo8989 This should be fixed in @apollo/[email protected] (published earlier today), if you want to give it a try.

[christo8989]

@benjamn
I updated the sandbox and it worked beautifully. Thank you very much for the quick response. 👍

[jcreighton]

Looks like we're good to close this issue as it was resolved in @apollo/[email protected].