`keepPreviousData` with `useSuspenseQuery` with nextjs streaming ssr
I am using
useSuspenseQuery with ReactQueryStreamedHydration from @tanstack/react-query-next-experimental
This works great
However my query has a regular changing query key, but I want to show the previous data during loading states
So I switched useSuspenseQuery to useQuery with placeholderData: keepPreviousData, this also worked great however it lost all of the server streaming behavior
Is it possible to get both here as useSuspenseQuery does not have a placeholderData option
I tried dehydrating pending queries along with a HydrationBoundary as shown here https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr#streaming-with-server-components
but I was unable to replicate the same behavior as before (I see the fetch on the server and the client have the initial pending query state but it still makes another immediate request despite I have global staleTime: Infinity (this did not happen with the original setup))
any help is appriciated thanksAdvanced Server Rendering | TanStack Query React Docs
Welcome to the Advanced Server Rendering guide, where you will learn all about using React Query with streaming, Server Components and the Next.js app router. You might want to read the before this on...
2 Replies
extended-salmonOP•9mo ago
GitHub
Suspense Query(ies) would benefit from keepPreviousData over startT...
Hey team. I'd like raise that startTransition with useSuspenseQuery is generally a less useful API compared to useQuery with placeholderData: keepPreviousData, and petition to add back the abil...
extended-salmonOP•9mo ago
seems related
yea I think useDeferredValue is what I want here
Solution was wrap the inputs to the query in useDeferredValue in a component above the one with
useSuspenseQuery