Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

useQuery resets data to undefined after updating variables #6866

Closed
TCezarRod opened this issue Aug 20, 2020 · 6 comments
Closed

useQuery resets data to undefined after updating variables #6866

TCezarRod opened this issue Aug 20, 2020 · 6 comments

Comments

@TCezarRod
Copy link

TCezarRod commented Aug 20, 2020

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!

@dylanwulf
Copy link
Contributor

Yes, this is an intentional change. See #6566

@TCezarRod
Copy link
Author

Got it. Thanks, @dylanwulf !

@macrozone
Copy link

see also #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.

@prcdpr
Copy link

prcdpr commented Aug 21, 2020

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.

@TCezarRod
Copy link
Author

I appreciate your response, guys. I hadn't found #6566 and #6603 before, those were enlightening.
I believe this issue can be closed as the existing discussions are already ongoing with more information.

@benjamn
Copy link
Member

benjamn commented Sep 28, 2020

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants