Query cache failing on client-component pre-rendered on server
I'm using react query with nextjs 14.
I am prefetching a query server side and using <HydrationBoundary state> to hydrate that queryResult to the client. This is working correctly.
The problem is: The client component where I need the query result, is pre-rendered on the server. When this happens, the useQuery() doesn't have the cache hydrated because its not yet on the client, so it returns null. and then on the client the cache is retrieved correctly, which causes a hydration failed due to UI mismatch.
This is a problem with nextjs pre-rendering client components on server and trying to reuse cache from react-query.
Is there a solution for this? Thanks
I am prefetching a query server side and using <HydrationBoundary state> to hydrate that queryResult to the client. This is working correctly.
The problem is: The client component where I need the query result, is pre-rendered on the server. When this happens, the useQuery() doesn't have the cache hydrated because its not yet on the client, so it returns null. and then on the client the cache is retrieved correctly, which causes a hydration failed due to UI mismatch.
This is a problem with nextjs pre-rendering client components on server and trying to reuse cache from react-query.
Is there a solution for this? Thanks
