Provide the QueryClient from the app's own react-query import

In the nodesandbox runtime SSR failed with 'No QueryClient set' in
ShopMenu. react-query ships ESM and CJS builds; when the SSR query
integration resolves through its CJS entry while the app imports ESM,
the integration's QueryClientProvider and the app's hooks use separate
React contexts. Render the provider via the router's Wrap from the
app's own import and pass wrapQueryClient: false so SSR dehydration
still runs but no second provider is added.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Rami Bitar
2026-10-03 15:13:52 -04:00
co-authored by Claude Opus 5.5
parent dbbfefca48
commit fb7ef27621
+12 -4
View File
@@ -1,4 +1,4 @@
import { QueryClient } from '@tanstack/react-query';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { createRouter } from '@tanstack/react-router';
import { setupRouterSsrQueryIntegration } from '@tanstack/react-router-ssr-query';
import { routeTree } from './routeTree.gen';
@@ -27,11 +27,19 @@ export function getRouter() {
scrollRestoration: true,
defaultErrorComponent: ({ error }) => <ErrorMessage error={error} />,
defaultNotFoundComponent: NotFound,
// Provide the QueryClient from the app's own react-query import rather than
// letting the SSR integration wrap it. react-query ships ESM and CJS builds;
// if the integration is loaded through its CJS entry while the app imports
// ESM, they hold separate React contexts and every useQuery fails during
// SSR with "No QueryClient set" (seen in the nodesandbox runtime).
Wrap: ({ children }) => (
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
),
});
// Streams queries fetched during SSR to the client cache and wraps the app
// in a QueryClientProvider.
setupRouterSsrQueryIntegration({ router, queryClient });
// Streams queries fetched during SSR to the client cache. The provider is
// the Wrap above, so the integration must not add its own.
setupRouterSsrQueryIntegration({ router, queryClient, wrapQueryClient: false });
return router;
}