feat: ugrade query integration (#256)

feat: update query integration

Co-authored-by: Brenley Dueck <[email protected]>

Author: jherr

frameworks/react-cra/add-ons/start/assets/src/router.tsx.ejs

@@ -18,13 +18,6 @@ export const getRouter = () => {
         routeTree,
         context: { ...rqContext },
         defaultPreload: "intent",
-        Wrap: (props: { children: React.ReactNode }) => {
-          return (
-            <TanstackQuery.Provider {...rqContext}>
-              {props.children}
-            </TanstackQuery.Provider>
-          );
-        },
       })
 
     setupRouterSsrQueryIntegration({router, queryClient: rqContext.queryClient})

frameworks/react-cra/src/checksum.ts

@@ -1,3 +1,3 @@
 // This file is auto-generated. Do not edit manually.
 // Generated from add-ons, examples, hosts, project, and toolchains directories
-export const contentChecksum = 'b722b3f8235cbf4618c508da1b499a8a6a583d8107eebeb9e2ffe19716ddc7e9'
+export const contentChecksum = '33ec3ec7dbdb94bb6ef6d8ba9831b43fba7f3d1f88a10408684e0ba39d282142'

frameworks/react-cra/tests/snapshots/react-cra/cr-ts-start-tanstack-query-npm.json

@@ -9,7 +9,7 @@
     "/src/data/demo.punk-songs.ts": "import { createServerFn } from '@tanstack/react-start'\n\nexport const getPunkSongs = createServerFn({\n  method: 'GET',\n}).handler(async () => [\n  { id: 1, name: 'Teenage Dirtbag', artist: 'Wheatus' },\n  { id: 2, name: 'Smells Like Teen Spirit', artist: 'Nirvana' },\n  { id: 3, name: 'The Middle', artist: 'Jimmy Eat World' },\n  { id: 4, name: 'My Own Worst Enemy', artist: 'Lit' },\n  { id: 5, name: 'Fat Lip', artist: 'Sum 41' },\n  { id: 6, name: 'All the Small Things', artist: 'blink-182' },\n  { id: 7, name: 'Beverly Hills', artist: 'Weezer' },\n])\n",
     "/src/integrations/tanstack-query/devtools.tsx": "import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'\n\nexport default {\n  name: 'Tanstack Query',\n  render: <ReactQueryDevtoolsPanel />,\n}\n",
     "/src/integrations/tanstack-query/root-provider.tsx": "import { QueryClient, QueryClientProvider } from '@tanstack/react-query'\n\nexport function getContext() {\n  const queryClient = new QueryClient()\n  return {\n    queryClient,\n  }\n}\n\nexport function Provider({\n  children,\n  queryClient,\n}: {\n  children: React.ReactNode\n  queryClient: QueryClient\n}) {\n  return (\n    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>\n  )\n}\n",
-    "/src/router.tsx": "import { createRouter } from '@tanstack/react-router'\nimport { setupRouterSsrQueryIntegration } from '@tanstack/react-router-ssr-query'\nimport * as TanstackQuery from './integrations/tanstack-query/root-provider'\n\n// Import the generated route tree\nimport { routeTree } from './routeTree.gen'\n\n// Create a new router instance\nexport const getRouter = () => {\n  const rqContext = TanstackQuery.getContext()\n\n  const router = createRouter({\n    routeTree,\n    context: { ...rqContext },\n    defaultPreload: 'intent',\n    Wrap: (props: { children: React.ReactNode }) => {\n      return (\n        <TanstackQuery.Provider {...rqContext}>\n          {props.children}\n        </TanstackQuery.Provider>\n      )\n    },\n  })\n\n  setupRouterSsrQueryIntegration({ router, queryClient: rqContext.queryClient })\n\n  return router\n}\n",
+    "/src/router.tsx": "import { createRouter } from '@tanstack/react-router'\nimport { setupRouterSsrQueryIntegration } from '@tanstack/react-router-ssr-query'\nimport * as TanstackQuery from './integrations/tanstack-query/root-provider'\n\n// Import the generated route tree\nimport { routeTree } from './routeTree.gen'\n\n// Create a new router instance\nexport const getRouter = () => {\n  const rqContext = TanstackQuery.getContext()\n\n  const router = createRouter({\n    routeTree,\n    context: { ...rqContext },\n    defaultPreload: 'intent',\n  })\n\n  setupRouterSsrQueryIntegration({ router, queryClient: rqContext.queryClient })\n\n  return router\n}\n",
     "/src/routes/__root.tsx": "import {\n  HeadContent,\n  Scripts,\n  createRootRouteWithContext,\n} from '@tanstack/react-router'\nimport { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'\nimport { TanStackDevtools } from '@tanstack/react-devtools'\n\nimport Header from '../components/Header'\n\nimport TanStackQueryDevtools from '../integrations/tanstack-query/devtools'\n\nimport appCss from '../styles.css?url'\n\nimport type { QueryClient } from '@tanstack/react-query'\n\ninterface MyRouterContext {\n  queryClient: QueryClient\n}\n\nexport const Route = createRootRouteWithContext<MyRouterContext>()({\n  head: () => ({\n    meta: [\n      {\n        charSet: 'utf-8',\n      },\n      {\n        name: 'viewport',\n        content: 'width=device-width, initial-scale=1',\n      },\n      {\n        title: 'TanStack Start Starter',\n      },\n    ],\n    links: [\n      {\n        rel: 'stylesheet',\n        href: appCss,\n      },\n    ],\n  }),\n\n  shellComponent: RootDocument,\n})\n\nfunction RootDocument({ children }: { children: React.ReactNode }) {\n  return (\n    <html lang=\"en\">\n      <head>\n        <HeadContent />\n      </head>\n      <body>\n        <Header />\n        {children}\n        <TanStackDevtools\n          config={{\n            position: 'bottom-right',\n          }}\n          plugins={[\n            {\n              name: 'Tanstack Router',\n              render: <TanStackRouterDevtoolsPanel />,\n            },\n            TanStackQueryDevtools,\n          ]}\n        />\n        <Scripts />\n      </body>\n    </html>\n  )\n}\n",
     "/src/routes/demo/api.names.ts": "import { createFileRoute } from '@tanstack/react-router'\nimport { json } from '@tanstack/react-start'\n\nexport const Route = createFileRoute('/demo/api/names')({\n  server: {\n    handlers: {\n      GET: () => json(['Alice', 'Bob', 'Charlie']),\n    },\n  },\n})\n",
     "/src/routes/demo/api.tq-todos.ts": "import { createFileRoute } from '@tanstack/react-router'\n\nconst todos = [\n  {\n    id: 1,\n    name: 'Buy groceries',\n  },\n  {\n    id: 2,\n    name: 'Buy mobile phone',\n  },\n  {\n    id: 3,\n    name: 'Buy laptop',\n  },\n]\n\nexport const Route = createFileRoute('/demo/api/tq-todos')({\n  server: {\n    handlers: {\n      GET: () => {\n        return Response.json(todos)\n      },\n      POST: async ({ request }) => {\n        const name = await request.json()\n        const todo = {\n          id: todos.length + 1,\n          name,\n        }\n        todos.push(todo)\n        return Response.json(todo)\n      },\n    },\n  },\n})\n",

