Is there a way to mark writes to cache as transitions?

[kovaradam]

Hi, I apologize if this has been asked already, since I have not found it.

I would like to know if there is a way to mark state updates caused by a cache update as a transition, so that the components that are rendered because of the cache update would render in a transition.

The flow of request is as follows:

1. useMutation submits data and onSuccess awaits query invalidation - user sees pending state during these fetches
2. Invalidated queries write to cache, which triggers new suspended components - this renders some global suspense fallback

Desired state

I want to keep the stale pending UI, while the new render caused by the cache update is suspended.

So my question comes to this, is this use case supported in react-query, or should I handle this manually? Thanks!

[kovaradam]

I eventually solved this by using useDeferredValue, like so:

const {data} = useSuspenseQuery(...)
const deferredData = useDeferredValue(data)
const isNextScreenLoading = deferredData !== data