useQuery fails to return cached data when variables are changed

[zicodeng]

Consider the following queries

useQuery(POSTS, {
  variables: {
    offset: currPage * 20
  }
})

where currPage is a React local state variable. It will get updated when user paginates

Intended outcome:

When currPage=1, new data is fetched, when currPage=2, new data is fetched... When user paginates to the previous page (page 1), because query with currPage=1 is already fetched, it should just read the cache

Actual outcome:

When user paginates from page 1 to page 2, new data for page 2 is fetched, however, when user paginates back to page 1, cache is not read, data is still displayed for page 2

How to reproduce the issue:

Versions

@apollo/client: ^3.0.0-beta.14
react-apollo: ^3.1.3

[devdudeio]

what is your fetchPolicy?

[zicodeng]

@RLech I didn't change it, so the default is used, which is cache-first I believe

[zachasme]

We're having the same problem. As a temporary workaround we're using no-cache fetchPolicy on queries affected by this.

EDIT: We had to useno-cache not network-only as first stated.

[zicodeng]

I am just surprised no one from Apollo team has responded to this issue. It seems to be a big bug to me :(

[jsmircic]

Not entirely sure, but I think this is by design. Every time you change a variables object in the useQuery, the query will be executed again. If you need to preserve the cached query data and run the same query with new variables you should use "fetchMore" function and manually update the cache with the result.

[zicodeng]

@jsmircic I don't think this is by design. First, it works on previous versions. Second, If a query with a given variable has already been fired, data should be cached so that when this query is fired again, no network request should be needed, data should be returned from cache.

fetchMore is used for fetching more data (new variables). However, this issue is related to read cached data, not fetch more data

[AnteWall]

We are also experiencing this issue with 3.0.0-beta.16
Using a query that get data based on tab value works the first time but switching back it will keep the wrong cached value.

Example that fail:

POSTS = gql`
query PostQuery($id: ID, $tabValue: number) {
  post(id: $id) {
    authors(filter: $tabValue) {
      id
    }
  }
}
`

useQuery(POSTS, {
  variables: {
    id: 1,
    tabValue: tabIndex
  }
})

[zachasme]

Here is a simple codesandbox reproducing the issue.

Notes:

• The actual request made to the graphql endpoint has the correct variables and response.
• Using fetchPolicy: no-cache avoids the issue.
• Using network-only does not, however, even though none of them is supposed to read from the cache (it should only differ from no-cache in that it writes to the cache).

[cdock1029]

@benjamn
@hwillson

The problem doesn't exist with version 3.0.0-beta.7 but was introduced in 3.0.0-beta.8

Hopefully this is not intended behavior, as simply updating the variables in the useQuery call allows for declaratively representing data dependencies, consistent with React principles, whereas forcing to use fetchMore and manually update the cache is very imperative and tedious, and defeats purpose of having the library manage these things for you.

[cbergmiller]

The docs link to an example that relies on triggering a query execution by changing the query variables:
https://www.apollographql.com/docs/react/v3.0-beta/data/queries/#caching-query-results
https://codesandbox.io/s/n3jykqpxwm
Also, fetchMore is designed to allow to merge query result when variables change. A query with changed variables is stored as new query in the cache, which may not be what you want for pagination.

So i also think this is a bug. It's a bit strange that this issue it not marked a bug (or as confirmed).

[druvisc]

Facing the same issue. Even manually calling refetch() doesn't work.
The only workaround is to avoid the cache, setting the fetchPolicy to network-only.

EDIT: Is it really only introduced recently? I've spent hours looking into this now and it seems like a lot of people are facing this issue, but just phrasing it differently ("onCompleted() / refetch() / setVariables not called", setting notifyOnNetworkStatusChange: true).

apollographql/react-apollo#2177
apollographql/react-apollo#2202

[Parziphal]

Updating to @apollo/[email protected] as stated in #5782 solved this problem for me.

[zicodeng]

Verified that version 3.0.0-beta.24 solved the bug, closing this issue

[m1m6]

After migrating to3.0.0-beta.24 the issue still exists

[cristiandley]

#6017

[khomyakov42]

After migrating to3.0.0-beta.43 the issue still exists

[zachasme]

I've forked my previous codesandbox, updated to 3.0.0-beta.43 and I cannot reproduce the issue (but downgrading to an earlier version like 3.0.0-beta.16 still reproduces the issue).

[multivoltage]

Hi guys. I have the same issued. But I think there is some magic under the hood. In my scenario useQuery() return an array inside the data object. IN my scenario my data is composed by 8 element. I can put some filters for backend. But, each field "user_id" inside those array elements has the same value. For some reason when backend return me with new data, apollo know that new result are the same as before (in this case an array of 8 elements), in fact an useEffect with data as dependencies in not called. And this is good.
Do someone see the same behavior?