should useSuspenseQuery support initialData

[kalijonn]

I'm currently testing v5 to understand suspense support better.

https://codesandbox.io/p/sandbox/competent-frost-zryxvf

What I thought would happen: It would return count: 26, and 500ms later would update to count: 0
What actually happened: It returned count:26 and never updated to count:0

I can trick it to return count:0 by clicking refetch which does a background refetch and updates the count to 0. But right after that when I click changeCount, it flips back to count: 26 and stays there. clicking refetch again, does the background refetch and updates count to 1.

It looks like count:26 is being used as a loading state but never actually loads completely.

Is it recommended to use initialData with useSuspenseQuery? Using initial data with useSuspenseQuery never throws a promise and hence never suspends. or I'm doing something wrong in my code.

[TkDodo]

when you set initialData, it never suspends, because suspense is meant for "hard loading states". But once you have data, we'll show that instead of suspending (that's stale-while-reavalidate).

The reason why you never see the queryFn running is because with suspense, we always set a small staleTime, so the default for that when using suspense isn't zero. That's a necessary evil because react unmounts the component when it suspends to show the suspense fallback. Then, when data comes in, react will mount the component again, but with staleTime: 0, that would lead to a background refetch.

However, initialData is put into the cache, so staleTime is respected. That's why the query thinks it doesn't need to re-run the queryFn - because the count: 26 it sees is still fresh for some time.

[kalijonn]

Thank you for the response.

I'm trying to understand if initialData is the same as placeholderData in the context of suspense. Is there a valid use case to use initialData when using useSuspenseQuery? or should it also be removed in favour of using startTransition?

I've tried setting staleTime to 0 in the same example and it does resolve to count: 0. but when we change the count, it falls back to count: 26 before resolving to count: 1.

placeholderData is removed because you can use startTransition to persist previous data while fetching new data. initialData is different in a sense that its not previous data, it is static data that will be used as a loading state during the first loading state as well as subsequent loading states. this also breaks startTransition because the component is never suspended when we have initialData

[TkDodo]

I'm trying to understand if initialData is the same as placeholderData in the context of suspense

initialData is put into the cache, placeholderData is not.

I've tried setting staleTime to 0 in the same example and it does resolve to count: 0. but when we change the count, it falls back to count: 26 before resolving to count: 1.

if you change the queryKey, you get a new cache entry. If you set initialData: 26, that cache entry will get it too. If you only want initialData for a specific cache entry, you have to be specific about that:

initialData: () => queryKey === theKeyIWant ? theInitialDataIWant : undefined

[kalijonn]

I understand better now. thank you for taking the time to clarify.