useLazyQuery doesn't work with cache-and-network fetch policy

[LauraBeatris]

Intended outcome:
After the lazy query be triggered, it should behave correctly according to the fetch policy chosen

Actual outcome:
The fetch policy cache-and-network isn't working when using lazy queries. It should look on the server and update the cache with the most recent data.

How to reproduce the issue:
Execute useLazyQuery hook using fetch-policy as cache-and-network on @apollo/client v3.1.3.

Also, I'm setting cache-and-network as the default fetch policy for all queries. Refer to the config:

const apolloClient = new ApolloClient({
  cache,
  link: ApolloLink.from([
    sentryErrorLink,
    authenticatedLink,
  ]),
  defaultOptions: {
    watchQuery: {
      fetchPolicy: "cache-and-network",
    },
  },
});

Versions

  System:
    OS: macOS 10.15.6
  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: 86.0.4240.80
    Safari: 14.0
  npmPackages:
    @apollo/client: 3.1.3 => 3.1.3 
    apollo-sentry-helper: ^2.0.3 => 2.0.3 
    apollo-utilities: ^1.3.4 => 1.3.4 

[pedro-lb]

Happening here too

[LauraBeatris]

The useLazyQuery works if passing the option directly:

useLazyQuery({ fetchPolicy: "cache-and-network" })

But as mentioned on the docs, after triggered it should behave like a useQuery, so it should also use the fetch policy defined on the client, right?

 defaultOptions: {
    watchQuery: {
      fetchPolicy: "cache-and-network",
    },
  },

[sajadghawami]

i can confirm that setting fetchPolicy: 'network-only', will make it work!

[sannge]

Happening here too. Any work around?

[LaurenceM10]

Same issue here.

[vatech-minsik]

Not working also with fetchPolicy: 'no-cache'

[RogierdeRuijter]

Same issue, using cache-and-network doesn't behave like the docs say it does

[fauzanss]

i can confirm that setting fetchPolicy: 'network-only', will make it work!

this is work for me

const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache({}),
  defaultOptions: {
    watchQuery: {
      fetchPolicy: "network-only",
    },
  }
});

[alexghi]

it seems that the watchQuery key is the way where configs for lazy queries should go.
so you can try this, and it will all be fine:

const client = new ApolloClient({
    link: from([retryLink, errorLink, httpLink]),
    defaultOptions: {
	    query: {
		    errorPolicy: 'all',
		    // used for all queries
		    fetchPolicy: 'cache-and-network'
	    },
	    watchQuery: {
		    // this config applies on lazy queries as well
		    fetchPolicy: 'cache-and-network'
	    }
    }
  })

[zirho]

I have similar issue.
I am trying to set 'cache-and-network' for lazy query and getting null from response for the second request.
I've tried to set client config

    defaultOptions: {
      watchQuery: {
        fetchPolicy: 'cache-and-network',
      },
    },

didn't work for me.

When I switch to regular query, it works just fine with cache.
I am using "apollo/client": "3.7.1",

Thanks

[sm1thana]

Hi team,
thanks for the great tool!

But I'm facing this issue too.

I tried 3.5.0 version and the latest 3.10.0.
I tried to set network-only and no-cache policy to the useLazyQuery directly.
I tried to set cache-and-network to watchQuery at defaultOptions.

Nothing helped me.

Will try to change useLazyQuery to a common useQuery, or try to remove cached response.

[NiccoloCase]

I have the same problem with the latest version of Apollo Client!

[NiccoloCase]

For me, I noticed that using cache-and-network the server is not requested. For some reasons, adding a random @Local field for the type retuned by the server forces the request to the server. but I think that this is a workaround that shouldn't be trusted. So, anyone have a similar issue or has solved the issue? Thanks

[phryneas]

@NiccoloCase could you please create a reproduction where this is not happening so we can investigate it?

[NiccoloCase]

@phryneas Hi, thanks for the reply! I spent the past couple of days trying to replicate the issue in a fresh React (web, for simplicity) project using the same API, but I wasn’t able to reproduce it. I don’t think if the fact that it's a React Native project and not a web project can influence test test, but I think it might be due to a unique combination of cache policies along with the cache persistor. As a temporary workaround, I’ve set the nextFetchPolicy to cache-and-network for the lazyQuery, but I’ll continue investigating.