Bypass cache even while data is refetched

[hayata-suenaga]

What I'm trying to accomplish

I want to make a useQuery instance completely ignore the cache and behave as if the query were run for the first time for the given query key.

More info

I have a specific React component where I do not want to use cached data at all. Setting staleTime to 0 does not prevent the cached data from being returned while fresh data is being refetched. I want to avoid this behavior for a particular instance of a query.

Additional background

Within a component, I display a modal based on the value of the queried data. Stale cached data causes the modal to appear when it should not.

[TkDodo]

you can use isFetchedAfterMount. From the docs:

https://tanstack.com/query/latest/docs/react/reference/useQuery

isFetchedAfterMount: boolean
Will be true if the query has been fetched after the component mounted.
This property can be used to not show any previously cached data.