T

TanStack•13mo ago•

4 replies

constitutional-coral

`keepPreviousData` with `useSuspenseQuery` with nextjs streaming ssr

I am using useSuspenseQueryuseSuspenseQuery with ReactQueryStreamedHydrationReactQueryStreamedHydration from @tanstack/react-query-next-experimental@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 useSuspenseQueryuseSuspenseQuery to

useQuery

useQuery

with placeholderData: keepPreviousDataplaceholderData: keepPreviousData, this also worked great however it lost all of the server streaming behavior

Is it possible to get both here as useSuspenseQueryuseSuspenseQuery does not have a placeholderDataplaceholderData option

I tried dehydrating pending queries along with a HydrationBoundaryHydrationBoundary 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: InfinitystaleTime: Infinity (this did not happen with the original setup))

any help is appriciated thanks

Advanced 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...