// Generated by scripts/generate-manifest.mjs. Do not edit by hand. import type { AddOnCompiled } from '../../../../../types.js' type TemplateRecord = Record type TemplateAddOn = TemplateRecord & { integrations?: Array routes?: Array } type TemplateRenderContext = { [key: string]: any packageManager: any projectName: any typescript: any tailwind: any blank: any js: any jsx: any fileRouter: any codeRouter: any routerOnly: any includeExamples: any addOnEnabled: Record addOnOption: Record addOns: Array integrations: Array routes: Array getPackageManagerAddScript: (...args: Array) => string getPackageManagerRunScript: (...args: Array) => string getPackageManagerExecuteScript: (...args: Array) => string relativePath: (...args: Array) => string integrationImportContent: (...args: Array) => string integrationImportCode: (...args: Array) => string | undefined renderTemplate: (content: string) => string ignoreFile: () => never } type TemplateRenderer = (context: TemplateRenderContext) => string | undefined function __escapeXML(value: unknown) { if (value === undefined || value === null) { return '' } return String(value).replace(/[&<>'"]/g, (character) => { switch (character) { case '&': return '&' case '<': return '<' case '>': return '>' case '"': return '"' case "'": return ''' default: return character } }) } export function getManifestTemplateKey(template: string) { let hash = 0x811c9dc5 for (let i = 0; i < template.length; i++) { hash ^= template.charCodeAt(i) hash = Math.imul(hash, 0x01000193) >>> 0 } return `${hash.toString(16).padStart(8, '0')}:${template.length}` } function __render_761185f3_3529(context: TemplateRenderContext) { const { packageManager, projectName, typescript, tailwind, blank, js, jsx, fileRouter, codeRouter, routerOnly, includeExamples, addOnEnabled, addOnOption, addOns, integrations, routes, getPackageManagerAddScript, getPackageManagerRunScript, getPackageManagerExecuteScript, relativePath, integrationImportContent, integrationImportCode, renderTemplate, ignoreFile, } = context let __output = '' const __append = (value: unknown) => { if (value !== undefined && value !== null) { __output += String(value) } } if (addOnEnabled['start']) { /** Start todos implementation */ __append("import { useCallback, useState } from 'react'\nimport { createFileRoute } from '@tanstack/react-router'\nimport { useQuery, useMutation } from '@tanstack/react-query'\n\nexport const Route = createFileRoute('/demo/tanstack-query')({\n component: TanStackQueryDemo,\n})\n\ntype Todo = {\n id: number\n name: string\n}\n\nfunction TanStackQueryDemo() {\n const { data, refetch } = useQuery({\n queryKey: ['todos'],\n queryFn: () => fetch('/demo/api/tq-todos').then((res) => res.json()),\n initialData: [],\n })\n\n const { mutate: addTodo } = useMutation({\n mutationFn: (todo: string) =>\n fetch('/demo/api/tq-todos', {\n method: 'POST',\n body: JSON.stringify(todo),\n }).then((res) => res.json()),\n onSuccess: () => refetch(),\n })\n\n const [todo, setTodo] = useState('')\n\n const submitTodo = useCallback(async () => {\n await addTodo(todo)\n setTodo('')\n }, [addTodo, todo])\n\n return (\n
\n
\n

TanStack Query

\n

TanStack Query Todos

\n
    \n {data?.map((t) => (\n
  • \n {t.name}\n
  • \n ))}\n