frameworks/solid/add-ons/start/assets/src/router.tsx.ejs

@@ -1,13 +1,30 @@
 import { createRouter } from '@tanstack/solid-router'
-
+<% if (addOnEnabled['tanstack-query']) { %>
+  import { setupRouterSsrQueryIntegration } from '@tanstack/solid-router-ssr-query'
+  import { getContext } from "./integrations/tanstack-query/provider";
+  <% } %>
 // Import the generated route tree
 import { routeTree } from './routeTree.gen'
 
 // Create a new router instance
 export const getRouter = () => {
+  <% if (addOnEnabled['tanstack-query']) { %>
+    const rqContext = getContext();
+
+    const router = createRouter({
+        routeTree,
+        context: { ...rqContext },
+        defaultPreload: "intent",
+      })
+
+    setupRouterSsrQueryIntegration({router, queryClient: rqContext.queryClient})
+<% } else { %>
   const router = createRouter({
     routeTree,
     scrollRestoration: true,
+    defaultPreloadStaleTime: 0,
   })
-  return router
+<% } %>
+
+  return router;
 }

frameworks/solid/add-ons/start/package.json

@@ -8,6 +8,7 @@
     "@tanstack/solid-start": "^1.132.25",
     "vite": "^7.1.7",
     "vite-tsconfig-paths": "^5.1.4",
-    "lucide-solid": "^0.544.0"
+    "lucide-solid": "^0.544.0",
+    "@tanstack/solid-router-ssr-query": "^1.132.25"
   }
-}
+}

frameworks/solid/add-ons/tanstack-query/assets/src/integrations/tanstack-query/provider.tsx

@@ -1,15 +1,8 @@
-import { QueryClient, QueryClientProvider } from '@tanstack/solid-query'
+import { QueryClient } from '@tanstack/solid-query'
 
-import type { JSX } from 'solid-js'
-
-const queryClient = new QueryClient()
-
-export default function AppTanstackQueryProvider(props: {
-  children: JSX.Element
-}) {
-  return (
-    <QueryClientProvider client={queryClient}>
-      {props.children}
-    </QueryClientProvider>
-  )
-}
+export function getContext() {
+  const queryClient = new QueryClient();
+  return {
+    queryClient
+  };
+}

frameworks/solid/project/base/src/routes/__root.tsx.ejs

@@ -1,7 +1,6 @@
 <% if (!fileRouter) { ignoreFile() } %>import { HeadContent, Outlet, Scripts, createRootRouteWithContext } from '@tanstack/solid-router'
-import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'<% for(const integration of integrations.filter(i => i.type === 'layout' || i.type === 'provider')) { %>
-import <%= integration.jsName %> from "<%= relativePath(integration.path) %>";
-<% } %>
+import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'
+
 <% if (addOnEnabled['solid-ui']) { %>
 import "@fontsource/inter"
 <% } %>
@@ -37,9 +36,6 @@ function RootComponent() {
         <body>
           <HeadContent />
           <Suspense>
-            <% for(const integration of integrations.filter(i => i.type === 'provider')) { %>
-              <<%= integration.jsName %>>
-            <% } %>
             <% if (addOns.length || integrations.length || routes.length) { %>
               <Header />
             <% } %>
@@ -48,9 +44,6 @@ function RootComponent() {
             <% for(const integration of integrations.filter(i => i.type === 'layout')) { %>
               <<%= integration.jsName %> />
             <% } %>
-            <% for(const integration of integrations.filter(i => i.type === 'provider').reverse()) { %>
-              </<%= integration.jsName %>>
-            <% } %>
             </Suspense>
           <Scripts />
         </body>

frameworks/solid/src/checksum.ts

@@ -1,3 +1,3 @@
 // This file is auto-generated. Do not edit manually.
 // Generated from add-ons, examples, hosts, project, and toolchains directories
-export const contentChecksum = 'a13c68662e9a710c7d3339947e7e97cded66cc91a4a97f0f06a89c76b3a6f881'
+export const contentChecksum = '97450d3bd15410ec0fb6553e0b2709464dbef2b643f509e73ff124a3230f44c5'