achieving ppr on nextjs with react query

[younes101020]

Hi, I'd like to propose a pattern inspired by the latest version of swr to easily integrate react query with nextjs ppr feature

"use client";
...
const result = useQuery({
  queryKey: ["user"],
  queryFn: browserSideDataFetching,
  initialData: use(unwrappedPromise),
});
...

here unwrappedPromise was passed in props from server component to a client component.
The subtlety is that this promise has not been awaited on the server side, which means that the page will be correctly prerendered.

here is a working example https://codesandbox.io/p/devbox/nextjs-15-forked-88dkt3?workspaceId=ws_DPC2Xnz6thfcUc5K7SwW5M

[TkDodo]

why not do this with hydration and sending non-awaited promised down like shown in the docs?

https://tanstack.com/query/v5/docs/framework/react/guides/advanced-ssr#streaming-with-server-components

the problem with initialData is that it will be ignored if there is data in the cache already, but the fetch on the server will start every time you navigate to the page. hydration solves this because it can overwrite existing data in the cache.

[younes101020]

my bad, last time I was on the doc I only saw the awaited prefetching part. Thank you