react-query-next-experimental's ReactQueryStreamedHydration, no way to fetch on server side components?

[FezVrasta]

I was looking at the new ReactQueryStreamedHydration examples, but it looks like the idea is to always fetch data from a client side component, never from a server one.

How can I have a server side component fetch some data, render it on the client, and send the cache to the client so that client side queries can make use of it?

One approach I can think of is the following:

// app/page.tsx
"use server";

export const Page = () => {
  const queryClient = new QueryClient();
  
  const data = await queryClient.fetchQuery({
    queryKey: ['test'],
    queryFn: async () => (await fetch('https://example.org/api/test')).json()
  });

  return (
    <QueryClientProvider client={queryClient}>
      <ReactQueryStreamedHydration>
        <h1>{data.title}</h1>
        <ClientSideComponent />
      </ReactQueryStreamedHydration>
    </QueryClientProvider>
  );
}

// components/client-side-component.tsx
"use client"

export const ClientSideComponent = () => {
  // this should not trigger a network request as the same resource was
  // already loaded by the server
  const { data } = useSuspenseQuery({
    queryKey: ['test'],
    queryFn() => (await fetch('https://example.org/api/test')).json(),
  });

  return <p>{data.body}</p>;
}

This should allow to share the cache between the client and the server.

I just don't understand why all of this has not been explored or documented anywhere?

[Vesper0704]

@TkDodo I've got the same question here. It seems that wrap the component in ReactQueryStreamedHydration without prefetching on server doesn't avoid client network request because they are not sharing the query cache ?

I've tested the example here and the client request is ongoing. What I expected is client and server share the same query cache and no network request is made until the staletime is due.