// Generated by scripts/generate-manifest.mjs. Do not edit by hand.
import type { AddOnCompiled } from '../../../../../types.js'

type TemplateRecord = Record<string, any>
type TemplateAddOn = TemplateRecord & {
  integrations?: Array<TemplateRecord>
  routes?: Array<TemplateRecord>
}

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<string, any>
  addOnOption: Record<string, any>
  addOns: Array<TemplateAddOn>
  integrations: Array<TemplateRecord>
  routes: Array<TemplateRecord>
  getPackageManagerAddScript: (...args: Array<any>) => string
  getPackageManagerRunScript: (...args: Array<any>) => string
  getPackageManagerExecuteScript: (...args: Array<any>) => string
  relativePath: (...args: Array<any>) => string
  integrationImportContent: (...args: Array<any>) => string
  integrationImportCode: (...args: Array<any>) => 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 '&amp;'
      case '<':
        return '&lt;'
      case '>':
        return '&gt;'
      case '"':
        return '&#34;'
      case "'":
        return '&#39;'
      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}`
}



const templateRenderers: Record<string, TemplateRenderer> = {

}

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": "Apollo Client",
  "description": "Integrate Apollo Client with streaming SSR support for GraphQL data fetching.",
  "phase": "add-on",
  "modes": [
    "file-router"
  ],
  "type": "add-on",
  "category": "api",
  "color": "#311C87",
  "priority": 15,
  "link": "https://github.com/apollographql/apollo-client-integrations/tree/main/packages/tanstack-start",
  "routes": [
    {
      "icon": "Network",
      "url": "/demo/apollo-client",
      "name": "Apollo Client",
      "path": "src/routes/demo.apollo-client.tsx",
      "jsName": "ApolloClientDemo"
    }
  ],
  "id": "apollo-client",
  "version": "0.0.0",
  "packageAdditions": {
    "dependencies": {
      "@apollo/client": "^4.1.6",
      "@apollo/client-integration-tanstack-start": "^0.14.4-rc.0",
      "graphql": "^16.10.0",
      "rxjs": "^7.8.2"
    }
  },
  "readme": "# Apollo Client Integration\n\nThis add-on integrates Apollo Client with TanStack Start to provide modern streaming SSR support for GraphQL data fetching.\n\n## Dependencies\n\nThe following packages are automatically installed:\n\n- `@apollo/client` - Apollo Client core\n- `@apollo/client-integration-tanstack-start` - TanStack Start integration\n- `graphql` - GraphQL implementation\n\n## Configuration\n\n### 1. GraphQL Endpoint\n\nConfigure your GraphQL API endpoint in `src/router.tsx`:\n\n```tsx\n// Configure Apollo Client\nconst apolloClient = new ApolloClient({\n  cache: new InMemoryCache(),\n  link: new HttpLink({\n    uri: 'https://your-graphql-api.example.com/graphql', // Update this!\n  }),\n})\n```\n\nYou can use environment variables by creating a `.env.local` file:\n\n```bash\nVITE_GRAPHQL_ENDPOINT=https://your-api.com/graphql\n```\n\nThe default configuration already uses this pattern:\n\n```tsx\nuri: import.meta.env.VITE_GRAPHQL_ENDPOINT ||\n  'https://your-graphql-api.example.com/graphql'\n```\n\n## Usage Patterns\n\n### Pattern 1: Loader with preloadQuery (Recommended for SSR)\n\nUse `preloadQuery` in route loaders for optimal streaming SSR performance:\n\n```tsx\nimport { gql, TypedDocumentNode } from '@apollo/client'\nimport { useReadQuery } from '@apollo/client/react'\nimport { createFileRoute } from '@tanstack/react-router'\n\nconst MY_QUERY: TypedDocumentNode<{\n  posts: { id: string; title: string; content: string }[]\n}> = gql`\n  query GetData {\n    posts {\n      id\n      title\n      content\n    }\n  }\n`\n\nexport const Route = createFileRoute('/my-route')({\n  component: RouteComponent,\n  loader: ({ context: { preloadQuery } }) => {\n    const queryRef = preloadQuery(MY_QUERY, {\n      variables: {},\n    })\n    return { queryRef }\n  },\n})\n\nfunction RouteComponent() {\n  const { queryRef } = Route.useLoaderData()\n  const { data } = useReadQuery(queryRef)\n\n  return <div>{/* render your data */}</div>\n}\n```\n\n### Pattern 2: useSuspenseQuery\n\nUse `useSuspenseQuery` directly in components with automatic suspense support:\n\n```tsx\nimport { gql, TypedDocumentNode } from '@apollo/client'\nimport { useSuspenseQuery } from '@apollo/client/react'\nimport { createFileRoute } from '@tanstack/react-router'\n\nconst MY_QUERY: TypedDocumentNode<{\n  posts: { id: string; title: string }[]\n}> = gql`\n  query GetData {\n    posts {\n      id\n      title\n    }\n  }\n`\n\nexport const Route = createFileRoute('/my-route')({\n  component: RouteComponent,\n})\n\nfunction RouteComponent() {\n  const { data } = useSuspenseQuery(MY_QUERY)\n\n  return <div>{/* render your data */}</div>\n}\n```\n\n### Pattern 3: Manual Refetching\n\n```tsx\nimport { useQueryRefHandlers, useReadQuery } from '@apollo/client/react'\n\nfunction MyComponent() {\n  const { queryRef } = Route.useLoaderData()\n  const { refetch } = useQueryRefHandlers(queryRef)\n  const { data } = useReadQuery(queryRef)\n\n  return (\n    <div>\n      <button onClick={() => refetch()}>Refresh</button>\n      {/* render data */}\n    </div>\n  )\n}\n```\n\n## Important Notes\n\n### SSR Optimization\n\nThe integration automatically handles:\n\n- Query deduplication across server and client\n- Streaming SSR with `@defer` directive support\n- Proper cache hydration\n\n## Learn More\n\n- [Apollo Client Documentation](https://www.apollographql.com/docs/react)\n- [@apollo/client-integration-tanstack-start](https://www.npmjs.com/package/@apollo/client-integration-tanstack-start)\n\n## Demo\n\nVisit `/demo/apollo-client` in your application to see a working example of Apollo Client integration.\n",
  "readmeIsEjs": false,
  "files": {
    "src/routes/demo.apollo-client.tsx": "import { gql, TypedDocumentNode } from '@apollo/client'\nimport { useReadQuery } from '@apollo/client/react'\nimport { createFileRoute } from '@tanstack/react-router'\nimport React from 'react'\n\n// Example GraphQL query - replace with your own schema\nconst EXAMPLE_QUERY: TypedDocumentNode<{\n  continents: { __typename: string; code: string; name: string }\n}> = gql`\n  query ExampleQuery {\n    continents {\n      code\n      name\n    }\n  }\n`\n\nexport const Route = createFileRoute('/demo/apollo-client')({\n  component: RouteComponent,\n  loader: ({ context: { preloadQuery } }) => {\n    // Preload the query in the loader for optimal performance\n    const queryRef = preloadQuery(EXAMPLE_QUERY, {\n      variables: {},\n    })\n    return {\n      queryRef,\n    }\n  },\n})\n\nfunction RouteComponent() {\n  const { queryRef } = Route.useLoaderData()\n  const { data } = useReadQuery(queryRef)\n\n  return (\n    <main className=\"demo-page\">\n      <section className=\"demo-panel\">\n        <p className=\"island-kicker mb-2\">GraphQL</p>\n        <h1 className=\"demo-title mb-6\">Apollo Client Demo</h1>\n        <div className=\"demo-alert mb-4\">\n          <p className=\"font-bold\">Apollo Client is configured!</p>\n          <p className=\"text-sm mt-2\">\n            This demo uses <code>preloadQuery</code> in the loader and{' '}\n            <code>useReadQuery</code> in the component for optimal streaming SSR\n            performance.\n          </p>\n        </div>\n        <div className=\"demo-code-block\">\n          <h3 className=\"font-bold mb-2\">Query Result:</h3>\n          <pre className=\"text-sm overflow-x-auto\">\n            {JSON.stringify(data, null, 2)}\n          </pre>\n        </div>\n        <div className=\"demo-muted mt-4 text-sm\">\n          <p className=\"font-medium text-[var(--sea-ink)]\">Next steps:</p>\n          <ul className=\"list-disc ml-6 mt-2\">\n            <li>\n              Configure your GraphQL endpoint in <code>src/router.tsx</code>\n            </li>\n            <li>Replace the example query with your actual GraphQL schema</li>\n            <li>\n              Learn more:{' '}\n              <a href=\"https://www.apollographql.com/docs/react\">\n                Apollo Client Docs\n              </a>\n            </li>\n          </ul>\n        </div>\n      </section>\n    </main>\n  )\n}\n"
  },
  "deletedFiles": [],
  "smallLogo": "<svg width=\"238\" height=\"238\" viewBox=\"0 0 238 238\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<g clip-path=\"url(#clip0_3682_2767)\">\n<path d=\"M169.918 151.249L164.506 135.869L157.379 115.617L152.223 100.96L145.474 81.779L137.633 59.5H99.6029L93.5324 76.7516L88.1203 92.1321L61.2402 168.518H86.3228L94.1915 146.222H132.229L125.479 127.04H100.913L106.069 112.384L116.837 81.779L118.618 76.7134L120.398 81.779L150.906 168.5L150.913 168.518H175.995L169.918 151.249Z\" fill=\"#15252D\"/>\n<path d=\"M222.007 60.4327C221.377 59.3152 220.328 58.4938 219.092 58.1493C217.857 57.8048 216.534 57.9653 215.417 58.5956C214.299 59.2259 213.478 60.2743 213.133 61.5102C212.789 62.7461 212.949 64.0682 213.58 65.1858C226.408 87.9957 230.592 114.663 225.366 140.306C220.141 165.948 205.854 188.851 185.122 204.822C164.39 220.792 138.6 228.761 112.472 227.271C86.3451 225.78 61.6284 214.93 42.8471 196.706C24.0658 178.481 12.4764 154.102 10.2003 128.032C7.92431 101.961 15.1139 75.9426 30.4531 54.7395C45.7923 33.5363 68.2548 18.567 93.7287 12.5717C119.203 6.57632 145.984 9.95607 169.169 22.0923C168.426 25.5125 168.92 29.0854 170.561 32.1766C172.202 35.2678 174.886 37.6774 178.136 38.9777C181.385 40.278 184.99 40.3849 188.311 39.2794C191.632 38.1739 194.453 35.9275 196.275 32.9389C198.097 29.9504 198.801 26.4131 198.262 22.9548C197.723 19.4966 195.976 16.3412 193.331 14.0486C190.687 11.7561 187.315 10.4748 183.815 10.4321C180.316 10.3895 176.914 11.5883 174.214 13.8157C149.014 0.453404 119.841 -3.37605 92.0453 3.02956C64.2498 9.43517 39.6953 25.6465 22.8848 48.6905C6.07431 71.7345 -1.86527 100.066 0.522193 128.49C2.90965 156.914 15.4641 183.525 35.8831 203.442C56.3021 223.359 83.2168 235.247 111.691 236.926C140.166 238.605 168.291 229.963 190.91 212.584C213.528 195.205 229.123 170.255 234.835 142.308C240.547 114.362 235.992 85.2934 222.007 60.4333V60.4327Z\" fill=\"#15252D\"/>\n</g>\n<defs>\n<clipPath id=\"clip0_3682_2767\">\n<rect width=\"237.236\" height=\"237.236\" fill=\"white\"/>\n</clipPath>\n</defs>\n</svg>\n"
} satisfies AddOnCompiled