fix: tanstack query integration (#418)

* fix: tanstack query integration

* fix: tanstack query integration

* fix: trpc integration

* chore: add changeset

Author: brenelz

.changeset/soft-corners-allow.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/create': patch
+---
+
+Fix Tanstack Query Integration

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 },
@@ -48,64 +37,38 @@ export function getContext() {
     client: trpcClient,
     queryClient: queryClient,
   });
-  context = {
+  const context = {
     queryClient,
     trpc: serverHelpers,
   }
 
   return context
 }
 
-export default function TanStackQueryProvider({
+export default function TanstackQueryProvider({
   children,
+  context,
 }: {
-  children: ReactNode
+  children: ReactNode,
+  context: ReturnType<typeof getContext>
 }) {
-  const { queryClient } = getContext()
+  const { queryClient } = context
 
   return (
-    <QueryClientProvider client={queryClient}>
-      <TRPCProvider trpcClient={trpcClient} queryClient={queryClient}>
-        {children}
-      </TRPCProvider>
-    </QueryClientProvider>
+    <TRPCProvider trpcClient={trpcClient} queryClient={queryClient}>
+      {children}
+    </TRPCProvider>
   )
 }
 <% } else { %>
-import type { ReactNode } from 'react'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-
-let context:
-  | {
-      queryClient: QueryClient
-    }
-  | undefined
+import { QueryClient } from '@tanstack/react-query'
 
 export function getContext() {
-  if (context) {
-    return context
-  }
-
   const queryClient = new QueryClient();
 
-  context = {
+  return {
     queryClient,
   }
-
-  return context
-}
-
-export default function TanStackQueryProvider({
-  children,
-}: {
-  children: ReactNode
-}) {
-  const { queryClient } = getContext()
-
-  return (
-    <QueryClientProvider client={queryClient}>
-      {children}
-    </QueryClientProvider>
-  )
 }
+export default function TanstackQueryProvider() {}
 <% } %>

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,40 @@
 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 type { ReactNode } from 'react'
+import { QueryClient } from '@tanstack/react-query'
+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(),
-<% } else if (addOnEnabled['apollo-client']) { %>
+    routeTree,<% if (addOnEnabled['tanstack-query']) { %>
+    context,<% } else if (addOnEnabled['apollo-client']) { %>
     context: {} as any,
 <% } %>
     scrollRestoration: true,
     defaultPreload: 'intent',
     defaultPreloadStaleTime: 0,
+    <% if (addOnEnabled.tRPC) { %>
+    Wrap: (props: { children: ReactNode }) => {
+      return (
+        <TanstackQueryProvider context={context}>
+            {props.children}
+        </TanstackQueryProvider>
+        );
+      },
+    <% } %>
   })
 
+<% if (addOnEnabled['tanstack-query']) { %>
+  setupRouterSsrQueryIntegration({ router, queryClient: context.queryClient })
+<% } %>
+
   return router
 }