Behavior change: in v3.5+, useQuery with notifyOnNetworkStatusChange always returns partial data when variables are changed

[bengotow]

Intended outcome:

Consider the following scenario in a fictional fruit encyclopedia app:

• User views a summary of Fruit 1, populating cache with a few attributes

• User views full details of Fruit 2, and the details screen makes this query:

  const { loading, error, data } = useQuery(SCREEN_2_QUERY, {
    notifyOnNetworkStatusChange: true,
    variables: { id: fruitId },
  });

• User clicks a shortcut to full details of Fruit 1. The component is not re-mounted. fruitId is changed in the snippet above.

The intended outcome is for the useQuery hook to either return loading=true or data that matches the graphql query response schema. Prior to Apollo Client 3.5, this was the case and the demo app below did not crash.

Actual outcome:

Some properties of Fruit 1 are present in the cache. A basic useQuery hook (without notifyOnNetworkStatusChange: true) will update twice and this is expected:

• loading:true, data: undefined
• loading: false and fruit data.

If you enable notifyOnNetworkStatusChange: true, the behavior changes - The useQuery hook emits one extra time for the network status change, but ALSO includes a partial data object in the second update. This is a regression from v3.3.16, which continued returning undefined in the second update.

I believe the old behavior - returning undefined while loading in both the first and second updates - is correct and preferable because I did not pass returnPartialData: true.

• loading:true, data: undefined
• loading: true and partial cached fruit data.
• loading: false and full fruit data.

It's possible to workaround this one by ignoring data if loading = true, but that is undesirable because if FULL cached data is present, we don't need to wait for the network request and could display data.

How to reproduce the issue:

The error is reproducible in this basic CRA + Typescript example:
https://github.com/bengotow/apollo-client-issues/blob/half-cached-response/src/AppHalfCachedObjectBug.tsx#L51

Versions

  System:
    OS: macOS 12.1
  Binaries:
    Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 8.1.0 - ~/.nvm/versions/node/v16.13.0/bin/npm
  Browsers:
    Chrome: 97.0.4692.99
    Edge: 97.0.1072.62
    Firefox: 95.0.2
    Safari: 15.2
  npmPackages:
    @apollo/client: 3.5.7 => 3.5.7 

[maarekj]

I have the same error in 3.7.7

[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.