useLazyQuery ignores fetchPolicy

[Deekor]

Intended outcome:
getMe should never make a network call.

Actual outcome:
getMe always makes a network call.

How to reproduce the issue:

  const [getMe, { loading, error, data: meData }] = useLazyQuery<MeQuery>(MeDocument, {fetchPolicy: "cache-only"});

  useEffect(() => {
    getAccessTokenSilently().then((token) => {
      getMe({context: { headers: { authorization: `Bearer ${token}` }}} )
    })
  }, [])

Versions

  System:
    OS: macOS 10.15.4
  Binaries:
    Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
    Yarn: 1.22.17 - ~/Repos/react/node_modules/.bin/yarn
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.1/bin/npm
  Browsers:
    Chrome: 97.0.4692.99
    Safari: 13.1
  npmPackages:
    @apollo/client: ^3.5.8 => 3.5.8
    apollo: ^2.33.9 => 2.33.9

[emmenko]

I am encountering the same issue when upgrading to 3.5.8. The fetchPolicy: 'cache-only' seems to be ignored.

[gax97]

Experiencing this as well. fetchPolicy: 'cache-first' gets ignored.

[brainkim]

🙇‍♂️🙇‍♂️🙇‍♂️ Sorry about this! I am continuously trying to fix the useLazyQuery() hook in the 3.5 branch and part of the minor changes was to reroute the hook through the refetch() method, which I’m now realizing has some special-case exceptions for different fetch policies for some insane reasons.

My reasoning at the time was that the hook’s use-case was very similar to refetching, but I guess people are using useLazyQuery() with different fetch policies. @emmenko @gax97 I am genuinely curious why you would use useLazyQuery() with a cache-only fetch policy. What’s the use-case?

[Deekor]

I'm not using with cache-only, was just using it as an easy way to reproduce the issue. I'm noticing that no fetch policy is working. I'd like to use cache-first and that wasn't working either

[Camsteack]

Hi, it is a big problem for us as we use useLazyQuery to load data on render if the data is already in the cache, but only fetch it if someones opens a sub panel and it's not already in the cache. We would then have something like this

  const [getStories, {loading, data: {stories = []} = {}}] = useLazyQuery(GET_STORIES_FOR_FEATURE, {
    variables: {connectorId: connectorId, epicId: epicId},
    fetchPolicy: 'cache-only',
    nextFetchPolicy: 'cache-first',
    context: {clientName: 'rest'},
  });

  useEffect(() => {
    getStories();
  }, []);

And subsequent call getStories if someone opens the panel. If I use useQuery and refetch the call will be made every time someones click on the panel regardless of the cached data.

I hope it makes sense.

Cheers.

[Camsteack]

But even in previous versions this was not working as expected. The first call was respecting the fetchPolicy but all the subsequent calls were calling the server.

[emmenko]

I am genuinely curious why you would use useLazyQuery() with a cache-only fetch policy. What’s the use-case?

@brainkim Hi, I have a special use case where in development the data should not be fetched remotely as it's loaded from a configuration file. In this case we manually write the data into the Apollo cache and then trigger the lazy query with fetchPolicy: 'cache-only'.

In production mode, the data is fetched remotely, so we use fetchPolicy: 'cache-first'.

You can take a look at the implementation here: https://github.com/commercetools/merchant-center-application-kit/blob/7490740e352a8ae27427e357f02a38a1db993936/packages/application-shell/src/hooks/use-applications-menu/use-applications-menu.ts#L156-L201

[colinrobertbrooks]

Stumbled on this today. Potentially related to #9209.

[vincentvella]

Also seeing this, it appears to be appending the lazy query to the list of active queries prior to calling it as well

[Deekor]

Do we have an estimate on when this might be fixed?

[pontusab]

Also if you use useLazyQuery and trigger it twice, it will return network status refetch.

[Deekor]

@brainkim any ETA by chance?

[eettaa]

+1 for a fix here (or even a comment in the documentation)... I just spent hours trying to debug a seeming "cache miss" here only to discover this bug.

[benjamn]

@Deekor @emmenko @eettaa @Camsteack @colinrobertbrooks @vincentvella @pontusab Can you try the latest v3.6 beta by running npm i @apollo/client@beta when you have a chance (currently 3.6.0-beta.11)? I believe PR #9564 will help here (assuming this issue is similar to #9375). Thanks for your patience!

[colinrobertbrooks]

@benjamn Can confirm I'm no longer seeing cache-first queries refetched with 3.6.0-beta.11. Thank you for the fix! 🎉

[luco]

Still seeing this on last version with fetchPolicy no-cache