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?

Neto•4/17/23, 1:34 AM

i think invalidate does not delete the old values

Neto•4/17/23, 1:34 AM

just fetch and refresh the data after

josh-dev627OP•4/17/23, 1:35 AM

the fetch and refresh the data part is done by the invalidate callback in onSuccess right?

josh-dev627OP•4/17/23, 1:35 AM

this is my code;

Neto•4/17/23, 1:36 AM

yeah

Neto•4/17/23, 1:36 AM

the invalidate does not remove the old data

josh-dev627OP•4/17/23, 1:36 AM

ahh okay so it really does take a little bit of time for the data to be refreshed.

Neto•4/17/23, 1:37 AM

if you have devtools

Neto•4/17/23, 1:37 AM

you can see it happening

Neto•4/17/23, 1:37 AM

https://tanstack.com/query/v4/docs/react/devtools

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!

josh-dev627OP•4/17/23, 1:39 AM

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.

Neto•4/17/23, 1:40 AM

i think there is a isLoading value returned

Neto•4/17/23, 1:41 AM

but that aspect is more into the tanstack query side of the project

josh-dev627OP•4/17/23, 1:43 AM

is there much a difference between isFetching and isLoading?

Neto•4/17/23, 1:45 AM

is fetching is at global client

Neto•4/17/23, 1:46 AM

is loading is at query level

Neto•4/17/23, 1:46 AM

i thhink just checking for isLoading is enough

josh-dev627OP•4/17/23, 1:53 AM

Thank you so much @Neto !

Neto•4/17/23, 1:54 AM

glad to help

isaac_way•4/17/23, 2:13 AM

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

josh-dev627OP•4/17/23, 2:14 AM

Hi @iway1 where does this usually fit in the code, I'm just curious, sorry.

josh-dev627OP•4/17/23, 2:14 AM

do I add this inside my onSuccess handler?

isaac_way•4/17/23, 2:15 AM

Yep!