-
-
Notifications
You must be signed in to change notification settings - Fork 2.8k
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
QueryClient.clear does not trigger a rerender immediately #7761
Comments
That's on purpose, because it would lead to an immediate refetch, putting the component in a hard loading state. If that's what you want, use also, I don't understand step 4 in the current behaviour:
if All in all, either use |
Thanks for taking the time! I have since resolved this in a different way, but I did check out the
Cool, that's good to know, however
This showcases the exact same behaviour. If you remove the |
Describe the bug
Very short version:
Calling
QueryClient.clear
does not immediatelly trigger a rerender to the component that uses theuseQuery
hook.Longer version:
In the repro example we have
/logout
and/dashboard
AuthProvider
that checks if the user is authenticated, and if they are it fetches the user data, using theuseUser
hook, and passes it down as context. It also passes down 2 functions,login
andlogout
, each of which makes use ofmutateAsync
fromuseLogin
anduseLogout
hooks respectively.useAuth
that provides the context ofAuthProvider
useAuthCheck
which redirects the user to/dashboard
if they are currently on/logout
and user data exists (userisAuthenticated
) or redirects the user to/logout
if they are currently on/dashboard
and no user data exists (user!isAuthenticated
)QueryClient.clear
inside theonSuccess
of theuseLogout
hookWhat is actually be happening
(READ THE WHAT IS SUPPOSED TO BE HAPPENING FIRST)
/dashboard
and the user clicks the logout buttonQueryClient.clear()
andhistory.replace('/logout')
are called/logout
renders, due tolocation
changing internally inBrowserRouter
useAuthCheck
hook callsuseAuth
which returnsisAuthenticated: true
(becauseAuthProvider
has not yet rerendered)/logout
andisAuthenticated: true
the effect inuseAuthCheck
redirects us back to/dashboard
AuthProvider
rerenders, it now passes the correct context down and it's what theuseAuth
hook should provide when called./dashboard
rendersuseAuthCheck
hook callsuseAuth
which now returnsisAuthenticated: false
/dashboard
andisAuthenticated: false
the effect inuseAuthCheck
redirects us back to/logout
/logout
as logged out users.Your minimal, reproducible example
https://stackblitz.com/edit/vitejs-vite-cwizyh?file=src%2Fproviders%2FAuthProvider.tsx&view=editor
Steps to reproduce
AuthProvider
is not immediately rerendering after theQueryClient.clear()
, leading to a back and forth between/logout
and/dashboard
If you go into the code of
AuthProvider
and comment in thesetToken
that are commented out and try to reproduce the above behaviour, you will now notice that it works correctly because theAuthProvider
rerenders immediately due to changing its state.Expected behavior
What is supposed to be happening
/dashboard
and the user clicks the logout buttonQueryClient.clear()
andhistory.replace('/logout')
are calledAuthProvider
rerenders, due to thedata
of theuseUser
hook now beingundefined
from clearing the cacheAuthProvider
rerenders, it now passes the correct context down and it's what theuseAuth
hook should provide when called./logout
rendersuseAuthCheck
hook callsuseAuth
which returnsisAuthenticated: false
/logout
as logged out users.How often does this bug happen?
Every time
Screenshots or Videos
No videos and screenshots but I have added 2 profiling logs inside the example repo (one with the wrong and one with the correct behaviour) so you can load them in your react profiler and check them
Platform
Tanstack Query adapter
react-query
TanStack Query version
5.51.9
TypeScript version
5.5.3
Additional context
No response
The text was updated successfully, but these errors were encountered: