[WIP] React Router 7 integration

.yarn/patches/react-router-npm-7.0.2-b96f2bd13c.patch

@@ -0,0 +1,94 @@
+diff --git a/dist/development/lib/types/route-module.d.mts b/dist/development/lib/types/route-module.d.mts
+index c4553062633a6a1352378bfedb2c9dc7eaef94fb..762fd83a1ad06f940ba39c6552bd61cc5c4d1cf1 100644
+--- a/dist/development/lib/types/route-module.d.mts
++++ b/dist/development/lib/types/route-module.d.mts
+@@ -1,7 +1,9 @@
+ import { av as LinkDescriptor, as as MetaDescriptor, aJ as ServerDataFrom, aK as ClientDataFrom, aL as Func, aM as Equal, aN as Pretty } from '../../route-data-DuV3tXo2.mjs';
+ import { A as AppLoadContext } from '../../data-CQbyyGzl.mjs';
+ import 'react';
+-
++export type SerializesTo<T> = {
++    $__RR_SerializesTo?: [T];
++  };
+ type IsDefined<T> = Equal<T, undefined> extends true ? false : true;
+ type RouteModule = {
+     meta?: Func;
+diff --git a/dist/development/lib/types/route-module.d.ts b/dist/development/lib/types/route-module.d.ts
+index a7b3449b84f7be4e7da9ce82ba6ac3ae3e30d64f..776fdbc13033eb82ce4de2b9026476e87e65c7f7 100644
+--- a/dist/development/lib/types/route-module.d.ts
++++ b/dist/development/lib/types/route-module.d.ts
+@@ -1,7 +1,9 @@
+ import { av as LinkDescriptor, as as MetaDescriptor, aJ as ServerDataFrom, aK as ClientDataFrom, aL as Func, aM as Equal, aN as Pretty } from '../../route-data-DuV3tXo2.js';
+ import { A as AppLoadContext } from '../../data-CQbyyGzl.js';
+ import 'react';
+-
++export type SerializesTo<T> = {
++    $__RR_SerializesTo?: [T];
++  };
+ type IsDefined<T> = Equal<T, undefined> extends true ? false : true;
+ type RouteModule = {
+     meta?: Func;
+diff --git a/dist/development/route-data-DuV3tXo2.d.mts b/dist/development/route-data-DuV3tXo2.d.mts
+index 53dbfb38b8c2cd09bb944aeb17dd3951f2a157ad..d33adfc7147222f4e283487df804faeb95f2a4c8 100644
+--- a/dist/development/route-data-DuV3tXo2.d.mts
++++ b/dist/development/route-data-DuV3tXo2.d.mts
+@@ -1531,8 +1531,10 @@ type Func = (...args: any[]) => unknown;
+ type Pretty<T> = {
+     [K in keyof T]: T[K];
+ } & {};
+-
+-type Serialize<T> = T extends Serializable ? T : T extends (...args: any[]) => unknown ? undefined : T extends Promise<infer U> ? Promise<Serialize<U>> : T extends Map<infer K, infer V> ? Map<Serialize<K>, Serialize<V>> : T extends Set<infer U> ? Set<Serialize<U>> : T extends [] ? [] : T extends readonly [infer F, ...infer R] ? [Serialize<F>, ...Serialize<R>] : T extends Array<infer U> ? Array<Serialize<U>> : T extends readonly unknown[] ? readonly Serialize<T[number]>[] : T extends Record<any, any> ? {
++export type SerializesTo<T> = {
++    $__RR_SerializesTo?: [T];
++  };
++type Serialize<T> = T extends SerializesTo<infer To> ? To : T extends Serializable ? T : T extends (...args: any[]) => unknown ? undefined : T extends Promise<infer U> ? Promise<Serialize<U>> : T extends Map<infer K, infer V> ? Map<Serialize<K>, Serialize<V>> : T extends Set<infer U> ? Set<Serialize<U>> : T extends [] ? [] : T extends readonly [infer F, ...infer R] ? [Serialize<F>, ...Serialize<R>] : T extends Array<infer U> ? Array<Serialize<U>> : T extends readonly unknown[] ? readonly Serialize<T[number]>[] : T extends Record<any, any> ? {
+     [K in keyof T]: Serialize<T[K]>;
+ } : undefined;
+ type VoidToUndefined<T> = Equal<T, void> extends true ? undefined : T;
+diff --git a/dist/development/route-data-DuV3tXo2.d.ts b/dist/development/route-data-DuV3tXo2.d.ts
+index 53dbfb38b8c2cd09bb944aeb17dd3951f2a157ad..d33adfc7147222f4e283487df804faeb95f2a4c8 100644
+--- a/dist/development/route-data-DuV3tXo2.d.ts
++++ b/dist/development/route-data-DuV3tXo2.d.ts
+@@ -1531,8 +1531,10 @@ type Func = (...args: any[]) => unknown;
+ type Pretty<T> = {
+     [K in keyof T]: T[K];
+ } & {};
+-
+-type Serialize<T> = T extends Serializable ? T : T extends (...args: any[]) => unknown ? undefined : T extends Promise<infer U> ? Promise<Serialize<U>> : T extends Map<infer K, infer V> ? Map<Serialize<K>, Serialize<V>> : T extends Set<infer U> ? Set<Serialize<U>> : T extends [] ? [] : T extends readonly [infer F, ...infer R] ? [Serialize<F>, ...Serialize<R>] : T extends Array<infer U> ? Array<Serialize<U>> : T extends readonly unknown[] ? readonly Serialize<T[number]>[] : T extends Record<any, any> ? {
++export type SerializesTo<T> = {
++    $__RR_SerializesTo?: [T];
++  };
++type Serialize<T> = T extends SerializesTo<infer To> ? To : T extends Serializable ? T : T extends (...args: any[]) => unknown ? undefined : T extends Promise<infer U> ? Promise<Serialize<U>> : T extends Map<infer K, infer V> ? Map<Serialize<K>, Serialize<V>> : T extends Set<infer U> ? Set<Serialize<U>> : T extends [] ? [] : T extends readonly [infer F, ...infer R] ? [Serialize<F>, ...Serialize<R>] : T extends Array<infer U> ? Array<Serialize<U>> : T extends readonly unknown[] ? readonly Serialize<T[number]>[] : T extends Record<any, any> ? {
+     [K in keyof T]: Serialize<T[K]>;
+ } : undefined;
+ type VoidToUndefined<T> = Equal<T, void> extends true ? undefined : T;
+diff --git a/dist/production/lib/types/route-module.d.mts b/dist/production/lib/types/route-module.d.mts
+index c4553062633a6a1352378bfedb2c9dc7eaef94fb..762fd83a1ad06f940ba39c6552bd61cc5c4d1cf1 100644
+--- a/dist/production/lib/types/route-module.d.mts
++++ b/dist/production/lib/types/route-module.d.mts
+@@ -1,7 +1,9 @@
+ import { av as LinkDescriptor, as as MetaDescriptor, aJ as ServerDataFrom, aK as ClientDataFrom, aL as Func, aM as Equal, aN as Pretty } from '../../route-data-DuV3tXo2.mjs';
+ import { A as AppLoadContext } from '../../data-CQbyyGzl.mjs';
+ import 'react';
+-
++export type SerializesTo<T> = {
++    $__RR_SerializesTo?: [T];
++  };
+ type IsDefined<T> = Equal<T, undefined> extends true ? false : true;
+ type RouteModule = {
+     meta?: Func;
+diff --git a/dist/production/lib/types/route-module.d.ts b/dist/production/lib/types/route-module.d.ts
+index a7b3449b84f7be4e7da9ce82ba6ac3ae3e30d64f..776fdbc13033eb82ce4de2b9026476e87e65c7f7 100644
+--- a/dist/production/lib/types/route-module.d.ts
++++ b/dist/production/lib/types/route-module.d.ts
+@@ -1,7 +1,9 @@
+ import { av as LinkDescriptor, as as MetaDescriptor, aJ as ServerDataFrom, aK as ClientDataFrom, aL as Func, aM as Equal, aN as Pretty } from '../../route-data-DuV3tXo2.js';
+ import { A as AppLoadContext } from '../../data-CQbyyGzl.js';
+ import 'react';
+-
++export type SerializesTo<T> = {
++    $__RR_SerializesTo?: [T];
++  };
+ type IsDefined<T> = Equal<T, undefined> extends true ? false : true;
+ type RouteModule = {
+     meta?: Func;

examples/app-dir-experiments/package.json

@@ -15,17 +15,17 @@
     "@apollo/server": "^4.9.5",
     "@as-integrations/next": "^3.0.0",
     "@types/node": "20.12.11",
-    "@types/react": "18.3.1",
-    "@types/react-dom": "18.3.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "client-only": "^0.0.1",
     "encoding": "^0.1.13",
     "eslint": "8.36.0",
     "eslint-config-next": "13.2.4",
     "graphql": "^16.6.0",
     "html-differ": "^1.4.0",
     "next": "^15.0.0",
-    "react": "18.3.0",
-    "react-dom": "18.3.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "server-only": "^0.0.1",
     "typescript": "5.4.5"
   }

examples/hack-the-supergraph-ssr/package.json

@@ -13,23 +13,23 @@
     "@apollo/client": "3.10.4",
     "@apollo/experimental-nextjs-app-support": "workspace:^",
     "@apollo/space-kit": "^9.11.0",
-    "@chakra-ui/next-js": "^2.1.2",
+    "@chakra-ui/next-js": "2.4.2",
     "@chakra-ui/react": "^2.5.5",
     "@emotion/cache": "^11.11.0",
     "@emotion/core": "^11.0.0",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@types/node": "20.12.11",
-    "@types/react": "18.3.1",
-    "@types/react-dom": "18.3.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "eslint": "8.38.0",
     "eslint-config-next": "13.3.0",
     "framer-motion": "^10.12.2",
     "graphql": "^16.6.0",
     "js-cookie": "^3.0.1",
     "next": "^15.0.0",
-    "react": "18.3.0",
-    "react-dom": "18.3.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-icons": "^4.8.0",
     "react-rating-stars-component": "^2.2.0",
     "typescript": "5.4.5"

examples/polls-demo/package.json

@@ -26,8 +26,8 @@
     "graphql-tag": "^2.12.6",
     "next": "^15.0.0",
     "postcss": "8.4.23",
-    "react": "18.3.0",
-    "react-dom": "18.3.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "tailwindcss": "3.3.2",
     "typescript": "5.4.5"
   },
@@ -38,7 +38,7 @@
     "@graphql-codegen/typed-document-node": "^4.0.1",
     "@graphql-codegen/typescript": "3.0.4",
     "@graphql-codegen/typescript-resolvers": "3.2.1",
-    "@types/react": "18.3.3",
-    "@types/react-dom": "19.0.0-alpha.3"
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0"
   }
 }

integration-test/.yarn/patches/react-router-npm-7.0.2-b96f2bd13c.patch

@@ -0,0 +1,94 @@
+diff --git a/dist/development/lib/types/route-module.d.mts b/dist/development/lib/types/route-module.d.mts
+index c4553062633a6a1352378bfedb2c9dc7eaef94fb..762fd83a1ad06f940ba39c6552bd61cc5c4d1cf1 100644
+--- a/dist/development/lib/types/route-module.d.mts
++++ b/dist/development/lib/types/route-module.d.mts
+@@ -1,7 +1,9 @@
+ import { av as LinkDescriptor, as as MetaDescriptor, aJ as ServerDataFrom, aK as ClientDataFrom, aL as Func, aM as Equal, aN as Pretty } from '../../route-data-DuV3tXo2.mjs';
+ import { A as AppLoadContext } from '../../data-CQbyyGzl.mjs';
+ import 'react';
+-
++export type SerializesTo<T> = {
++    $__RR_SerializesTo?: [T];
++  };
+ type IsDefined<T> = Equal<T, undefined> extends true ? false : true;
+ type RouteModule = {
+     meta?: Func;
+diff --git a/dist/development/lib/types/route-module.d.ts b/dist/development/lib/types/route-module.d.ts
+index a7b3449b84f7be4e7da9ce82ba6ac3ae3e30d64f..776fdbc13033eb82ce4de2b9026476e87e65c7f7 100644
+--- a/dist/development/lib/types/route-module.d.ts
++++ b/dist/development/lib/types/route-module.d.ts
+@@ -1,7 +1,9 @@
+ import { av as LinkDescriptor, as as MetaDescriptor, aJ as ServerDataFrom, aK as ClientDataFrom, aL as Func, aM as Equal, aN as Pretty } from '../../route-data-DuV3tXo2.js';
+ import { A as AppLoadContext } from '../../data-CQbyyGzl.js';
+ import 'react';
+-
++export type SerializesTo<T> = {
++    $__RR_SerializesTo?: [T];
++  };
+ type IsDefined<T> = Equal<T, undefined> extends true ? false : true;
+ type RouteModule = {
+     meta?: Func;
+diff --git a/dist/development/route-data-DuV3tXo2.d.mts b/dist/development/route-data-DuV3tXo2.d.mts
+index 53dbfb38b8c2cd09bb944aeb17dd3951f2a157ad..d33adfc7147222f4e283487df804faeb95f2a4c8 100644
+--- a/dist/development/route-data-DuV3tXo2.d.mts
++++ b/dist/development/route-data-DuV3tXo2.d.mts
+@@ -1531,8 +1531,10 @@ type Func = (...args: any[]) => unknown;
+ type Pretty<T> = {
+     [K in keyof T]: T[K];
+ } & {};
+-
+-type Serialize<T> = T extends Serializable ? T : T extends (...args: any[]) => unknown ? undefined : T extends Promise<infer U> ? Promise<Serialize<U>> : T extends Map<infer K, infer V> ? Map<Serialize<K>, Serialize<V>> : T extends Set<infer U> ? Set<Serialize<U>> : T extends [] ? [] : T extends readonly [infer F, ...infer R] ? [Serialize<F>, ...Serialize<R>] : T extends Array<infer U> ? Array<Serialize<U>> : T extends readonly unknown[] ? readonly Serialize<T[number]>[] : T extends Record<any, any> ? {
++export type SerializesTo<T> = {
++    $__RR_SerializesTo?: [T];
++  };
++type Serialize<T> = T extends SerializesTo<infer To> ? To : T extends Serializable ? T : T extends (...args: any[]) => unknown ? undefined : T extends Promise<infer U> ? Promise<Serialize<U>> : T extends Map<infer K, infer V> ? Map<Serialize<K>, Serialize<V>> : T extends Set<infer U> ? Set<Serialize<U>> : T extends [] ? [] : T extends readonly [infer F, ...infer R] ? [Serialize<F>, ...Serialize<R>] : T extends Array<infer U> ? Array<Serialize<U>> : T extends readonly unknown[] ? readonly Serialize<T[number]>[] : T extends Record<any, any> ? {
+     [K in keyof T]: Serialize<T[K]>;
+ } : undefined;
+ type VoidToUndefined<T> = Equal<T, void> extends true ? undefined : T;
+diff --git a/dist/development/route-data-DuV3tXo2.d.ts b/dist/development/route-data-DuV3tXo2.d.ts
+index 53dbfb38b8c2cd09bb944aeb17dd3951f2a157ad..d33adfc7147222f4e283487df804faeb95f2a4c8 100644
+--- a/dist/development/route-data-DuV3tXo2.d.ts
++++ b/dist/development/route-data-DuV3tXo2.d.ts
+@@ -1531,8 +1531,10 @@ type Func = (...args: any[]) => unknown;
+ type Pretty<T> = {
+     [K in keyof T]: T[K];
+ } & {};
+-
+-type Serialize<T> = T extends Serializable ? T : T extends (...args: any[]) => unknown ? undefined : T extends Promise<infer U> ? Promise<Serialize<U>> : T extends Map<infer K, infer V> ? Map<Serialize<K>, Serialize<V>> : T extends Set<infer U> ? Set<Serialize<U>> : T extends [] ? [] : T extends readonly [infer F, ...infer R] ? [Serialize<F>, ...Serialize<R>] : T extends Array<infer U> ? Array<Serialize<U>> : T extends readonly unknown[] ? readonly Serialize<T[number]>[] : T extends Record<any, any> ? {
++export type SerializesTo<T> = {
++    $__RR_SerializesTo?: [T];
++  };
++type Serialize<T> = T extends SerializesTo<infer To> ? To : T extends Serializable ? T : T extends (...args: any[]) => unknown ? undefined : T extends Promise<infer U> ? Promise<Serialize<U>> : T extends Map<infer K, infer V> ? Map<Serialize<K>, Serialize<V>> : T extends Set<infer U> ? Set<Serialize<U>> : T extends [] ? [] : T extends readonly [infer F, ...infer R] ? [Serialize<F>, ...Serialize<R>] : T extends Array<infer U> ? Array<Serialize<U>> : T extends readonly unknown[] ? readonly Serialize<T[number]>[] : T extends Record<any, any> ? {
+     [K in keyof T]: Serialize<T[K]>;
+ } : undefined;
+ type VoidToUndefined<T> = Equal<T, void> extends true ? undefined : T;
+diff --git a/dist/production/lib/types/route-module.d.mts b/dist/production/lib/types/route-module.d.mts
+index c4553062633a6a1352378bfedb2c9dc7eaef94fb..762fd83a1ad06f940ba39c6552bd61cc5c4d1cf1 100644
+--- a/dist/production/lib/types/route-module.d.mts
++++ b/dist/production/lib/types/route-module.d.mts
+@@ -1,7 +1,9 @@
+ import { av as LinkDescriptor, as as MetaDescriptor, aJ as ServerDataFrom, aK as ClientDataFrom, aL as Func, aM as Equal, aN as Pretty } from '../../route-data-DuV3tXo2.mjs';
+ import { A as AppLoadContext } from '../../data-CQbyyGzl.mjs';
+ import 'react';
+-
++export type SerializesTo<T> = {
++    $__RR_SerializesTo?: [T];
++  };
+ type IsDefined<T> = Equal<T, undefined> extends true ? false : true;
+ type RouteModule = {
+     meta?: Func;
+diff --git a/dist/production/lib/types/route-module.d.ts b/dist/production/lib/types/route-module.d.ts
+index a7b3449b84f7be4e7da9ce82ba6ac3ae3e30d64f..776fdbc13033eb82ce4de2b9026476e87e65c7f7 100644
+--- a/dist/production/lib/types/route-module.d.ts
++++ b/dist/production/lib/types/route-module.d.ts
+@@ -1,7 +1,9 @@
+ import { av as LinkDescriptor, as as MetaDescriptor, aJ as ServerDataFrom, aK as ClientDataFrom, aL as Func, aM as Equal, aN as Pretty } from '../../route-data-DuV3tXo2.js';
+ import { A as AppLoadContext } from '../../data-CQbyyGzl.js';
+ import 'react';
+-
++export type SerializesTo<T> = {
++    $__RR_SerializesTo?: [T];
++  };
+ type IsDefined<T> = Equal<T, undefined> extends true ? false : true;
+ type RouteModule = {
+     meta?: Func;

integration-test/experimental-react/package.json

@@ -26,8 +26,8 @@
   "devDependencies": {
     "@playwright/test": "^1.39.0",
     "@tsconfig/vite-react": "^3.0.0",
-    "@types/react": "^18.2.55",
-    "@types/react-dom": "^18.2.18",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "@vitejs/plugin-react": "^4.2.1",
     "cross-env": "^7.0.3",
     "prettier": "^3.2.5",

integration-test/jest/package.json

@@ -9,15 +9,15 @@
     "@apollo/experimental-nextjs-app-support": "workspace:*",
     "@graphql-tools/schema": "^10.0.3",
     "graphql-tag": "^2.12.6",
-    "react": "18.3.0",
-    "react-dom": "18.3.0"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.24.0",
     "@babel/preset-env": "^7.24.0",
     "@babel/preset-react": "^7.23.3",
     "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^14.2.1",
+    "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",
     "babel-jest": "^29.7.0",
     "jest": "^29.7.0",

integration-test/jest/src/App.jsx

@@ -17,7 +17,7 @@ const delayLink = new ApolloLink((operation, forward) => {
   return new Observable((observer) => {
     const handle = setTimeout(() => {
       forward(operation).subscribe(observer);
-    }, 20);
+    }, 100);
 
     return () => {
       clearTimeout(handle);

integration-test/jest/src/App.test.jsx

@@ -1,4 +1,4 @@
-import { render, screen } from "@testing-library/react";
+import { render, screen, act } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import "@testing-library/jest-dom";
 
@@ -8,7 +8,7 @@ import { resetApolloClientSingletons } from "@apollo/experimental-nextjs-app-sup
 afterEach(resetApolloClientSingletons);
 
 test("loads data", async () => {
-  render(<App />);
+  await act(async () => render(<App />));
 
   expect(screen.getByText("Loading...")).toBeInTheDocument();
   expect(
@@ -18,7 +18,7 @@ test("loads data", async () => {
 });
 
 test("is interactive", async () => {
-  render(<App />);
+  await act(async () => render(<App />));
 
   const counter = await screen.findByTestId("counter");
   expect(counter.textContent).toBe("0");

integration-test/nextjs/package.json

@@ -16,13 +16,13 @@
     "@as-integrations/next": "^3.2.0",
     "@graphql-tools/schema": "^10.0.0",
     "@types/node": "20.3.1",
-    "@types/react": "18.3.0",
-    "@types/react-dom": "18.3.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "graphql": "^16.7.1",
     "graphql-tag": "^2.12.6",
     "next": "^15.0.3",
-    "react": "18.3.0",
-    "react-dom": "18.3.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-error-boundary": "^4.0.13",
     "ssr-only-secrets": "^0.0.5",
     "typescript": "5.1.3"

integration-test/package.json

@@ -4,13 +4,15 @@
   "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",
-    "graphql": "17.0.0-alpha.2"
+    "@apollo/client-integration-react-router": "exec:./shared/build-client-integration-react-router.cjs",
+    "graphql": "17.0.0-alpha.2",
+    "turbo-stream": "npm:@phryneas/turbo-stream@2.4.1-pr.51.1.3fa62cb"
   },
   "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"

integration-test/react-router/.gitignore

@@ -0,0 +1,7 @@
+.env
+!.env.example
+.DS_Store
+.react-router
+build
+node_modules
+*.tsbuildinfo