Why is the client-side requests not cached when using React Query with Hydration?

[vitminakov]

https://stackblitz.com/~/github.com/vitminakov/nextjs-caching-problem

https://github.com/vitminakov/nextjs-caching-problem

I'm using prefetchQuery for the page component and wrapping everything in HydratedPage. Inside the component, the query is consumed with useSuspenseQuery, and the request is made only once as expected.

However, when I add a header slot (see example below) and perform the same query on the client, it isn't cached. The test request is triggered three times.

Is this because the QueryClient for the server and the client are different? Can this be fixed? Or is this behavior aligned with the core principles of React Query?

What was expected:
When using prefetchQuery on the server and wrapping the component in HydratedPage, the query should be hydrated and cached. This means that subsequent identical queries, whether in the main component or in the header slot, should use the cached data, resulting in only one network request.

What happened:
While the main component correctly uses the hydrated cache and makes only one network request, adding a header slot that performs the same query on the client results in multiple network requests (the test query is triggered three times). This indicates that the cache is not shared between the server and client, leading to redundant requests.

[TkDodo]

The problem is that header is rendered before children. That means on the client, when header renders, the HydrationBoundary has not yet put data in the cache.

if you change the order:

<Providers>
  {children}
  {header}
</Providers>

it’ll work. I think that’s expected, as the HydrationBoundary is the one that actually sends data to the client.