fix: tanstack query integration

Author: brenelz

packages/create/src/frameworks/react/add-ons/tanstack-query/assets/src/integrations/tanstack-query/root-provider.tsx.ejs

@@ -25,18 +25,7 @@ export const trpcClient = createTRPCClient<TRPCRouter>({
   ],
 });
 
-let context:
-  | {
-      queryClient: QueryClient
-      trpc: ReturnType<typeof createTRPCOptionsProxy<TRPCRouter>>
-    }
-  | undefined
-
 export function getContext() {
-  if (context) {
-    return context
-  }
-
   const queryClient = new QueryClient({
     defaultOptions: {
       dehydrate: { serializeData: superjson.serialize },
@@ -58,10 +47,12 @@ export function getContext() {
 
 export default function TanStackQueryProvider({
   children,
+  context,
 }: {
-  children: ReactNode
+  children: ReactNode,
+  context: ReturnType<typeof getContext>
 }) {
-  const { queryClient } = getContext()
+  const { queryClient } = context
 
   return (
     <QueryClientProvider client={queryClient}>
@@ -75,32 +66,22 @@ export default function TanStackQueryProvider({
 import type { ReactNode } from 'react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 
-let context:
-  | {
-      queryClient: QueryClient
-    }
-  | undefined
-
 export function getContext() {
-  if (context) {
-    return context
-  }
-
   const queryClient = new QueryClient();
 
-  context = {
+  return {
     queryClient,
   }
-
-  return context
 }
 
 export default function TanStackQueryProvider({
   children,
+  context,
 }: {
   children: ReactNode
+  context: ReturnType<typeof getContext>
 }) {
-  const { queryClient } = getContext()
+  const { queryClient } = context
 
   return (
     <QueryClientProvider client={queryClient}>

packages/create/src/frameworks/react/add-ons/tanstack-query/info.json

@@ -18,11 +18,6 @@
     }
   ],
   "integrations": [
-    {
-      "type": "provider",
-      "path": "src/integrations/tanstack-query/root-provider.tsx",
-      "jsName": "TanStackQueryProvider"
-    },
     {
       "type": "devtools",
       "path": "src/integrations/tanstack-query/devtools.tsx",

packages/create/src/frameworks/react/project/base/src/router.tsx.ejs

@@ -1,22 +1,42 @@
 import { createRouter as createTanStackRouter } from '@tanstack/react-router'
 import { routeTree } from './routeTree.gen'
 <% if (addOnEnabled['tanstack-query']) { %>
-import { getContext } from './integrations/tanstack-query/root-provider'
+import { setupRouterSsrQueryIntegration } from "@tanstack/react-router-ssr-query";
+import TanStackQueryProvider, {
+  getContext,
+} from "./integrations/tanstack-query/root-provider";
 <% } %>
 
 export function getRouter() {
+  <% if (addOnEnabled['tanstack-query']) { %>
+  const context = getContext();
+  <% } %>
+
   const router = createTanStackRouter({
     routeTree,
 <% if (addOnEnabled['tanstack-query']) { %>
-    context: getContext(),
+    context,
 <% } else if (addOnEnabled['apollo-client']) { %>
     context: {} as any,
 <% } %>
     scrollRestoration: true,
     defaultPreload: 'intent',
     defaultPreloadStaleTime: 0,
+<% if (addOnEnabled['tanstack-query']) { %>
+    Wrap: (props: { children: React.ReactNode }) => {
+      return (
+        <TanStackQueryProvider context={context}>
+          {props.children}
+        </TanStackQueryProvider>
+      );
+    },
+<% } %> 
   })
 
+<% if (addOnEnabled['tanstack-query']) { %>
+  setupRouterSsrQueryIntegration({ router, queryClient: context.queryClient })
+<% } %>
+
   return router
 }