Weird results when keepPreviousData is used with transitions

[faradaytrs]

Describe the bug

Sandbox link

When I click decrease (in the second part of the example), I get unexpected results on example 2.2;
Because other suspense boundaries depend on the same state, useQuery waits for them to render and only starts fetching after transition is complete.
Can somebody explain why we get this result?

If i remove other two Suspense boundaries, everything seems normal.
With keepPreviousData on, it starts fetching only when transition is complete, not sure if it's bug

One more strange thing I noticed is fetching triggered by refetchOnWindowFocus doesn't cause fallback in suspense? Is it right behavior?

Your minimal, reproducible example

https://codesandbox.io/s/funny-leftpad-wf7kbz?file=/src/App.js

Steps to reproduce

Click decrease:
See that full update requires 10 seconds instead of 5.

Expected behaviour

1. I expected 2.2 to work similarly with 2.1 in sandbox
2. I expect refetchOnWindowFocus trigger fallback when used with suspense: true and current behaviour can be opt in using useDeferredValue or keepPreviousValue

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

Mac OS Monterey
Latest Edge

react-query version

4.0.0-beta.7

TypeScript version

No response

Additional context

No response

[faradaytrs]

I moved this from discussions because I believe at least one is a bug.
#3567

[TkDodo]

One more strange thing I noticed is fetching triggered by refetchOnWindowFocus doesn't cause fallback in suspense? Is it right behavior?

This is on purpose because suspense replaces a "hard loading state" where we have no data yet. For background refetches, the stale data is shown and the query will stay in success state.

---

I have looked at the sandbox, but I honestly have no idea why this is happening. It looks like a bug, but I would appreciate some help.

[TkDodo]

The same issue seems to occur though with:

placeholderData: () => "fallback" + Math.random()

[TkDodo]

Thought about this a bit: keepPreviousData becomes unnecessary when you use suspense + startTransition. The screen will be kept in tact while the transition is going on. If we just remove keepPreviousData from your example, it works as expected.

keepPreviousData is meant to give you the "suspense" experience without actually using suspense.

[TkDodo]

I'll close this issue for staleness and because I don't think there is something we can / should do. keepPreviousData doesn't make sense with suspense, and we might create a new hook especially for suspense like useSuspenseQuery, and in this case, it won't have the keepPreviousData / placeholderData option, because those won't do anything while suspending anyways.