Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

useQuery returns incorrect data on variable change when using cache

See original GitHub issue

When the variable of a query changes, and the result for the new variable value is cached (and used, according to the fetchPolicy), there is an iteration in which data from useQuery is incorrect. Instead of showing the cached value, or even undefined, the value of data is the previous result of the query, corresponding to the former variable value.

This issue is similar to issue #6300, and I adapted @vishwam sandbox so I can show this issue. Link to the sandbox.

Intended outcome: Since I’m using cache-first and the result of my queries have been cached, when the variable change, I expect data to contain the cached value, or at least undefined while useQuery hasn’t resolved the cache.

Actual outcome: data contains the previous data value, with results corresponding with the former variable value.

How to reproduce the issue: I found out that useQuery works as inteded from version 3.0.0 (and maybe lower, I haven’t checked) up to version 3.5.0-beta.5. Versions 3.5.0-beta.6 and above have the unintended outcome.

Versions @apollo/client 3.5.0-beta.6

Issue Analytics

State:
Created a year ago
Reactions:4
Comments:5 (2 by maintainers)

Top GitHub Comments

2reactions

ericbeijercommented, Jul 11, 2022

@gustavoem, yes, the sandbox works as expected since 3.6.0-rc.0. I’ll investigate why my setup doesn’t work.

EDIT: @jpvajda & @gustavoem, turned out some wrong keyArgs were configured in my setup which resulted in different variables matching on the same cached query. So, for me the issue is solved by updating apollo-client and setting the correct keyArgs.

1reaction

gustavoemcommented, Jul 8, 2022

The sandbox seem to be working as expected with 3.6.8

Top Results From Across the Web

Queries - Apollo GraphQL Docs

If all data is available locally, useQuery returns that data and doesn't query your GraphQL server. This cache-first policy is Apollo Client's default...

useQuery() - villus

The useQuery function returns the following properties and functions: ... with variables const { data, error } = useQuery({ query: FindTodo, variables: ...

Apollo client useQuery fails to return cached data when ...

This would indeed seem to be a bug, unless you're setting a different fetch policy globally through the client instance. – Daniel Rearden....

React Apollo: Understanding Fetch Policy with useQuery

I changed the fetch policy in the project to no-cache because I thought that ... your GraphQL server and returns that data after...

Fetching data with React - GQty

It's basically a function that is called right before the useQuery returns, allowing your component to either Suspend immediately or add a conditional...