How to handle invalidate queries
Hi guys! how do you handle invalidate queries after a successful mutation, what I did is I added a invalidate call to my onSuccess callback in my mutation. This does invalidate my getAllProjects query, however it takes a little bit of time to load. Do you have any suggestions how I might be able to add a loading state while the invalidation happens?
15 Replies
i think invalidate does not delete the old values
just fetch and refresh the data after
the fetch and refresh the data part is done by the invalidate callback in onSuccess right?
this is my code;
const {
mutate: createInitialProject,
isLoading: createInitialProjectLoading,
} = api.project.createInitialProject.useMutation({
onSuccess: () => {
removeValue();
void api.useContext().project.getAllProjectOrders.invalidate();
},
});yeah
the invalidate does not remove the old data
ahh okay so it really does take a little bit of time for the data to be refreshed.
if you have devtools
you can see it happening
Devtools | TanStack Query Docs
Wave your hands in the air and shout hooray because React Query comes with dedicated devtools! 🥳
When you begin your React Query journey, you'll want these devtools by your side. They help visualize all of the inner workings of React Query and will likely save you hours of debugging if you find yourself in a pinch!
do you have any suggestions how I might be able to add a loading state because right now either the user has to stare at a blank canvas and wait for a moment for the data to be refreshed, or just completely refresh the page so that the user will be able to see the new project.
i think there is a isLoading value returned
but that aspect is more into the tanstack query side of the project
is there much a difference between isFetching and isLoading?
is fetching is at global client
is loading is at query level
i thhink just checking for isLoading is enough
Thank you so much @Neto !
glad to help
if you do “query.refetch()” it’ll throw out the old data and send it back into a loading state as well just another option.. that’s normally what I do if I want to go back into a loading state
Hi @iway1 where does this usually fit in the code, I'm just curious, sorry.
do I add this inside my onSuccess handler?
Yep!