diff --git a/integration-test/package.json b/integration-test/package.json index 2bbf15d8..6c8e6b33 100644 --- a/integration-test/package.json +++ b/integration-test/package.json @@ -5,6 +5,7 @@ "@apollo/client-react-streaming": "exec:./shared/build-client-react-streaming.cjs", "@apollo/experimental-nextjs-app-support": "exec:./shared/build-experimental-nextjs-app-support.cjs", "@apollo/client-integration-react-router": "exec:./shared/build-client-integration-react-router.cjs", + "@apollo/client-integration-tanstack-start": "exec:./shared/build-client-integration-tanstack-start.cjs", "graphql": "17.0.0-alpha.2", "turbo-stream": "npm:@phryneas/turbo-stream@2.4.1-pr.51.1.d24f66e", "@tanstack/react-router": "patch:@tanstack/react-router@npm%3A1.91.3#~/../.yarn/patches/@tanstack-react-router-npm-1.91.3-8e077b923e.patch", @@ -14,7 +15,7 @@ "*" ], "scripts": { - "build:libs": "find . -regextype posix-extended -regex '.*/node_modules/@apollo/(client-react-streaming|experimental-nextjs-app-support|client-integration-react-router)' -printf 'rm -r %p\n' -exec rm -r {} +; glob \"../.yarn/cache/@apollo-*exec*\" \"$HOME/.yarn/berry/cache/@apollo-*exec*\" --cmd='rm -v' ; yarn" + "build:libs": "find . -regextype posix-extended -regex '.*/node_modules/@apollo/(client-react-streaming|experimental-nextjs-app-support|client-integration-react-router|client-integration-tanstack-start)' -printf 'rm -r %p\n' -exec rm -r {} +; glob \"../.yarn/cache/@apollo-*exec*\" \"$HOME/.yarn/berry/cache/@apollo-*exec*\" --cmd='rm -v' ; yarn" }, "devDependencies": { "glob": "^10.3.10" diff --git a/integration-test/shared/build-client-integration-tanstack-start.cjs b/integration-test/shared/build-client-integration-tanstack-start.cjs new file mode 100755 index 00000000..53d60845 --- /dev/null +++ b/integration-test/shared/build-client-integration-tanstack-start.cjs @@ -0,0 +1,26 @@ +/* +The integration tests need the latest version of the `@apollo/client-react-streaming` package. + +This script can be used with the `exec:` protocol (https://yarnpkg.com/protocol/exec) to build +the package. +*/ + +const { join } = require("node:path"); +const { $, cd, retry, sleep } = /** @type {typeof import('zx')} */ ( + require(require.resolve("zx", { paths: [process.env.PROJECT_CWD] })) +); + +$.stdio = "inherit"; + +(async function run() { + const monorepoRoot = join(process.env.PROJECT_CWD, ".."); + const archive = join(monorepoRoot, "packages/tanstack-start/archive.tgz"); + + // give the main build script a chance to kick in + await sleep(1000); + + await retry(120, "1s", () => $`test -f ${archive}`); + + cd(monorepoRoot); + await $`tar -x -z --strip-components=1 -f ${archive} -C ${execEnv.buildDir}`; +})(); diff --git a/integration-test/tanstack-start/app/router.tsx b/integration-test/tanstack-start/app/router.tsx index 2f107a47..78598308 100644 --- a/integration-test/tanstack-start/app/router.tsx +++ b/integration-test/tanstack-start/app/router.tsx @@ -1,12 +1,31 @@ import { createRouter as createTanStackRouter } from "@tanstack/react-router"; import { routeTree } from "./routeTree.gen"; +import { + routerWithApolloClient, + ApolloClient, + InMemoryCache, +} from "@apollo/client-integration-tanstack-start"; + +import { + loadErrorMessages, + loadDevMessages, +} from "@apollo/client/dev/index.js"; + +loadDevMessages(); +loadErrorMessages(); export function createRouter() { + const apolloClient = new ApolloClient({ + cache: new InMemoryCache(), + uri: "http://localhost:5173/graphql", + }); const router = createTanStackRouter({ routeTree, + context: {} as any, }); - return router; + // @ts-ignore need to investigate + return routerWithApolloClient(router, apolloClient); } declare module "@tanstack/react-router" { diff --git a/integration-test/tanstack-start/app/routes/__root.tsx b/integration-test/tanstack-start/app/routes/__root.tsx index 6bfeaa19..a11f4640 100644 --- a/integration-test/tanstack-start/app/routes/__root.tsx +++ b/integration-test/tanstack-start/app/routes/__root.tsx @@ -1,12 +1,17 @@ +import { type PreloadQueryFunction } from "@apollo/client"; +import { type ApolloClient } from "@apollo/client-integration-tanstack-start"; import { Outlet, ScrollRestoration, - createRootRoute, + createRootRouteWithContext, } from "@tanstack/react-router"; import { Meta, Scripts } from "@tanstack/start"; import type { ReactNode } from "react"; -export const Route = createRootRoute({ +export const Route = createRootRouteWithContext<{ + apolloClient: ApolloClient; + preloadQuery: PreloadQueryFunction; +}>()({ head: () => ({ meta: [ { diff --git a/integration-test/tanstack-start/app/routes/index.tsx b/integration-test/tanstack-start/app/routes/index.tsx index 7c762979..ec58fe83 100644 --- a/integration-test/tanstack-start/app/routes/index.tsx +++ b/integration-test/tanstack-start/app/routes/index.tsx @@ -1,47 +1,79 @@ -import * as fs from "node:fs"; -import { createFileRoute, useRouter } from "@tanstack/react-router"; -import { createServerFn } from "@tanstack/start"; - -const filePath = "count.txt"; - -async function readCount() { - return parseInt( - await fs.promises.readFile(filePath, "utf-8").catch(() => "0") - ); -} - -const getCount = createServerFn({ - method: "GET", -}).handler(() => { - return readCount(); -}); - -const updateCount = createServerFn({ method: "POST" }) - .validator((d: number) => d) - .handler(async ({ data }) => { - const count = await readCount(); - await fs.promises.writeFile(filePath, `${count + data}`); - }); +import { createFileRoute } from "@tanstack/react-router"; +import { DEFERRED_QUERY } from "@integration-test/shared/queries"; +import { + useApolloClient, + useQueryRefHandlers, + useReadQuery, +} from "@apollo/client/index.js"; +import { useTransition } from "react"; +import { reviveTransportedQueryRef } from "@apollo/client-react-streaming"; export const Route = createFileRoute("/")({ component: Home, - loader: async () => await getCount(), + loader: async ({ context: { preloadQuery } }) => { + const queryRef = preloadQuery(DEFERRED_QUERY, { + variables: { delayDeferred: 500 }, + }); + return { + queryRef, + }; + }, }); function Home() { - const router = useRouter(); - const state = Route.useLoaderData(); + const { queryRef } = Route.useLoaderData(); + + const ac = useApolloClient(); + + console.log({ queryRef }); + // @ts-ignore + reviveTransportedQueryRef(queryRef, ac); + console.log({ queryRef }); + + const { refetch } = useQueryRefHandlers(queryRef); + const [refetching, startTransition] = useTransition(); + const { data } = useReadQuery(queryRef); + const client = useApolloClient(); return ( - + <> + +

Queried in {data.env} environment

+ + ); } diff --git a/integration-test/tanstack-start/package.json b/integration-test/tanstack-start/package.json index 02cefc15..d7b0a42a 100644 --- a/integration-test/tanstack-start/package.json +++ b/integration-test/tanstack-start/package.json @@ -7,8 +7,12 @@ "start": "vinxi start" }, "dependencies": { + "@apollo/client": "^3.12.4", + "@apollo/client-integration-tanstack-start": "*", + "@integration-test/shared": "workspace:^", "@tanstack/react-router": "1.91.3", "@tanstack/start": "1.91.3", + "graphql": "^16.10.0", "react": "^19.0.0", "react-dom": "^19.0.0", "vinxi": "^0.5.1" diff --git a/integration-test/yarn.lock b/integration-test/yarn.lock index c31e5b99..46735b0d 100644 --- a/integration-test/yarn.lock +++ b/integration-test/yarn.lock @@ -50,6 +50,18 @@ __metadata: languageName: node linkType: hard +"@apollo/client-integration-tanstack-start@exec:./shared/build-client-integration-tanstack-start.cjs::locator=%40integration-test%2Froot%40workspace%3A.": + version: 0.11.5 + resolution: "@apollo/client-integration-tanstack-start@exec:./shared/build-client-integration-tanstack-start.cjs#./shared/build-client-integration-tanstack-start.cjs::hash=66d731&locator=%40integration-test%2Froot%40workspace%3A." + dependencies: + "@apollo/client-react-streaming": "npm:0.11.5" + peerDependencies: + "@tanstack/react-router": "*" + react: ^19 + checksum: 10/c99ecea3568fbf162166751c610b1da35aa51aeeda3538d23b8ca53b1c4e527994cc6bba574891ff136dc32faf4f6592dacafa5cb57a9a9abec75ec679addfc9 + languageName: node + linkType: hard + "@apollo/client-react-streaming@exec:./shared/build-client-react-streaming.cjs::locator=%40integration-test%2Froot%40workspace%3A.": version: 0.11.8-alpha.1 resolution: "@apollo/client-react-streaming@exec:./shared/build-client-react-streaming.cjs#./shared/build-client-react-streaming.cjs::hash=509995&locator=%40integration-test%2Froot%40workspace%3A." @@ -99,6 +111,43 @@ __metadata: languageName: node linkType: hard +"@apollo/client@npm:^3.12.4": + version: 3.12.4 + resolution: "@apollo/client@npm:3.12.4" + dependencies: + "@graphql-typed-document-node/core": "npm:^3.1.1" + "@wry/caches": "npm:^1.0.0" + "@wry/equality": "npm:^0.5.6" + "@wry/trie": "npm:^0.5.0" + graphql-tag: "npm:^2.12.6" + hoist-non-react-statics: "npm:^3.3.2" + optimism: "npm:^0.18.0" + prop-types: "npm:^15.7.2" + rehackt: "npm:^0.1.0" + response-iterator: "npm:^0.2.6" + symbol-observable: "npm:^4.0.0" + ts-invariant: "npm:^0.10.3" + tslib: "npm:^2.3.0" + zen-observable-ts: "npm:^1.2.5" + peerDependencies: + graphql: ^15.0.0 || ^16.0.0 + graphql-ws: ^5.5.5 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 || >=19.0.0-rc + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || >=19.0.0-rc + subscriptions-transport-ws: ^0.9.0 || ^0.11.0 + peerDependenciesMeta: + graphql-ws: + optional: true + react: + optional: true + react-dom: + optional: true + subscriptions-transport-ws: + optional: true + checksum: 10/9659ccf03ab5d6708cf191a1bd09c33ab5f958a8d66e783f81ccc899448b362a51cecf7d62c0ff5b852e60a340238e6903b3c96dcb5cf68dfb8a438ee6cd24bb + languageName: node + linkType: hard + "@apollo/experimental-nextjs-app-support@exec:./shared/build-experimental-nextjs-app-support.cjs::locator=%40integration-test%2Froot%40workspace%3A.": version: 0.11.8-alpha.1 resolution: "@apollo/experimental-nextjs-app-support@exec:./shared/build-experimental-nextjs-app-support.cjs#./shared/build-experimental-nextjs-app-support.cjs::hash=2ee804&locator=%40integration-test%2Froot%40workspace%3A." @@ -13867,11 +13916,15 @@ __metadata: version: 0.0.0-use.local resolution: "tanstack-start@workspace:tanstack-start" dependencies: + "@apollo/client": "npm:^3.12.4" + "@apollo/client-integration-tanstack-start": "npm:*" + "@integration-test/shared": "workspace:^" "@tanstack/react-router": "npm:1.91.3" "@tanstack/start": "npm:1.91.3" "@types/react": "npm:^19.0.2" "@types/react-dom": "npm:^19.0.2" "@vitejs/plugin-react": "npm:^4.3.4" + graphql: "npm:^16.10.0" react: "npm:^19.0.0" react-dom: "npm:^19.0.0" typescript: "npm:^5.7.2" diff --git a/packages/tanstack-start/src/index.ts b/packages/tanstack-start/src/index.ts index 848dba70..d3052c4c 100644 --- a/packages/tanstack-start/src/index.ts +++ b/packages/tanstack-start/src/index.ts @@ -1,2 +1,2 @@ export { routerWithApolloClient } from "./routerWithApolloClient.js"; -export { ApolloClient } from "@apollo/client-react-streaming"; +export { ApolloClient, InMemoryCache } from "@apollo/client-react-streaming";