Why is the client-side requests not cached when using React Query with Hydration? #8391
Unanswered
vitminakov
asked this question in
Q&A
Replies: 1 comment
-
The problem is that if you change the order:
it’ll work. I think that’s expected, as the |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
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 inHydratedPage
. Inside the component, the query is consumed withuseSuspenseQuery
, 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.
Beta Was this translation helpful? Give feedback.
All reactions