Send a query back into a loading state (Suspense)

[iway1]

As far as I can tell, there doesn't seem to be a way to get a fetched query to go back into a loading state and for it to suspend the component again after it's being fetched? Is there a mechanism for this?

I have a use case where I would like my data to usually not show a loading state when background fetches are happening, but there is a certain circumstance where I do want to show it in a loading state while refetching? Any general solution for this without me having to create my own state management? If I can put the query back into loading state it would solve this for me I think

[TkDodo]

you can remove the query with queryClient.removeQueries or with remove returned from useQuery. it will remove the value from the cache, but not re-render any subscribers. If the component re-renders again, it will go into hard loading state, because it has no data, thus re-throwing to the suspense boundary.

[iway1]

Ah okay that's very informative. So in my case I would need to trigger a rerender for a subscriber - it sounds like that's something I'd need to do outside of react-query?

[TkDodo]

if you want to remove + re-render, queryClient.resetQueries is your friend because it does exactly that.

[iway1]

U r the man! Thanks!