fix: changing how we integrate the tanstack query provider

Author: jherr

src/create-app.ts

@@ -442,7 +442,7 @@ export async function createApp(
   }
 
   const integrations: Array<{
-    type: 'layout' | 'provider' | 'header-user'
+    type: 'layout' | 'provider' | 'root-provider' | 'header-user'
     name: string
     path: string
   }> = []
@@ -473,6 +473,22 @@ export async function createApp(
           path: `integrations/${integration}/provider`,
         })
       }
+      if (
+        environment.exists(
+          resolve(
+            targetDir,
+            'src/integrations',
+            integration,
+            'root-provider.tsx',
+          ),
+        )
+      ) {
+        integrations.push({
+          type: 'root-provider',
+          name: integrationName,
+          path: `integrations/${integration}/root-provider`,
+        })
+      }
       if (
         environment.exists(
           resolve(

…integrations/tanstack-query/provider.tsx …rations/tanstack-query/root-provider.tsxtemplates/react/add-on/tanstack-query/assets/src/integrations/tanstack-query/provider.tsx renamed to templates/react/add-on/tanstack-query/assets/src/integrations/tanstack-query/root-provider.tsx templates/react/add-on/tanstack-query/assets/src/integrations/tanstack-query/provider.tsx renamed to templates/react/add-on/tanstack-query/assets/src/integrations/tanstack-query/root-provider.tsx

@@ -2,7 +2,13 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 
 const queryClient = new QueryClient()
 
-export default function Provider({ children }: { children: React.ReactNode }) {
+export function getContext() {
+  return {
+    queryClient,
+  }
+}
+
+export function Provider({ children }: { children: React.ReactNode }) {
   return (
     <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
   )

templates/react/base/README.md.ejs

@@ -152,7 +152,7 @@ const rootRoute = createRootRoute({
 Here is an example layout that includes a header:
 
 ```tsx
-import { createRootRoute, Outlet } from '@tanstack/react-router'
+import { Outlet, createRootRoute } from '@tanstack/react-router'
 import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
 
 import { Link } from "@tanstack/react-router";
@@ -214,7 +214,7 @@ mkdir src/routes
 Then you'll need to create a `src/routes/__root.<%= jsx %>` file with the contents of the root route that was in `main.<%= jsx %>`.
 
 ```tsx
-import { createRootRoute, Outlet } from "@tanstack/react-router";
+import { Outlet, createRootRoute } from "@tanstack/react-router";
 import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
 
 export const Route = createRootRoute({

templates/react/code-router/src/main.tsx.ejs

@@ -13,6 +13,8 @@ import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
 import Header from "./components/Header";
 <% } %><% for(const integration of integrations.filter(i => i.type === 'layout' || i.type === 'provider')) { %>
 import <%= integration.name %> from "./<%= integration.path %>";
+<% } %><% for(const integration of integrations.filter(i => i.type === 'root-provider')) { %>
+import * as <%= integration.name %> from "./<%= integration.path %>";
 <% } %>
 
 import "./styles.css";
@@ -49,6 +51,11 @@ const routeTree = rootRoute.addChildren([indexRoute<%= routes.map(route => `, ${
 
 const router = createRouter({
   routeTree,
+  context: {
+    <% for(const integration of integrations.filter(i => i.type === 'root-provider')) { %>
+      ...<%= integration.name %>.getContext(),
+    <% } %>
+  },
   defaultPreload: "intent",
   scrollRestoration: true,
   defaultStructuralSharing: true,
@@ -67,7 +74,13 @@ const rootElement = document.getElementById("app");
   const root = ReactDOM.createRoot(rootElement);
   root.render(
     <StrictMode>
-      <RouterProvider router={router} />
+      <% for(const integration of integrations.filter(i => i.type === 'root-provider')) { %>
+        <<%= integration.name %>.Provider>
+      <% } %>
+        <RouterProvider router={router} />
+      <% for(const integration of integrations.filter(i => i.type === 'root-provider').reverse()) { %>
+        </<%= integration.name %>.Provider>
+      <% } %>
     </StrictMode>
   );
 }

templates/react/file-router/src/main.tsx.ejs

@@ -1,6 +1,9 @@
 import { StrictMode } from "react";
 import ReactDOM from "react-dom/client";
 import { RouterProvider, createRouter } from "@tanstack/react-router";
+<% for(const integration of integrations.filter(i => i.type === 'root-provider')) { %>
+import * as <%= integration.name %> from "./<%= integration.path %>";
+<% } %>
 
 // Import the generated route tree
 import { routeTree } from "./routeTree.gen";
@@ -9,7 +12,17 @@ import "./styles.css";
 import reportWebVitals from "./reportWebVitals.<%= js %>";
 
 // Create a new router instance
-const router = createRouter({ routeTree, defaultPreload: "intent", scrollRestoration: true, defaultStructuralSharing: true });
+const router = createRouter({
+  routeTree,
+  context: {
+    <% for(const integration of integrations.filter(i => i.type === 'root-provider')) { %>
+      ...<%= integration.name %>.getContext(),
+    <% } %>
+  },
+  defaultPreload: "intent",
+  scrollRestoration: true,
+  defaultStructuralSharing: true
+});
 
 // Register the router instance for type safety
 declare module "@tanstack/react-router" {
@@ -24,7 +37,13 @@ if (rootElement && !rootElement.innerHTML) {
   const root = ReactDOM.createRoot(rootElement);
   root.render(
     <StrictMode>
-      <RouterProvider router={router} />
+      <% for(const integration of integrations.filter(i => i.type === 'root-provider')) { %>
+        <<%= integration.name %>.Provider>
+      <% } %>
+          <RouterProvider router={router} />
+      <% for(const integration of integrations.filter(i => i.type === 'root-provider').reverse()) { %>
+        </<%= integration.name %>.Provider>
+      <% } %>
     </StrictMode>
   );
 }

templates/react/file-router/src/routes/__root.tsx.ejs

@@ -1,5 +1,5 @@
-import { createRootRoute, Outlet<% if (addOnEnabled.start) { %>
-,HeadContent, Scripts<% } %> } from '@tanstack/react-router'
+import { Outlet<% if (addOnEnabled.start) { %>
+, HeadContent, Scripts<% } %>, createRootRoute } from '@tanstack/react-router'
 import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
 <% if (addOns.length) { %>
 import Header from '../components/Header'

templates/solid/base/README.md.ejs

@@ -131,7 +131,7 @@ const rootRoute = createRootRoute({
 Here is an example layout that includes a header:
 
 ```tsx
-import { createRootRoute, Outlet } from '@tanstack/solid-router'
+import { Outlet, createRootRoute } from '@tanstack/solid-router'
 import { TanStackRouterDevtools } from '@tanstack/router-devtools'
 
 import { Link } from "@tanstack/solid-router";