From fb7ef276211f8dba56ea294efe5dcab26e7dbca0 Mon Sep 17 00:00:00 2001
From: Rami Bitar <rbitar@gmail.com>
Date: Sat, 3 Oct 2026 15:13:52 -0400
Subject: [PATCH] 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>
---
 src/router.tsx | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/router.tsx b/src/router.tsx
index 9700374..9ae9e9d 100644
--- a/src/router.tsx
+++ b/src/router.tsx
@@ -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;
 }