cache-and-network: No way to determine if the network request has completed

[srmagura]

Intended outcome:

With code like this:

const { data } = useQuery(Feed_GetEventsDocument, {
  variables: myVariables,
  fetchPolicy: 'cache-and-network',
  nextFetchPolicy: 'cache-first',
  onCompleted: data => {
    console.log('onCompleted got data:', data);
  }
});

There should be a way to determine if the network request has completed. The useQuery API does not seem to accept any callbacks or return any values that would let you determine this.

In our use case, the cache may only contain partial data, whereas the request to the GraphQL server returns the complete data. Our application needs to know whether it has the partial data or the complete data.

In @apollo/client 3.6.9, onCompleted is executed regardless of whether the data was read from the cache or because the network request completed. This appears to be a breaking change from @apollo/client 3.4.5, where onCompleted only executed when the network request completed. (Let me emphasize that it appears to be a breaking change — upgrading from 3.4.5 to 3.6.9 has broken something in our application that was relying on this behavior of onCompleted.)

Actual outcome: The useQuery API does not seem to accept any callbacks or return any values that would let you determine if the network request has completed.

How to reproduce the issue: I think this is a design issue with the useQuery API, so it's not possible to provide a minimal reproduction. If you think this is a bug (e.g. onCompleted is not supposed to be called when the data is read from the cache), I can submit a minimal repro of that behavior.

Versions

  System:
    OS: macOS 12.5.1
  Binaries:
    Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
    Yarn: 3.2.2 - ~/.nvm/versions/node/v16.16.0/bin/yarn
    npm: 8.16.0 - ~/.nvm/versions/node/v16.16.0/bin/npm
  Browsers:
    Chrome: 104.0.5112.101
    Firefox: 103.0.2
    Safari: 15.6.1

[alessbell]

Thanks for the detailed description, @srmagura!

#10229 is open with the fix, I'll update this issue again when it's merged and released 🙇‍♀️

[alessbell]

The fix is now available in the current 3.8 alpha release which can be installed via npm i @apollo/client@alpha.

[alessbell]

Hi all - I'm going to close this issue out since this is fixed in a prerelease. Feel free to install the latest 3.8 alpha with the command above. Thanks!

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
For general questions, we recommend using StackOverflow or our discord server.