useQuery fails to return cached data when variables are changed

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

[zicodeng]

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

[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