exploration for Apollo Client integration

examples/react/start-basic-apollo-client/.gitignore

@@ -0,0 +1,22 @@
+node_modules
+package-lock.json
+yarn.lock
+
+.DS_Store
+.cache
+.env
+.vercel
+.output
+.vinxi
+
+/build/
+/api/
+/server/build
+/public/build
+.vinxi
+# Sentry Config File
+.env.sentry-build-plugin
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

examples/react/start-basic-apollo-client/.prettierignore

@@ -0,0 +1,4 @@
+**/build
+**/public
+pnpm-lock.yaml
+routeTree.gen.ts

examples/react/start-basic-apollo-client/README.md

@@ -0,0 +1,72 @@
+# Welcome to TanStack.com!
+
+This site is built with TanStack Router!
+
+- [TanStack Router Docs](https://tanstack.com/router)
+
+It's deployed automagically with Vercel!
+
+- [Vercel](https://vercel.com/)
+
+## Development
+
+From your terminal:
+
+```sh
+pnpm install
+pnpm dev
+```
+
+This starts your app in development mode, rebuilding assets on file changes.
+
+## Editing and previewing the docs of TanStack projects locally
+
+The documentations for all TanStack projects except for `React Charts` are hosted on [https://tanstack.com](https://tanstack.com), powered by this TanStack Router app.
+In production, the markdown doc pages are fetched from the GitHub repos of the projects, but in development they are read from the local file system.
+
+Follow these steps if you want to edit the doc pages of a project (in these steps we'll assume it's [`TanStack/form`](https://github.com/tanstack/form)) and preview them locally :
+
+1. Create a new directory called `tanstack`.
+
+```sh
+mkdir tanstack
+```
+
+2. Enter the directory and clone this repo and the repo of the project there.
+
+```sh
+cd tanstack
+git clone git@github.com:TanStack/tanstack.com.git
+git clone git@github.com:TanStack/form.git
+```
+
+> [!NOTE]
+> Your `tanstack` directory should look like this:
+>
+> ```
+> tanstack/
+>    |
+>    +-- form/
+>    |
+>    +-- tanstack.com/
+> ```
+
+> [!WARNING]
+> Make sure the name of the directory in your local file system matches the name of the project's repo. For example, `tanstack/form` must be cloned into `form` (this is the default) instead of `some-other-name`, because that way, the doc pages won't be found.
+
+3. Enter the `tanstack/tanstack.com` directory, install the dependencies and run the app in dev mode:
+
+```sh
+cd tanstack.com
+pnpm i
+# The app will run on https://localhost:3000 by default
+pnpm dev
+```
+
+4. Now you can visit http://localhost:3000/form/latest/docs/overview in the browser and see the changes you make in `tanstack/form/docs`.
+
+> [!NOTE]
+> The updated pages need to be manually reloaded in the browser.
+
+> [!WARNING]
+> You will need to update the `docs/config.json` file (in the project's repo) if you add a new doc page!

examples/react/start-basic-apollo-client/app.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from '@tanstack/start/config'
+import tsConfigPaths from 'vite-tsconfig-paths'
+
+export default defineConfig({
+  vite: {
+    plugins: [
+      tsConfigPaths({
+        projects: ['./tsconfig.json'],
+      }),
+    ],
+  },
+})

examples/react/start-basic-apollo-client/app/api.ts

@@ -0,0 +1,6 @@
+import {
+  createStartAPIHandler,
+  defaultAPIFileRouteHandler,
+} from '@tanstack/start/api'
+
+export default createStartAPIHandler(defaultAPIFileRouteHandler)

examples/react/start-basic-apollo-client/app/client.tsx

@@ -0,0 +1,8 @@
+/// <reference types="vinxi/types/client" />
+import { hydrateRoot } from 'react-dom/client'
+import { StartClient } from '@tanstack/start'
+import { createRouter } from './router'
+
+const router = createRouter()
+
+hydrateRoot(document.getElementById('root')!, <StartClient router={router} />)

examples/react/start-basic-apollo-client/app/components/ApolloProvider.tsx

@@ -0,0 +1,98 @@
+import {
+  WrapApolloProvider,
+  QueryEvent,
+  DataTransportContext,
+} from '@apollo/client-react-streaming'
+import { useRouter } from '@tanstack/react-router'
+import {
+  ComponentProps,
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+} from 'react'
+
+const APOLLO_EVENT_PREFIX = '@@apollo.event/'
+const APOLLO_HOOK_PREFIX = '@@apollo.hook/'
+
+const handledEvents = new WeakSet<object>()
+
+export const ApolloProvider = WrapApolloProvider((props) => {
+  const router = useRouter()
+
+  const consumeBackPressure = useCallback(() => {
+    for (const key of router.streamedKeys) {
+      if (key.startsWith(APOLLO_EVENT_PREFIX)) {
+        const streamedValue = router.getStreamedValue(key)
+        if (
+          streamedValue &&
+          typeof streamedValue === 'object' &&
+          !handledEvents.has(streamedValue) &&
+          props.onQueryEvent
+        ) {
+          handledEvents.add(streamedValue)
+          props.onQueryEvent(streamedValue as QueryEvent)
+        }
+      }
+    }
+  }, [router, props.onQueryEvent])
+
+  if (router.isServer) {
+    props.registerDispatchRequestStarted!(({ event, observable }) => {
+      router.streamValue(
+        `${APOLLO_EVENT_PREFIX}${event.id}/${event.type}`,
+        event satisfies QueryEvent,
+      )
+      observable.subscribe({
+        next(event) {
+          router.streamValue(
+            `${APOLLO_EVENT_PREFIX}${event.id}/${event.type}`,
+            event satisfies QueryEvent,
+          )
+        },
+      })
+    })
+  } else {
+    // this needs to happen synchronously before the render continues
+    // so "loading" is kicked off before the respecitve component is rendered
+    consumeBackPressure()
+  }
+
+  useEffect(() => {
+    consumeBackPressure()
+    return router.subscribe('onStreamedValue', ({ key }) => {
+      if (!key.startsWith(APOLLO_EVENT_PREFIX)) return
+      const streamedValue = router.getStreamedValue(key)
+      if (streamedValue && props.onQueryEvent) {
+        handledEvents.add(streamedValue)
+        props.onQueryEvent(streamedValue as QueryEvent)
+      }
+    })
+  }, [consumeBackPressure, router, props.onQueryEvent])
+
+  const dataTransport = useMemo(() => ({ useStaticValueRef }), [])
+
+  return (
+    <DataTransportContext.Provider value={dataTransport}>
+      {props.children}
+    </DataTransportContext.Provider>
+  )
+})
+
+function useStaticValueRef<T>(value: T) {
+  const router = useRouter()
+  const key = APOLLO_HOOK_PREFIX + useId()
+  const dataValue =
+    !router.isServer && router.streamedKeys.has(key)
+      ? (router.getStreamedValue(key) as T)
+      : value
+  const dataRef = useRef(dataValue)
+
+  if (router.isServer) {
+    if (!router.streamedKeys.has(key)) {
+      router.streamValue(key, value)
+    }
+  }
+  return dataRef
+}

examples/react/start-basic-apollo-client/app/components/DefaultCatchBoundary.tsx

@@ -0,0 +1,53 @@
+import {
+  ErrorComponent,
+  ErrorComponentProps,
+  Link,
+  rootRouteId,
+  useMatch,
+  useRouter,
+} from '@tanstack/react-router'
+
+export function DefaultCatchBoundary({ error }: ErrorComponentProps) {
+  const router = useRouter()
+  const isRoot = useMatch({
+    strict: false,
+    select: (state) => state.id === rootRouteId,
+  })
+
+  console.error(error)
+
+  return (
+    <div className="min-w-0 flex-1 p-4 flex flex-col items-center justify-center gap-6">
+      <ErrorComponent error={error} />
+      <div className="flex gap-2 items-center flex-wrap">
+        <button
+          onClick={() => {
+            router.invalidate()
+          }}
+          className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
+        >
+          Try Again
+        </button>
+        {isRoot ? (
+          <Link
+            to="/"
+            className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
+          >
+            Home
+          </Link>
+        ) : (
+          <Link
+            to="/"
+            className={`px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`}
+            onClick={(e) => {
+              e.preventDefault()
+              window.history.back()
+            }}
+          >
+            Go Back
+          </Link>
+        )}
+      </div>
+    </div>
+  )
+}

examples/react/start-basic-apollo-client/app/components/NotFound.tsx

@@ -0,0 +1,25 @@
+import { Link } from '@tanstack/react-router'
+
+export function NotFound({ children }: { children?: any }) {
+  return (
+    <div className="space-y-2 p-2">
+      <div className="text-gray-600 dark:text-gray-400">
+        {children || <p>The page you are looking for does not exist.</p>}
+      </div>
+      <p className="flex items-center gap-2 flex-wrap">
+        <button
+          onClick={() => window.history.back()}
+          className="bg-emerald-500 text-white px-2 py-1 rounded uppercase font-black text-sm"
+        >
+          Go back
+        </button>
+        <Link
+          to="/"
+          className="bg-cyan-600 text-white px-2 py-1 rounded uppercase font-black text-sm"
+        >
+          Start Over
+        </Link>
+      </p>
+    </div>
+  )
+}