Apollo-client: When changing variables on a query, old data is still returned until loading completes

[clayne11]

Intended outcome:
When I change the variables on a query, the loading state flips to true, and if there is no data in the cache associated with those variables, data is returned as undefined.

Actual outcome:
When I change the variables on a query, the loading state flips to true, but the data associated with the old variables is still returned from render until loading completes, at which point the new data is returned.

How to reproduce the issue:

1. Pass variables to a Query.
2. Update those variables.
3. Observe the results.

Versions
System:
OS: macOS Sierra 10.12.6
Binaries:
Node: 8.9.1 - ~/.nvm/versions/node/v8.9.1/bin/node
Yarn: 1.7.0 - /usr/local/bin/yarn
npm: 5.5.1 - ~/.nvm/versions/node/v8.9.1/bin/npm
Browsers:
Chrome: 66.0.3359.181
Firefox: 58.0.1
Safari: 11.1.1

This definitely seems like a bug to me. If the variables change then the data returned from the cache for the combination of the variables + the query should be empty until there are results from the network.

[deftomat]

I'm observing the same behaviour.

Looks like a bug to me too... We just cannot show the old data when filter/variable has changed.

[chilltemp]

I actually like this behavior. I blur the old data while loading the new. It prevents my auto-resizing components from jumping around while loading. However, I think this should be opt-in, or at least very clearly documented.

[clayne11]

@chilltemp it's definitely a bug. The behavior you're describing can be achieved using React state and lifecycle methods. The behavior I describe, however, is impossible to achieve without this fix since there's no way to know that the data you are receiving isn't related to the variables that are currently being passed into the query.

This is a pretty big issue IMO.

[sabirahmed121]

+1

[tronin]

+1

[tgritter]

+1

[tronin]

Hi, guys, I fixed it! have you check your query and if you have duplicated queries in your project you will have cached data in Apollo . Apollo thinkins that you try to refetch your latest query instead to make the new one.

Do not use duplicated queries in separate components.

[deftomat]

@tronin The problem is that queries looks the same but variables are different.

[shanidar]

Hi, I have the same issue, same query with different variable returns old data from cache

[saschb2b]

For me changing the fetch-policy worked. But now I have no cache

fetchPolicy="network-only"

to

fetchPolicy="no-cache"

Update: After inspecting the error from apollo I noticed a missing id prop warning. That lead me to https://github.com/apollographql/apollo-client/issues/2510
After adding an id to my query everything worked as intended and I could revert the cache workaround.

Example: Change

query SoftwareByLocation($id: ID!) {
  location(id: $id) {
    software {
      id
      name
      version
      publisher
      devices {
        id
      }
    }
  }
}

to

query SoftwareByLocation($id: ID!) {
  location(id: $id) {
    id
    software {
      id
      name
      version
      publisher
      devices {
        id
      }
    }
  }
}

[ElForastero]

I like this behavior. It's very useful for avoiding content jumping or showing a white/full of tombstones and placeholders screen during navigation between different pages.

1. I think we need more control over this behavior.
2. Currently, it doesn't work across different queries, so it's a little inconsistent. If we have two identical queries somewhere on the page, the first will return old data during loading, and the second will get undefined.

[tafelito]

is this an issue or is intended by design? Because this is still happening in apollo v3

BTW this only happens in the top level fields, if you change any filter on any subfield, then the subfields are undefined when loading

So having a query

users {
  id
  name
  posts (where: { date: {gt: $date} }) {
    id
    message
  }
}

any time the date changes, then the posts will be undefined when loading

Note: this only happens having returnPartialData: true

[faq885]

still having this error with client.query method in 2020 :( i had to avoid using cache