Apollo-client: Cache-and-network should not make a network call when watched cached items change via subscription/mutation

Created on 18 May 2020  路  3Comments  路  Source: apollographql/apollo-client

This is new behavior as of beta .46 and has prevented us from moving past .45 (most likely a result of https://github.com/apollographql/apollo-client/pull/6221).

Intended outcome:
A query with fetchPolicy: cache-and-network should not make a network call when a cached item that it's watching changes. It should just re-render containing the data from the cache.

Actual outcome:
When an individual cached item changes (via subscription or mutation), if a query with fetchPolicy: cache-and-network contains that cached item, the query is making a network call to refetch.

How to reproduce the issue:
As instructed, I've created a full reproduction here: https://github.com/jebonfig/react-apollo-error-template

Notes
cache-and-network is an important fetchPolicy in our App, as it gives us the benefit of quick renders from cache on subsequent component mounts, and also immediately follows up with the server for consistency.

A common example use case is:

  • a cache-and-network list of cars query
  • a cache-only query which pulls an individual car from the cars query data via typePolicy

    • quick side note here is I've also noticed new warnings: "Missing cache result fields: person". If I've specified a cache-only fetch policy on the query, and a type policy to pull it from the list, then my item not being in the cache is a perfectly valid scenario. I'd argue a warning here is unnecessary noise

  • a useSubscription watching the list of cars

When we receive a subscription update for an individual car, the car in the cache is updated with the new data as expected. However, the new, undesired behavior is that the list query now unnecessarily refetches from the network instead of just re-rendering based on the cache updates that have already been made.

So you might say, this is intended based on the .46 changes mentioned above. If that's the case, then how can I retain the initial onComponentMount query behavior of cache-and-network, _AND_ the updating behavior when responding to mutations and subscriptions of cache-first?
In other words, I want my query to be cache-and-network on initial component mount, but cache-first when the cached data my query is watching has been changed by a mutation or subscription.

Versions

  System:
    OS: macOS High Sierra 10.13.6
  Binaries:
    Node: 11.2.0 - /usr/local/bin/node
    npm: 6.4.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 81.0.4044.138
    Safari: 13.1
  npmPackages:
    @apollo/client: 3.0.0-beta.48 => 3.0.0-beta.48 
    @apollo/link-error: ^2.0.0-beta.3 => 2.0.0-beta.3 
    @apollo/link-ws: ^2.0.0-beta.3 => 2.0.0-beta.3 

Most helpful comment

@jebonfig Can you try @apollo/[email protected], which includes #6353?

All 3 comments

The problem also occurs with the "network-only" fetch policy. Whenever the cache is updated (either manually or by a mutation), the query is refetched.

@jebonfig Can you try @apollo/[email protected], which includes #6353?

@jebonfig Can you try @apollo/[email protected], which includes #6353?

thanks a lot @benjamn - this is fixed on .52 馃帀

Was this page helpful?
0 / 5 - 0 ratings