add example

apollographql · Dec 16, 2024 · bf662df · bf662df
1 parent 145f210
commit bf662df
Show file tree

Hide file tree

Showing 21 changed files with 387 additions and 187 deletions.
diff --git a/integration-test/package.json b/integration-test/package.json
@@ -4,13 +4,14 @@
   "resolutions": {
     "@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",
     "graphql": "17.0.0-alpha.2"
   },
   "workspaces": [
     "*"
   ],
   "scripts": {
-    "build:libs": "find . -regextype posix-extended -regex '.*/node_modules/@apollo/(client-react-streaming|experimental-nextjs-app-support)' -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)' -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/react-router/app/apollo.ts b/integration-test/react-router/app/apollo.ts
@@ -1,6 +1,8 @@
-import { InMemoryCache } from "@apollo/client-react-streaming";
-import { ApolloClient } from "./apollo/ApolloClient";
-import { createApolloLoaderHandler } from "./apollo/preloader";
+import { InMemoryCache } from "@apollo/client/index.js";
+import {
+  createApolloLoaderHandler,
+  ApolloClient,
+} from "@apollo/client-integration-react-router";
 
 export const makeClient = (request?: Request) => {
   return new ApolloClient({

diff --git a/integration-test/react-router/app/apollo/createQueryPreloader.ts b/integration-test/react-router/app/apollo/createQueryPreloader.ts
diff --git a/integration-test/react-router/app/root.tsx b/integration-test/react-router/app/root.tsx
@@ -9,6 +9,7 @@ import {
 
 import type { Route } from "./+types/root";
 import "./app.css";
+import { ApolloHydrationHelper } from "@apollo/client-integration-react-router";
 
 export const links: Route.LinksFunction = () => [
   { rel: "preconnect", href: "https://fonts.googleapis.com" },
@@ -33,7 +34,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
         <Links />
       </head>
       <body>
-        {children}
+        <ApolloHydrationHelper>{children}</ApolloHydrationHelper>
         <ScrollRestoration />
         <Scripts />
       </body>

diff --git a/integration-test/react-router/app/routes/home.tsx b/integration-test/react-router/app/routes/home.tsx
@@ -40,6 +40,7 @@ export const loader = apolloLoader<Route.LoaderArgs>()(({ preloadQuery }) => {
 
 export default function Home() {
   const { postsRef } = useLoaderData<typeof loader>();
+
   const posts = useReadQuery(postsRef).data.posts.data;
 
   return (

diff --git a/integration-test/react-router/package.json b/integration-test/react-router/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@apollo/client": "^3.11.10",
+    "@apollo/client-integration-react-router": "*",
     "@apollo/client-react-streaming": "^0.11.6",
     "@react-router/node": "^7.0.1",
     "@react-router/serve": "^7.0.1",

diff --git a/integration-test/shared/build-client-integration-react-router.cjs b/integration-test/shared/build-client-integration-react-router.cjs
@@ -0,0 +1,45 @@
+/*
+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 { execFileSync } = require("node:child_process");
+const { join, dirname } = require("node:path");
+const monorepoRoot = dirname(
+  require.resolve("monorepo", { paths: [process.env.INIT_CWD] })
+);
+const pathToArchive = join(execEnv.tempDir, "archive.tgz");
+
+setTimeout(() => {
+  execFileSync(
+    `yarn`,
+    [
+      `workspace`,
+      `@apollo/client-integration-react-router`,
+      `pack`,
+      `--out`,
+      pathToArchive,
+    ],
+    {
+      stdio: `inherit`,
+      cwd: monorepoRoot,
+    }
+  );
+  execFileSync(
+    `tar`,
+    [
+      `-x`,
+      `-z`,
+      `--strip-components=1`,
+      `-f`,
+      pathToArchive,
+      `-C`,
+      execEnv.buildDir,
+    ],
+    {
+      stdio: `inherit`,
+    }
+  );
+}, 3000);
diff --git a/integration-test/shared/build-experimental-nextjs-app-support.cjs b/integration-test/shared/build-experimental-nextjs-app-support.cjs
@@ -13,37 +13,43 @@ const monorepoRoot = dirname(
 );
 const pathToArchive = join(execEnv.tempDir, "archive.tgz");
 
-execFileSync(`yarn`, [`workspace`, `@apollo/client-react-streaming`, `build`], {
-  stdio: `inherit`,
-  cwd: monorepoRoot,
-});
+setTimeout(() => {
+  execFileSync(
+    `yarn`,
+    [`workspace`, `@apollo/client-react-streaming`, `build`],
+    {
+      stdio: `inherit`,
+      cwd: monorepoRoot,
+    }
+  );
 
-execFileSync(
-  `yarn`,
-  [
-    `workspace`,
-    `@apollo/experimental-nextjs-app-support`,
-    `pack`,
-    `--out`,
-    pathToArchive,
-  ],
-  {
-    stdio: `inherit`,
-    cwd: monorepoRoot,
-  }
-);
-execFileSync(
-  `tar`,
-  [
-    `-x`,
-    `-z`,
-    `--strip-components=1`,
-    `-f`,
-    pathToArchive,
-    `-C`,
-    execEnv.buildDir,
-  ],
-  {
-    stdio: `inherit`,
-  }
-);
+  execFileSync(
+    `yarn`,
+    [
+      `workspace`,
+      `@apollo/experimental-nextjs-app-support`,
+      `pack`,
+      `--out`,
+      pathToArchive,
+    ],
+    {
+      stdio: `inherit`,
+      cwd: monorepoRoot,
+    }
+  );
+  execFileSync(
+    `tar`,
+    [
+      `-x`,
+      `-z`,
+      `--strip-components=1`,
+      `-f`,
+      pathToArchive,
+      `-C`,
+      execEnv.buildDir,
+    ],
+    {
+      stdio: `inherit`,
+    }
+  );
+}, 3000);
diff --git a/integration-test/yarn.lock b/integration-test/yarn.lock
@@ -38,8 +38,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@apollo/client-integration-react-router@exec:./shared/build-client-integration-react-router.cjs::locator=%40integration-test%2Froot%40workspace%3A.":
+  version: 0.11.5
+  resolution: "@apollo/client-integration-react-router@exec:./shared/build-client-integration-react-router.cjs#./shared/build-client-integration-react-router.cjs::hash=b41c48&locator=%40integration-test%2Froot%40workspace%3A."
+  dependencies:
+    "@apollo/client-react-streaming": "npm:0.11.5"
+  peerDependencies:
+    react: ^19
+    react-router: ^7.0.2
+  checksum: 10/f4a99fd74eb11f04425c3522b7b61ecd2859272c7046113fe7fa84dc444a8ba12b16f0444be15f3cf28e7d16aeb738a3857647803c61203003a6051524dfa912
+  languageName: node
+  linkType: hard
+
 "@apollo/client-react-streaming@exec:./shared/build-client-react-streaming.cjs::locator=%40integration-test%2Froot%40workspace%3A.":
-  version: 0.11.6
+  version: 0.11.7
   resolution: "@apollo/client-react-streaming@exec:./shared/build-client-react-streaming.cjs#./shared/build-client-react-streaming.cjs::hash=48b117&locator=%40integration-test%2Froot%40workspace%3A."
   dependencies:
     ts-invariant: "npm:^0.10.3"
@@ -88,15 +100,15 @@ __metadata:
   linkType: hard
 
 "@apollo/experimental-nextjs-app-support@exec:./shared/build-experimental-nextjs-app-support.cjs::locator=%40integration-test%2Froot%40workspace%3A.":
-  version: 0.11.6
-  resolution: "@apollo/experimental-nextjs-app-support@exec:./shared/build-experimental-nextjs-app-support.cjs#./shared/build-experimental-nextjs-app-support.cjs::hash=fd83cc&locator=%40integration-test%2Froot%40workspace%3A."
+  version: 0.11.7
+  resolution: "@apollo/experimental-nextjs-app-support@exec:./shared/build-experimental-nextjs-app-support.cjs#./shared/build-experimental-nextjs-app-support.cjs::hash=fa2496&locator=%40integration-test%2Froot%40workspace%3A."
   dependencies:
-    "@apollo/client-react-streaming": "npm:0.11.6"
+    "@apollo/client-react-streaming": "npm:0.11.7"
   peerDependencies:
     "@apollo/client": ^3.10.4
     next: ^13.4.1 || ^14.0.0 || ^15.0.0-rc.0
     react: ^18 || >=19.0.0-rc
-  checksum: 10/505b723bac0f3a7f15287ea32fab9f2e8c0cd567149abf11d750855f8a9bfc0aa26e44179ad10c32f7d162ad86318717032413ef8e1a25385185178e022588fa
+  checksum: 10/ab92be4c933fb08593b00937628b94547cc9e13bfeb008c8dc9e58fc22ef63e1b9601712fd15c00f257b6af05d756087f040281d7f98530e44541378e8db830b
   languageName: node
   linkType: hard
 
@@ -8898,6 +8910,7 @@ __metadata:
   resolution: "react-router@workspace:react-router"
   dependencies:
     "@apollo/client": "npm:^3.11.10"
+    "@apollo/client-integration-react-router": "npm:*"
     "@apollo/client-react-streaming": "npm:^0.11.6"
     "@react-router/dev": "npm:^7.0.1"
     "@react-router/node": "npm:^7.0.1"

diff --git a/packages/react-router/LICENSE.md b/packages/react-router/LICENSE.md
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2024 Apollo Graph, Inc. (Formerly Meteor Development Group, Inc.)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/react-router/README.md b/packages/react-router/README.md
@@ -0,0 +1 @@
+TODO