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 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..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 @@ -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 }, @@ -48,7 +37,7 @@ export function getContext() { client: trpcClient, queryClient: queryClient, }); - context = { + const context = { queryClient, trpc: serverHelpers, } @@ -56,56 +45,30 @@ export function getContext() { return context } -export default function TanStackQueryProvider({ +export default function TanstackQueryProvider({ children, + context, }: { - children: ReactNode + children: ReactNode, + context: ReturnType }) { - const { queryClient } = getContext() + const { queryClient } = context return ( - - - {children} - - + + {children} + ) } <% } 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 ( - - {children} - - ) } +export default function TanstackQueryProvider() {} <% } %> 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..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,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 ( + + {props.children} + + ); + }, + <% } %> }) +<% if (addOnEnabled['tanstack-query']) { %> + setupRouterSsrQueryIntegration({ router, queryClient: context.queryClient }) +<% } %> + return router }