nextFetchPolicy should reset to fetchPolicy when variables changes

[Titozzz]

Hello,

Because of the way apollo-client 3 is designed, it will make a lot of extra request over the network if you don't set nextFetchPolicy to cache-first.
For example:
Query some data -> Mutate it -> Query will rerun if nextFetchPolicy isn't specified.
Let's now imagine a more complex usecase where you can change your query variables (for example pagination).

Query page 1 : Network fetches page 1 because of 'cache and network'
Query page 2 : Network fetches page 2 because of 'cache first' ( but cache is empty )

Let's now say you come back later, data has changed and you use cache persist but your cached data is obsolete.

Query page 1 : First displays outdated data, but Network refetches page 1 because of 'cache and network'
Query page 2 : Displays outdated data and doesn't fetch network because of 'cache-first'

So I believe that when the fetch policy should be bound to the current variables to avoid theses issues

Intended outcome:
I should be able to use nextFetchPolicy set to cache-first to avoid extra network calls from AC3

Actual outcome:
Setting nextFetchPolicy to cache-first makes stale data be returned if you update variables.

How to reproduce the issue:
See intro 😄

Versions
tested on latest at this time: 3.3.4

@benjamn This is 100% related to that thread but I felt it didn't belong there so I created that issue.
#6677

I'm available to help if you need anything, but if you can point me in the right direction that would be great!

Thanks 💯

[martinjlowm]

We're experiencing the same - I was looking into the issue and it seems despite the change in variables, the cache is hit and previous data is served. Perhaps resetting fetchPolicy is a simple way of fixing it - dunno if it's the right way.

[blasterpistol]

I have been using this wrapper since migrating from v2 to v3. It would be nice to give up this dirty trick.

import { useQuery as _useQuery } from '@apollo/client'
import isEqual from 'fast-deep-equal'
import { useRef } from 'react'

export function useQuery(query, options) {
  // make a new request if variables have been changed
  // it's not the same as cache-and-network
  // since cache-and-network refetches initial request after writeQuery
  // all combinations of fetchPolicy and nextFetchPolicy also not work

  const opt = useRef(null)

  const fetchPolicy =
    options?.fetchPolicy ||
    (isEqual(opt.current, options) // check if variables have changed, if so use cache-and-network
      ? 'cache-first' 
      : 'cache-and-network')

  opt.current = options

  return _useQuery(query, { ...options, fetchPolicy })
}

[Titozzz]

@blasterpistol Exactly what I'm trying to dodge :) For now I'd rather spam our back end a bit more cause we can handle it.

[benjamn]

@Titozzz @blasterpistol I'm optimistic @apollo/[email protected] may solve this issue once and for all, thanks to #8465. Please give it a try when you have the chance!

[adrienharnay]

Hi @benjamn, I just tried @apollo/[email protected] with the issue @Titozzz posted, and it is gone!

Thanks for the fix 🙏

[benjamn]

Thanks for the update @adrienharnay!

Closing now, but happy to reopen if the problem persists/reappears for anyone.