From ac8d561916facbf18294c17b01ee4e25c4741a60 Mon Sep 17 00:00:00 2001 From: Brenley Dueck Date: Mon, 30 Mar 2026 14:32:28 -0500 Subject: [PATCH 1/4] fix: tanstack query integration --- .../tanstack-query/root-provider.tsx.ejs | 35 +++++-------------- .../react/add-ons/tanstack-query/info.json | 5 --- .../react/project/base/src/router.tsx.ejs | 24 +++++++++++-- 3 files changed, 30 insertions(+), 34 deletions(-) diff --git a/packages/create/src/frameworks/react/add-ons/tanstack-query/assets/src/integrations/tanstack-query/root-provider.tsx.ejs b/packages/create/src/frameworks/react/add-ons/tanstack-query/assets/src/integrations/tanstack-query/root-provider.tsx.ejs index 4626620b..6eb83a4e 100644 --- a/packages/create/src/frameworks/react/add-ons/tanstack-query/assets/src/integrations/tanstack-query/root-provider.tsx.ejs +++ b/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({ ], }); -let context: - | { - queryClient: QueryClient - trpc: ReturnType> - } - | 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 }) { - const { queryClient } = getContext() + const { queryClient } = context return ( @@ -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 }) { - const { queryClient } = getContext() + const { queryClient } = context return ( diff --git a/packages/create/src/frameworks/react/add-ons/tanstack-query/info.json b/packages/create/src/frameworks/react/add-ons/tanstack-query/info.json index 45c3e9a5..a757fa7e 100644 --- a/packages/create/src/frameworks/react/add-ons/tanstack-query/info.json +++ b/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", diff --git a/packages/create/src/frameworks/react/project/base/src/router.tsx.ejs b/packages/create/src/frameworks/react/project/base/src/router.tsx.ejs index bc05da09..24b7953d 100644 --- a/packages/create/src/frameworks/react/project/base/src/router.tsx.ejs +++ b/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 ( + + {props.children} + + ); + }, +<% } %> }) +<% if (addOnEnabled['tanstack-query']) { %> + setupRouterSsrQueryIntegration({ router, queryClient: context.queryClient }) +<% } %> + return router } From 8f9fcc3b5e368912a794c8bb5b87e232347ca37c Mon Sep 17 00:00:00 2001 From: Brenley Dueck Date: Mon, 30 Mar 2026 15:15:45 -0500 Subject: [PATCH 2/4] fix: tanstack query integration --- .../tanstack-query/root-provider.tsx.ejs | 27 ------------------- .../react/project/base/src/router.tsx.ejs | 23 ++++------------ 2 files changed, 5 insertions(+), 45 deletions(-) diff --git a/packages/create/src/frameworks/react/add-ons/tanstack-query/assets/src/integrations/tanstack-query/root-provider.tsx.ejs b/packages/create/src/frameworks/react/add-ons/tanstack-query/assets/src/integrations/tanstack-query/root-provider.tsx.ejs index 6eb83a4e..ccfeab94 100644 --- a/packages/create/src/frameworks/react/add-ons/tanstack-query/assets/src/integrations/tanstack-query/root-provider.tsx.ejs +++ b/packages/create/src/frameworks/react/add-ons/tanstack-query/assets/src/integrations/tanstack-query/root-provider.tsx.ejs @@ -62,31 +62,4 @@ export default function TanStackQueryProvider({ ) } -<% } else { %> -import type { ReactNode } from 'react' -import { QueryClient, QueryClientProvider } from '@tanstack/react-query' - -export function getContext() { - const queryClient = new QueryClient(); - - return { - queryClient, - } -} - -export default function TanStackQueryProvider({ - children, - context, -}: { - children: ReactNode - context: ReturnType -}) { - const { queryClient } = context - - return ( - - {children} - - ) -} <% } %> diff --git a/packages/create/src/frameworks/react/project/base/src/router.tsx.ejs b/packages/create/src/frameworks/react/project/base/src/router.tsx.ejs index 24b7953d..256d560e 100644 --- a/packages/create/src/frameworks/react/project/base/src/router.tsx.ejs +++ b/packages/create/src/frameworks/react/project/base/src/router.tsx.ejs @@ -1,40 +1,27 @@ import { createRouter as createTanStackRouter } from '@tanstack/react-router' import { routeTree } from './routeTree.gen' <% if (addOnEnabled['tanstack-query']) { %> +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 queryClient = new QueryClient(); <% } %> const router = createTanStackRouter({ - routeTree, -<% if (addOnEnabled['tanstack-query']) { %> - context, -<% } else if (addOnEnabled['apollo-client']) { %> + routeTree,<% if (addOnEnabled['tanstack-query']) { %> + context: { queryClient },<% } else if (addOnEnabled['apollo-client']) { %> context: {} as any, <% } %> scrollRestoration: true, defaultPreload: 'intent', defaultPreloadStaleTime: 0, -<% if (addOnEnabled['tanstack-query']) { %> - Wrap: (props: { children: React.ReactNode }) => { - return ( - - {props.children} - - ); - }, -<% } %> }) <% if (addOnEnabled['tanstack-query']) { %> - setupRouterSsrQueryIntegration({ router, queryClient: context.queryClient }) + setupRouterSsrQueryIntegration({ router, queryClient: queryClient }) <% } %> return router From 46ec412b218ce213089f149c4bf3448d5dff0849 Mon Sep 17 00:00:00 2001 From: Brenley Dueck Date: Mon, 30 Mar 2026 19:12:01 -0500 Subject: [PATCH 3/4] fix: trpc integration --- .../tanstack-query/root-provider.tsx.ejs | 23 +++++++++++++------ .../react/project/base/src/router.tsx.ejs | 19 +++++++++++---- 2 files changed, 31 insertions(+), 11 deletions(-) diff --git a/packages/create/src/frameworks/react/add-ons/tanstack-query/assets/src/integrations/tanstack-query/root-provider.tsx.ejs b/packages/create/src/frameworks/react/add-ons/tanstack-query/assets/src/integrations/tanstack-query/root-provider.tsx.ejs index ccfeab94..1f74d9df 100644 --- a/packages/create/src/frameworks/react/add-ons/tanstack-query/assets/src/integrations/tanstack-query/root-provider.tsx.ejs +++ b/packages/create/src/frameworks/react/add-ons/tanstack-query/assets/src/integrations/tanstack-query/root-provider.tsx.ejs @@ -37,7 +37,7 @@ export function getContext() { client: trpcClient, queryClient: queryClient, }); - context = { + const context = { queryClient, trpc: serverHelpers, } @@ -45,7 +45,7 @@ export function getContext() { return context } -export default function TanStackQueryProvider({ +export default function TanstackQueryProvider({ children, context, }: { @@ -55,11 +55,20 @@ export default function TanStackQueryProvider({ const { queryClient } = context return ( - - - {children} - - + + {children} + ) } +<% } else { %> +import { QueryClient } from '@tanstack/react-query' + +export function getContext() { + const queryClient = new QueryClient(); + + return { + queryClient, + } +} +export default function TanstackQueryProvider() {} <% } %> diff --git a/packages/create/src/frameworks/react/project/base/src/router.tsx.ejs b/packages/create/src/frameworks/react/project/base/src/router.tsx.ejs index 256d560e..96459e0c 100644 --- a/packages/create/src/frameworks/react/project/base/src/router.tsx.ejs +++ b/packages/create/src/frameworks/react/project/base/src/router.tsx.ejs @@ -1,27 +1,38 @@ import { createRouter as createTanStackRouter } from '@tanstack/react-router' import { routeTree } from './routeTree.gen' <% if (addOnEnabled['tanstack-query']) { %> +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 queryClient = new QueryClient(); + const context = getContext(); <% } %> - + const router = createTanStackRouter({ routeTree,<% if (addOnEnabled['tanstack-query']) { %> - context: { queryClient },<% } else if (addOnEnabled['apollo-client']) { %> + context,<% } else if (addOnEnabled['apollo-client']) { %> context: {} as any, <% } %> scrollRestoration: true, defaultPreload: 'intent', defaultPreloadStaleTime: 0, + <% if (addOnEnabled.tRPC) { %> + Wrap: (props: { children: ReactNode }) => { + return ( + + {props.children} + + ); + }, + <% } %> }) <% if (addOnEnabled['tanstack-query']) { %> - setupRouterSsrQueryIntegration({ router, queryClient: queryClient }) + setupRouterSsrQueryIntegration({ router, queryClient: context.queryClient }) <% } %> return router From 4f7f7b4ed680638fe62f47e0de67092d34fcefde Mon Sep 17 00:00:00 2001 From: Brenley Dueck Date: Mon, 30 Mar 2026 19:19:33 -0500 Subject: [PATCH 4/4] chore: add changeset --- .changeset/soft-corners-allow.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/soft-corners-allow.md diff --git a/.changeset/soft-corners-allow.md b/.changeset/soft-corners-allow.md new file mode 100644 index 00000000..764f9656 --- /dev/null +++ b/.changeset/soft-corners-allow.md @@ -0,0 +1,5 @@ +--- +'@tanstack/create': patch +--- + +Fix Tanstack Query Integration