network-only fetchPolicy incorrectly returning partial cached data when notifyOnNetworkStatusChange is true

[mingjuitsai]

Intended outcome:

1. Component A asks for people named John, retrieving the fields id and name. The results are stored in the cache.

useQuery({ query people(name: "john") { id, name } })

2. Component B asks for people named Sarah, retrieving the fields id and age. It is a network-only request so does not read from the cache. Note notifyOnNetworkStatusChange is set to true.

useQuery(
  { query people(name: "sarah") { id, age } }, 
  { fetchPolicy: "network-only", notifyOnNetworkStatusChange: true }
)

3. Component B re-renders with a different name - John. It is still a network-only request. It is expected that the query goes into a loading state and then returns the fields id and age, the same as step 2.

useQuery(
  { query people(name: "john") { id, age } }, 
  { fetchPolicy: "network-only", notifyOnNetworkStatusChange: true }
)

Actual outcome:

Step 3 does not work as expected. The cached result for step 1 is returned instantly, instead of loading the latest data. This is unexpected because

• the cached data does not match what we want - we asked for id/age, we get id/name from the cache. the data is partial. we don't have partial results enabled.
• the documentation on network-only (https://www.apollographql.com/docs/react/data/queries/#network-only) states that it shouldn't return things from the cache (whether partial or not).

How to reproduce the issue:

reproduction using error template: https://github.com/mingjuitsai/react-apollo-error-template

• npm install; npm start
• land on page 1
• click on page 2 button
• click 'name includes John' button
• renders cached partial data first

Versions

 System:
    OS: macOS 11.6
  Binaries:
    Node: 16.4.2 - ~/.nvm/versions/node/v16.4.2/bin/node
    Yarn: 1.22.11 - /usr/local/bin/yarn
    npm: 8.2.0 - ~/.nvm/versions/node/v16.4.2/bin/npm
  Browsers:
    Chrome: 96.0.4664.93
    Safari: 15.1
  npmPackages:
    @apollo/client: ^3.5.5 => 3.5.5

Extra notes

While looking into this problem we found a part of the code that seemed to be responsible for this change in behaviour when using notifyOnNetworkStatusChange:

apollo-client/src/core/QueryManager.ts

Lines 1436 to 1442 in b214dd1

	case "network-only":
	if (shouldNotify) {
	return [
	resultsFromCache(readCache()),
	resultsFromLink(),
	];
	}

case "network-only":
      if (shouldNotify) {
        return [
          resultsFromCache(readCache()),
          resultsFromLink(),
        ];
      }

If network-only and shouldNotify is true (set when using notifyOnNetworkStatusChange), the (potentially partial) cached results are returned.

This code was introduced in #7761.

It looks like there have been on comments on this PR raising a similar problem: #7761 (comment)

Also seems to be related to #6941.

Thanks.

[mingjuitsai]

We also have noticed that when fetchPolicy is set to cached-and-network, despite a query is requesting new fields, Apollo returns cached partial data ( received from a similar query made previously ). This causes missing fields getting used incorrectly and cause TypeError, result in crashes in app.

I have made a branch to demonstrate this as well
https://github.com/mingjuitsai/react-apollo-error-template/tree/cache-and-network

Steps to reproduce

• land on page 1
• click on page 2
• click on 'name includes John' button
• app crashes with TypeError