react-query with suspense vs react-router loader

[jestrickler]

Is there any important distinction between using react-query with suspense and wrapping the Route's element in a Suspense block versus using a loader (to preload the react-query cache)? In my mind, they seem to accomplish the same thing. Does lazy loading make any difference? I'm assuming it would display the Suspense fallback while lazy loading and getting data from useQuery with suspense..?

[jestrickler]

I was able to play around with the 2nd half of this, with lazy loading a component containing a query with keepPreviousData and suspense. It seems to work pretty nice, showing the Suspense fallback while fetching the component and the first page of data, then staying in the component (no Suspense fallback) when fetching additional pages.

I guess I could see with a loader it might fetch the component and data in parallel..? I'll have to try that out.

[TkDodo]

FYI, suspense doesn't work with keepPreviousData. You'd want a transition for that.

[jestrickler]

It seems to be working as I would expect. The first time, or if I reload the browser, it shows the suspense fallback until the fetch returns. Once I have data, it shows the component with previous data until the fetch returns and the component updates. I'm not trying to be contradictory, just wondering if I'm missing something..? I'm using "@tanstack/react-query": "^4.35.3". Thanks for your time, and this awesome library!

[TkDodo]

it doesn't work when used with concurrent features, see:

• Weird results when keepPreviousData is used with transitions #3572

The point of keepPreviousData was to give users a "suspense-like" behaviour without using suspense: keeping data on screen while we're transitioning from one queryKey to the next. If you are using suspense, startTransition or useDeferredValue solve that use-case. See:

• https://react.dev/reference/react/Suspense#showing-stale-content-while-fresh-content-is-loading
• https://react.dev/reference/react/Suspense#preventing-already-revealed-content-from-hiding