Remix hydration errors
I'm getting hydration errors using react-query with remix. Seems the server is caching initialData on subsequentRequests.
This repro shows that after hydrating a page with a query populated with initialData from the server, remix will blow up when refreshing on another page using the same query without that same initialData. This is because the server has the original initialData and so is rendered with the cached data, but the client does not have access to that initialData and renders isLoading state.
https://stackblitz.com/edit/remix-run-remix-zjutjv?file=app%2Fcomponents%2Fcomponent.tsx
3 Replies
national-goldOP•2y ago
Only fix I've found is to set the gcTime to 0 on the server so it doesn't cache initialData (or at all)
extended-salmon•2y ago
you're creating the queryClient outside the App component, meaning that on the server, it will be shared between requests, because it's only created once on the server:
our recommendation is to move that to react state:
https://tanstack.com/query/v5/docs/framework/react/guides/ssr#initial-setup
Server Rendering & Hydration | TanStack Query Docs
In this guide you'll learn how to use React Query with server rendering.
See the guide on Prefetching & Router Integration for some background. You might also want to check out the Performance & Request Waterfalls guide before that.
national-goldOP•2y ago
Thanks @TkDodo 🔮