\n
\n setTodo(e.target.value)}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n submitTodo()\n }\n }}\n placeholder=\"Enter a new todo...\"\n className=\"demo-input\"\n />\n \n Add todo\n \n
\n
\n
\n )\n}\n") } else { /** Simple in-memory query implementation */ __append("import { ") if (fileRouter) { __append("createFileRoute") } else { __append("createRoute") } __append(" } from '@tanstack/react-router'\nimport { useQuery } from '@tanstack/react-query'\n") if (codeRouter) { __append("\nimport type { RootRoute } from '@tanstack/react-router'\n") } else { __append("\nexport const Route = createFileRoute('/demo/tanstack-query')({\n component: TanStackQueryDemo,\n})\n") } __append("\nfunction TanStackQueryDemo() {\n const { data } = useQuery({\n queryKey: ['todos'],\n queryFn: () => Promise.resolve([\n { id: 1, name: 'Alice' },\n { id: 2, name: 'Bob' },\n { id: 3, name: 'Charlie' },\n ]),\n initialData: [],\n })\n\n return (\n
\n
\n

TanStack Query

\n

\n TanStack Query Simple Promise Handling\n

\n
    \n {data.map((todo) => (\n
  • \n {todo.name}\n
  • \n ))}\n
\n
\n
\n )\n}\n\n") if (codeRouter) { __append("\nexport default (parentRoute: RootRoute) => createRoute({\n path: '/demo/tanstack-query',\n component: TanStackQueryDemo,\n getParentRoute: () => parentRoute,\n})\n") } __append("\n") } __append("\n") return __output } function __render_d28e3088_1729(context: TemplateRenderContext) { const { packageManager, projectName, typescript, tailwind, blank, js, jsx, fileRouter, codeRouter, routerOnly, includeExamples, addOnEnabled, addOnOption, addOns, integrations, routes, getPackageManagerAddScript, getPackageManagerRunScript, getPackageManagerExecuteScript, relativePath, integrationImportContent, integrationImportCode, renderTemplate, ignoreFile, } = context let __output = '' const __append = (value: unknown) => { if (value !== undefined && value !== null) { __output += String(value) } } if (addOnEnabled.tRPC) { __append("\nimport type { ReactNode } from 'react'\nimport { QueryClient } from '@tanstack/react-query'\nimport superjson from \"superjson\";\nimport { createTRPCClient, httpBatchStreamLink } from \"@trpc/client\";\nimport { createTRPCOptionsProxy } from \"@trpc/tanstack-react-query\";\n\nimport type { TRPCRouter } from \"#/integrations/trpc/router\";\nimport { TRPCProvider } from '#/integrations/trpc/react'\n\nfunction getUrl() {\n const base = (() => {\n if (typeof window !== \"undefined\") return \"\";\n return `http://localhost:${process.env.PORT ?? 3000}`;\n })();\n return `${base}/api/trpc`;\n}\n\nexport const trpcClient = createTRPCClient({\n links: [\n httpBatchStreamLink({\n transformer: superjson,\n url: getUrl(),\n }),\n ],\n});\n\nexport function getContext() {\n const queryClient = new QueryClient({\n defaultOptions: {\n dehydrate: { serializeData: superjson.serialize },\n hydrate: { deserializeData: superjson.deserialize },\n },\n });\n\n const serverHelpers = createTRPCOptionsProxy({\n client: trpcClient,\n queryClient: queryClient,\n });\n const context = {\n queryClient,\n trpc: serverHelpers,\n }\n\n return context\n}\n\nexport default function TanstackQueryProvider({\n children,\n context,\n}: {\n children: ReactNode,\n context: ReturnType\n}) {\n const { queryClient } = context\n\n return (\n \n {children}\n \n )\n}\n") } else { __append("\nimport { QueryClient } from '@tanstack/react-query'\n\nexport function getContext() {\n const queryClient = new QueryClient();\n\n return {\n queryClient,\n }\n}\nexport default function TanstackQueryProvider() {}\n") } __append("\n") return __output } const templateRenderers: Record = { "761185f3:3529": __render_761185f3_3529, "d28e3088:1729": __render_d28e3088_1729, } export function hasManifestTemplate(template: string) { return getManifestTemplateKey(template) in templateRenderers } export function renderManifestTemplate( template: string, context: TemplateRenderContext, ) { const key = getManifestTemplateKey(template) const renderer = templateRenderers[key] if (!renderer) { throw new Error(`Template ${key} was not precompiled into the manifest`) } return renderer(context) ?? '' } export const addOn = { "name": "Query", "description": "Integrate TanStack Query into your application.", "phase": "add-on", "modes": [ "file-router", "code-router" ], "type": "add-on", "category": "tanstack", "color": "#EF4444", "priority": 10, "link": "https://tanstack.com/query/latest", "routes": [ { "icon": "Network", "url": "/demo/tanstack-query", "name": "TanStack Query", "path": "src/routes/demo/tanstack-query.tsx", "jsName": "TanStackQueryDemo" } ], "integrations": [ { "type": "devtools", "path": "src/integrations/tanstack-query/devtools.tsx", "jsName": "TanStackQueryDevtools" } ], "id": "tanstack-query", "version": "0.0.0", "packageAdditions": { "dependencies": { "@tanstack/react-query": "latest", "@tanstack/react-query-devtools": "latest", "@tanstack/react-router-ssr-query": "latest" } }, "readmeIsEjs": false, "files": { "src/integrations/tanstack-query/devtools.tsx": "import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'\n\nexport default {\n name: 'Tanstack Query',\n render: ,\n}\n", "src/integrations/tanstack-query/root-provider.tsx.ejs": "<% if (addOnEnabled.tRPC) { %>\nimport type { ReactNode } from 'react'\nimport { QueryClient } from '@tanstack/react-query'\nimport superjson from \"superjson\";\nimport { createTRPCClient, httpBatchStreamLink } from \"@trpc/client\";\nimport { createTRPCOptionsProxy } from \"@trpc/tanstack-react-query\";\n\nimport type { TRPCRouter } from \"#/integrations/trpc/router\";\nimport { TRPCProvider } from '#/integrations/trpc/react'\n\nfunction getUrl() {\n const base = (() => {\n if (typeof window !== \"undefined\") return \"\";\n return `http://localhost:${process.env.PORT ?? 3000}`;\n })();\n return `${base}/api/trpc`;\n}\n\nexport const trpcClient = createTRPCClient({\n links: [\n httpBatchStreamLink({\n transformer: superjson,\n url: getUrl(),\n }),\n ],\n});\n\nexport function getContext() {\n const queryClient = new QueryClient({\n defaultOptions: {\n dehydrate: { serializeData: superjson.serialize },\n hydrate: { deserializeData: superjson.deserialize },\n },\n });\n\n const serverHelpers = createTRPCOptionsProxy({\n client: trpcClient,\n queryClient: queryClient,\n });\n const context = {\n queryClient,\n trpc: serverHelpers,\n }\n\n return context\n}\n\nexport default function TanstackQueryProvider({\n children,\n context,\n}: {\n children: ReactNode,\n context: ReturnType\n}) {\n const { queryClient } = context\n\n return (\n \n {children}\n \n )\n}\n<% } else { %>\nimport { QueryClient } from '@tanstack/react-query'\n\nexport function getContext() {\n const queryClient = new QueryClient();\n\n return {\n queryClient,\n }\n}\nexport default function TanstackQueryProvider() {}\n<% } %>\n", "src/routes/demo/tanstack-query.tsx.ejs": "<% if (addOnEnabled['start']) {\n/** Start todos implementation */ \n%>import { useCallback, useState } from 'react'\nimport { createFileRoute } from '@tanstack/react-router'\nimport { useQuery, useMutation } from '@tanstack/react-query'\n\nexport const Route = createFileRoute('/demo/tanstack-query')({\n component: TanStackQueryDemo,\n})\n\ntype Todo = {\n id: number\n name: string\n}\n\nfunction TanStackQueryDemo() {\n const { data, refetch } = useQuery({\n queryKey: ['todos'],\n queryFn: () => fetch('/demo/api/tq-todos').then((res) => res.json()),\n initialData: [],\n })\n\n const { mutate: addTodo } = useMutation({\n mutationFn: (todo: string) =>\n fetch('/demo/api/tq-todos', {\n method: 'POST',\n body: JSON.stringify(todo),\n }).then((res) => res.json()),\n onSuccess: () => refetch(),\n })\n\n const [todo, setTodo] = useState('')\n\n const submitTodo = useCallback(async () => {\n await addTodo(todo)\n setTodo('')\n }, [addTodo, todo])\n\n return (\n
\n
\n

TanStack Query

\n

TanStack Query Todos

\n
    \n {data?.map((t) => (\n
  • \n {t.name}\n
  • \n ))}\n
\n
\n setTodo(e.target.value)}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n submitTodo()\n }\n }}\n placeholder=\"Enter a new todo...\"\n className=\"demo-input\"\n />\n \n Add todo\n \n
\n
\n
\n )\n}\n<% } else {\n/** Simple in-memory query implementation */\n%>import { <% if (fileRouter) { %>createFileRoute<% } else { %>createRoute<% } %> } from '@tanstack/react-router'\nimport { useQuery } from '@tanstack/react-query'\n<% if (codeRouter) { %>\nimport type { RootRoute } from '@tanstack/react-router'\n<% } else { %>\nexport const Route = createFileRoute('/demo/tanstack-query')({\n component: TanStackQueryDemo,\n})\n<% } %>\nfunction TanStackQueryDemo() {\n const { data } = useQuery({\n queryKey: ['todos'],\n queryFn: () => Promise.resolve([\n { id: 1, name: 'Alice' },\n { id: 2, name: 'Bob' },\n { id: 3, name: 'Charlie' },\n ]),\n initialData: [],\n })\n\n return (\n
\n
\n

TanStack Query

\n

\n TanStack Query Simple Promise Handling\n

\n
    \n {data.map((todo) => (\n
  • \n {todo.name}\n
  • \n ))}\n
\n
\n
\n )\n}\n\n<% if (codeRouter) { %>\nexport default (parentRoute: RootRoute) => createRoute({\n path: '/demo/tanstack-query',\n component: TanStackQueryDemo,\n getParentRoute: () => parentRoute,\n})\n<% } %>\n<% } %>\n" }, "deletedFiles": [], "smallLogo": "" } satisfies AddOnCompiled