apollo client add-on

frameworks/react-cra/add-ons/apollo-client/README.md

@@ -0,0 +1,150 @@
+# Apollo Client Integration
+
+This add-on integrates Apollo Client with TanStack Start to provide modern streaming SSR support for GraphQL data fetching.
+
+## Dependencies
+
+The following packages are automatically installed:
+
+- `@apollo/client` - Apollo Client core
+- `@apollo/client-integration-tanstack-start` - TanStack Start integration
+- `graphql` - GraphQL implementation
+
+## Configuration
+
+### 1. GraphQL Endpoint
+
+Configure your GraphQL API endpoint in `src/router.tsx`:
+
+```tsx
+// Configure Apollo Client
+const apolloClient = new ApolloClient({
+  cache: new InMemoryCache(),
+  link: new HttpLink({
+    uri: 'https://your-graphql-api.example.com/graphql', // Update this!
+  }),
+})
+```
+
+You can use environment variables by creating a `.env.local` file:
+
+```bash
+VITE_GRAPHQL_ENDPOINT=https://your-api.com/graphql
+```
+
+The default configuration already uses this pattern:
+
+```tsx
+uri: import.meta.env.VITE_GRAPHQL_ENDPOINT ||
+  'https://your-graphql-api.example.com/graphql'
+```
+
+## Usage Patterns
+
+### Pattern 1: Loader with preloadQuery (Recommended for SSR)
+
+Use `preloadQuery` in route loaders for optimal streaming SSR performance:
+
+```tsx
+import { gql, TypedDocumentNode } from '@apollo/client'
+import { useReadQuery } from '@apollo/client/react'
+import { createFileRoute } from '@tanstack/react-router'
+
+const MY_QUERY: TypedDocumentNode<{
+  posts: { id: string; title: string; content: string }[]
+}> = gql`
+  query GetData {
+    posts {
+      id
+      title
+      content
+    }
+  }
+`
+
+export const Route = createFileRoute('/my-route')({
+  component: RouteComponent,
+  loader: ({ context: { preloadQuery } }) => {
+    const queryRef = preloadQuery(MY_QUERY, {
+      variables: {},
+    })
+    return { queryRef }
+  },
+})
+
+function RouteComponent() {
+  const { queryRef } = Route.useLoaderData()
+  const { data } = useReadQuery(queryRef)
+
+  return <div>{/* render your data */}</div>
+}
+```
+
+### Pattern 2: useSuspenseQuery
+
+Use `useSuspenseQuery` directly in components with automatic suspense support:
+
+```tsx
+import { gql, TypedDocumentNode } from '@apollo/client'
+import { useSuspenseQuery } from '@apollo/client/react'
+import { createFileRoute } from '@tanstack/react-router'
+
+const MY_QUERY: TypedDocumentNode<{
+  posts: { id: string; title: string }[]
+}> = gql`
+  query GetData {
+    posts {
+      id
+      title
+    }
+  }
+`
+
+export const Route = createFileRoute('/my-route')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  const { data } = useSuspenseQuery(MY_QUERY)
+
+  return <div>{/* render your data */}</div>
+}
+```
+
+### Pattern 3: Manual Refetching
+
+```tsx
+import { useQueryRefHandlers, useReadQuery } from '@apollo/client/react'
+
+function MyComponent() {
+  const { queryRef } = Route.useLoaderData()
+  const { refetch } = useQueryRefHandlers(queryRef)
+  const { data } = useReadQuery(queryRef)
+
+  return (
+    <div>
+      <button onClick={() => refetch()}>Refresh</button>
+      {/* render data */}
+    </div>
+  )
+}
+```
+
+## Important Notes
+
+### SSR Optimization
+
+The integration automatically handles:
+
+- Query deduplication across server and client
+- Streaming SSR with `@defer` directive support
+- Proper cache hydration
+
+## Learn More
+
+- [Apollo Client Documentation](https://www.apollographql.com/docs/react)
+- [@apollo/client-integration-tanstack-start](https://www.npmjs.com/package/@apollo/client-integration-tanstack-start)
+
+## Demo
+
+Visit `/demo/apollo-client` in your application to see a working example of Apollo Client integration.

frameworks/react-cra/add-ons/apollo-client/assets/src/routes/demo.apollo-client.tsx

@@ -0,0 +1,75 @@
+import { gql, TypedDocumentNode } from '@apollo/client'
+import { useReadQuery } from '@apollo/client/react'
+import { createFileRoute } from '@tanstack/react-router'
+import React from 'react'
+
+// Example GraphQL query - replace with your own schema
+const EXAMPLE_QUERY: TypedDocumentNode<{
+  continents: { __typename: string; code: string; name: string }
+}> = gql`
+  query ExampleQuery {
+    continents {
+      code
+      name
+    }
+  }
+`
+
+export const Route = createFileRoute('/demo/apollo-client')({
+  component: RouteComponent,
+  loader: ({ context: { preloadQuery } }) => {
+    // Preload the query in the loader for optimal performance
+    const queryRef = preloadQuery(EXAMPLE_QUERY, {
+      variables: {},
+    })
+    return {
+      queryRef,
+    }
+  },
+})
+
+function RouteComponent() {
+  const { queryRef } = Route.useLoaderData()
+  const { data } = useReadQuery(queryRef)
+
+  return (
+    <div className="p-4">
+      <h2 className="text-2xl font-bold mb-4">Apollo Client Demo</h2>
+      <div className="bg-blue-100 border border-blue-400 text-blue-700 px-4 py-3 rounded mb-4">
+        <p className="font-bold">Apollo Client is configured!</p>
+        <p className="text-sm mt-2">
+          This demo uses{' '}
+          <code className="bg-blue-200 px-1 rounded">preloadQuery</code> in the
+          loader and{' '}
+          <code className="bg-blue-200 px-1 rounded">useReadQuery</code> in the
+          component for optimal streaming SSR performance.
+        </p>
+      </div>
+      <div className="bg-gray-100 p-4 rounded">
+        <h3 className="font-bold mb-2">Query Result:</h3>
+        <pre className="text-sm overflow-x-auto">
+          {JSON.stringify(data, null, 2)}
+        </pre>
+      </div>
+      <div className="mt-4 text-sm text-gray-600">
+        <p>📝 Next steps:</p>
+        <ul className="list-disc ml-6 mt-2">
+          <li>
+            Configure your GraphQL endpoint in{' '}
+            <code className="bg-gray-200 px-1 rounded">src/router.tsx</code>
+          </li>
+          <li>Replace the example query with your actual GraphQL schema</li>
+          <li>
+            Learn more:{' '}
+            <a
+              href="https://www.apollographql.com/docs/react"
+              className="text-blue-600 hover:underline"
+            >
+              Apollo Client Docs
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  )
+}

frameworks/react-cra/add-ons/apollo-client/info.json

@@ -0,0 +1,19 @@
+{
+  "name": "Apollo Client",
+  "description": "Integrate Apollo Client with streaming SSR support for GraphQL data fetching.",
+  "phase": "add-on",
+  "modes": ["file-router"],
+  "type": "add-on",
+  "priority": 15,
+  "link": "https://github.com/apollographql/apollo-client-integrations/tree/main/packages/tanstack-start",
+  "dependsOn": ["start"],
+  "routes": [
+    {
+      "icon": "Network",
+      "url": "/demo/apollo-client",
+      "name": "Apollo Client",
+      "path": "src/routes/demo.apollo-client.tsx",
+      "jsName": "ApolloClientDemo"
+    }
+  ]
+}

frameworks/react-cra/add-ons/apollo-client/package.json

@@ -0,0 +1,8 @@
+{
+  "dependencies": {
+    "@apollo/client": "^4.0.0",
+    "@apollo/client-integration-tanstack-start": "^0.14.2-rc.0",
+    "graphql": "^16.10.0",
+    "rxjs": "^7.8.2"
+  }
+}

frameworks/react-cra/add-ons/convex/package.json

@@ -1,7 +1,7 @@
 {
   "dependencies": {
-    "@convex-dev/react-query": "0.0.0-alpha.11",
+    "@convex-dev/react-query": "0.1.0",
     "convex": "^1.27.3",
-    "lucide-react": "^0.544.0"
+    "lucide-react": "^0.561.0"
   }
 }

frameworks/react-cra/add-ons/db/package.json

@@ -1,6 +1,6 @@
 {
   "dependencies": {
-    "@tanstack/query-db-collection": "^0.2.0",
+    "@tanstack/query-db-collection": "^1.0.8",
     "@tanstack/react-db": "^0.1.1",
     "zod": "^4.0.14"
   }

frameworks/react-cra/add-ons/mcp/package.json

@@ -1,6 +1,6 @@
 {
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.17.0",
-    "zod": "4.1.11"
+    "zod": "4.2.1"
   }
 }

frameworks/react-cra/add-ons/neon/package.json

@@ -1,6 +1,6 @@
 {
   "dependencies": {
     "@neondatabase/serverless": "^1.0.0",
-    "@neondatabase/vite-plugin-postgres": "^0.2.0"
+    "@neondatabase/vite-plugin-postgres": "^0.5.0"
   }
 }

frameworks/react-cra/add-ons/shadcn/package.json

@@ -2,7 +2,7 @@
   "dependencies": {
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.544.0",
+    "lucide-react": "^0.561.0",
     "tailwind-merge": "^3.0.2",
     "tw-animate-css": "^1.3.6"
   }

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

@@ -1,6 +1,13 @@
 import { createRouter } from '@tanstack/react-router'<% if (addOnEnabled['tanstack-query']) { %>
 import { setupRouterSsrQueryIntegration } from '@tanstack/react-router-ssr-query'
 import * as TanstackQuery from "./integrations/tanstack-query/root-provider";
+<% } %><% if (addOnEnabled['apollo-client']) { %>
+import {
+  routerWithApolloClient,
+  ApolloClient,
+  InMemoryCache,
+} from "@apollo/client-integration-tanstack-start";
+import { HttpLink } from "@apollo/client";
 <% } %>
 <% if (addOnEnabled.sentry) { %>
 import * as Sentry from "@sentry/tanstackstart-react";
@@ -11,22 +18,39 @@ import { routeTree } from './routeTree.gen'
 
 // Create a new router instance
 export const getRouter = () => {
+<% if (addOnEnabled['apollo-client']) { %>
+  // Configure Apollo Client
+  const apolloClient = new ApolloClient({
+    cache: new InMemoryCache(),
+    link: new HttpLink({
+      uri: import.meta.env.VITE_GRAPHQL_ENDPOINT || "https://countries.trevorblades.com/"
+    }),
+  });
+<% } %>
 <% if (addOnEnabled['tanstack-query']) { %>
-    const rqContext = TanstackQuery.getContext();
-
-    const router = createRouter({
-        routeTree,
-        context: { ...rqContext },
-        defaultPreload: "intent",
-      })
+  const rqContext = TanstackQuery.getContext();
+<% } %>
 
-    setupRouterSsrQueryIntegration({router, queryClient: rqContext.queryClient})
-<% } else { %>
   const router = createRouter({
     routeTree,
+    context: {
+<% if (addOnEnabled['apollo-client']) { %>
+      ...routerWithApolloClient.defaultContext,
+<% } %>
+<% if (addOnEnabled['tanstack-query']) { %>
+      ...rqContext,
+<% } %>
+    },
+<% if (addOnEnabled['tanstack-query'] || addOnEnabled['apollo-client']) { %>
+    defaultPreload: "intent",
+<% } else { %>
     scrollRestoration: true,
     defaultPreloadStaleTime: 0,
+<% } %>
   })
+
+<% if (addOnEnabled['tanstack-query']) { %>
+  setupRouterSsrQueryIntegration({router, queryClient: rqContext.queryClient})
 <% } %>
 
 <% if (addOnEnabled.sentry) { %>
@@ -40,5 +64,5 @@ export const getRouter = () => {
   }
 <% } %>
 
-  return router;
+  return <% if (addOnEnabled['apollo-client']) { %>routerWithApolloClient(router, apolloClient)<% } else { %>router<% } %>;
 }

frameworks/react-cra/add-ons/start/package.json

@@ -6,7 +6,7 @@
   "dependencies": {
     "@tanstack/react-router-ssr-query": "^1.131.7",
     "@tanstack/react-start": "^1.132.0",
-    "vite-tsconfig-paths": "^5.1.4",
-    "lucide-react": "^0.544.0"
+    "vite-tsconfig-paths": "^6.0.2",
+    "lucide-react": "^0.561.0"
   }
 }