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
How it is now
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!
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).
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 idiomresult.data ?? result.previousData
to obtain the most recent useful data (if you're comfortable with it possibly being stale).