UseQuery. How to reset hydrated value to undefined in vue 3 + nuxt.
I have a query that is called on the server side using
suspense and I have a problem with resetting a value to undefined. The queryClient.resetQueries doesn't work because the hydrated value becomes the default value as well. How can I reset the current value to undefined?24 Replies
rare-sapphireOP•14mo ago
@TkDodo 🔮 Hello! Sorry for ping, but may be you can help with that?
deep-jade•14mo ago
what do you mean "reset to undefined" ?
rare-sapphireOP•14mo ago
What I mean is that after hydration I have some value stored in my query (in my case user profile) and I want to reset it, after calling queryClient.resetQueries on non hydrated query its value becomes undefined, but with hydrated query it doesn't work.
rare-sapphireOP•14mo ago
Wanted state after resetting
rare-sapphireOP•14mo ago
Hydrated state example
deep-jade•14mo ago
reset resets to the state that the query was initially created with. If the query was created by restoring from a persisted storage, that's what it will reset towards (same with initialData)
rare-sapphireOP•14mo ago
I understand that. But how can I then reset the value to undefined if it was received on the server side?
deep-jade•14mo ago
Whats the use case where you need to do that?
rare-sapphireOP•14mo ago
Logout, i need to remove user profile from state
deep-jade•14mo ago
removeQueries()
You could've just lead with that 🤷♂️
rare-sapphireOP•14mo ago
This function does not cause rendering
removeQueries only remove query, without trigger renderdeep-jade•14mo ago
Yes, but are you not redirecting the user to the /login page or something when they log out ?
rare-sapphireOP•14mo ago
no
deep-jade•14mo ago
So you expect setting a user query to undefined to log out the user ?
rare-sapphireOP•14mo ago
Conditionally yes, I call the
api/logout method then reset the query with the user profile
deep-jade•14mo ago
but what should happen then? I mean, the app can't render if the user is not logged in, right? Why don't you just re-direct to a page in
onSuccess of the logout that you know the user can see without being logged in...rare-sapphireOP•14mo ago
But in my case, the application can safely continue to run after a logout. Without redirect.
After logout, part of the interface changes and no more. There is no point in redirecting the user to any page.
deep-jade•14mo ago
so reset sets back to initial state and triggers a re-render. That re-render will then likely trigger a refetch because there's no data in the cache. If that's really whatyou want (which I still doubt) you can do removeQueries() followed by refetchQueries()
rare-sapphireOP•14mo ago
Unfortunately your solution does not work, the renderer is not called (
rare-sapphireOP•14mo ago
I think to solve my problem I need to be able to clear the initial value
Hi! May be i can create feature request with ability to reset initial value to undefined or something like that?
deep-jade•14mo ago
I think it's this issue: https://github.com/TanStack/query/issues/6682
one fix on our end could be to not treat data coming on from hydration as "initial" data. but I need to think this through because it also affects SSR
GitHub
#initialState set incorrectly to persisted state · Issue #6682 · Ta...
Describe the bug When using PersistQueryClientProvider the query #initialState will be set to the state loaded from storage on page/app load. Running resetQueries will now give unexpected behaviour...
rare-sapphireOP•14mo ago
Okay, thanks, that good idea, I was thinking the same thing.
deep-jade•14mo ago
rare-sapphireOP•14mo ago
Thank you so much, you my hero)