Apollo-client: `useQuery` resets `data` to undefined after updating variables

Created on 20 Aug 2020  路  6Comments  路  Source: apollographql/apollo-client

Hi
Prior to v3, when I use useQuery (i.e. from @apollo/react-hooks v3.1.5), the data is set to undefined while loading the first query (and that makes sense), but whenever I update the query, like updating its variables, the data remains unchanged while loading until it sets to the new value when the query finishes.
However, after updating to @apollo/client v3 (or @apollo/react-hooks v4), the data resets to undefined whenever the query reloads.

That became a problem because I'd like to not rely on "Initial Loading" states for the data after an initial value is already present. I'd like to remain using the data until it updates.

I didn't see any mention of this change in the migration guide, so I'm not sure if this is a bug or an intentional change...

Intended outcome:
Considering the folowing code:

const { loading, data } = useQuery(QUERY, {
    variables: { var }
  });

I expected that, whenever I update var, the data result remained the same value as the previous query, until it changes to the new value when loading finishes.

Actual outcome:
Since v3, when I change var, the data result resets to undefined while loading is true, then updates to the new value when loading finishes.

How to reproduce the issue:
Here's a sandbox using @apollo/react-hooks v3.1.5
https://codesandbox.io/s/zen-bose-sgymg?file=/src/App.js:319-401

And here's the same code using @apollo/client v3.1.3
https://codesandbox.io/s/falling-fog-45kfd?file=/src/App.js

Notice that in the previous version, the data value never returned to undefined after the first query. While in the new version, it returns to undefined, making it always behave like a "First query" in the app.

Note how this can cause different loading behaviour in the app:
How it was
use-query-loading-1

How it is now
use-query-loading-2

Is this really a bug or is it an intentional change? If it is intentional, how could I keep the previous data value without relying on an additional state?

Thanks!

Most helpful comment

I'm happy to share that we finally have an implementation of result.previousData (#7082), and you can test it now using @apollo/[email protected]. We recommend the idiom result.data ?? result.previousData to obtain the most recent useful data (if you're comfortable with it possibly being stale).

All 6 comments

Yes, this is an intentional change. See https://github.com/apollographql/apollo-client/pull/6566

Got it. Thanks, @dylanwulf !

see also https://github.com/apollographql/apollo-client/issues/6603

this was a last-minute breaking change. The above issue has a lot of discussion and workarounds. A fix was announced by @benjamn , but is not yet released.

Personally I would wait upgrading to version 3 until this fixed and not implementing workarounds.

I'm also affected by this breaking change and this is major unwanted change. As it was previously mentioned, in UI you usually want to keep previous state until new data is loaded instead of having intermediate empty state that shows blank page and global spinner.

I appreciate your response, guys. I hadn't found https://github.com/apollographql/apollo-client/pull/6566 and https://github.com/apollographql/apollo-client/issues/6603 before, those were enlightening.
I believe this issue can be closed as the existing discussions are already ongoing with more information.

I'm happy to share that we finally have an implementation of result.previousData (#7082), and you can test it now using @apollo/[email protected]. We recommend the idiom result.data ?? result.previousData to obtain the most recent useful data (if you're comfortable with it possibly being stale).

Was this page helpful?
0 / 5 - 0 ratings