RSC preloading mechanism

examples/app-dir-experiments/package.json

@@ -10,7 +10,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@apollo/client": "^3.9.9",
+    "@apollo/client": "3.10.4",
     "@apollo/experimental-nextjs-app-support": "workspace:^",
     "@apollo/server": "^4.9.5",
     "@as-integrations/next": "^3.0.0",
@@ -24,8 +24,8 @@
     "graphql": "^16.6.0",
     "html-differ": "^1.4.0",
     "next": "^14.1.0",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "18.3.0",
+    "react-dom": "18.3.0",
     "server-only": "^0.0.1",
     "typescript": "5.4.5"
   }

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

@@ -10,7 +10,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@apollo/client": "^3.9.9",
+    "@apollo/client": "3.10.4",
     "@apollo/experimental-nextjs-app-support": "workspace:^",
     "@apollo/space-kit": "^9.11.0",
     "@chakra-ui/next-js": "^2.1.2",
@@ -28,8 +28,8 @@
     "graphql": "^16.6.0",
     "js-cookie": "^3.0.1",
     "next": "^14.1.0",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "18.3.0",
+    "react-dom": "18.3.0",
     "react-icons": "^4.8.0",
     "react-rating-stars-component": "^2.2.0",
     "typescript": "5.4.5"

examples/polls-demo/package.json

@@ -12,7 +12,7 @@
     "codegen": "graphql-codegen --config codegen.ts"
   },
   "dependencies": {
-    "@apollo/client": "^3.9.9",
+    "@apollo/client": "3.10.4",
     "@apollo/experimental-nextjs-app-support": "workspace:^",
     "@apollo/server": "^4.9.5",
     "@types/node": "20.12.11",
@@ -28,8 +28,8 @@
     "graphql-tag": "^2.12.6",
     "next": "^14.1.0",
     "postcss": "8.4.23",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "18.3.0",
+    "react-dom": "18.3.0",
     "tailwindcss": "3.3.2",
     "typescript": "5.4.5"
   },

integration-test/experimental-react/package.json

@@ -13,7 +13,7 @@
     "test": "yarn playwright test"
   },
   "dependencies": {
-    "@apollo/client": "^3.9.6",
+    "@apollo/client": "3.10.4",
     "@apollo/client-react-streaming": "*",
     "compression": "^1.7.4",
     "express": "^4.18.2",

integration-test/jest/package.json

@@ -4,13 +4,13 @@
     "test": "jest"
   },
   "dependencies": {
-    "@apollo/client": "^3.9.6",
+    "@apollo/client": "3.10.4",
     "@apollo/client-react-streaming": "workspace:*",
     "@apollo/experimental-nextjs-app-support": "workspace:*",
     "@graphql-tools/schema": "^10.0.3",
     "graphql-tag": "^2.12.6",
-    "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react": "18.3.0",
+    "react-dom": "18.3.0"
   },
   "devDependencies": {
     "@babel/core": "^7.24.0",

integration-test/nextjs/package.json

@@ -10,19 +10,19 @@
     "test": "yarn playwright test"
   },
   "dependencies": {
-    "@apollo/client": "^3.9.6",
+    "@apollo/client": "3.10.4",
     "@apollo/experimental-nextjs-app-support": "workspace:*",
     "@apollo/server": "^4.9.5",
     "@as-integrations/next": "^3.0.0",
     "@graphql-tools/schema": "^10.0.0",
     "@types/node": "20.3.1",
-    "@types/react": "^18.2.55",
-    "@types/react-dom": "18.2.6",
+    "@types/react": "18.3.0",
+    "@types/react-dom": "18.3.0",
     "graphql": "^16.7.1",
     "graphql-tag": "^2.12.6",
     "next": "^14.1.0",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "18.3.0",
+    "react-dom": "18.3.0",
     "react-error-boundary": "^4.0.13",
     "ssr-only-secrets": "^0.0.5",
     "typescript": "5.1.3"

integration-test/nextjs/src/app/cc/ApolloWrapper.tsx

@@ -1,6 +1,6 @@
 "use client";
 import React from "react";
-import { ApolloLink, HttpLink, Observable } from "@apollo/client";
+import { HttpLink } from "@apollo/client";
 import {
   ApolloNextAppProvider,
   NextSSRInMemoryCache,
@@ -15,29 +15,12 @@ import { delayLink } from "@/shared/delayLink";
 import { schema } from "../graphql/schema";
 
 import { useSSROnlySecret } from "ssr-only-secrets";
-import { GraphQLError } from "graphql";
+import { errorLink } from "../../shared/errorLink";
 
 setVerbosity("debug");
 loadDevMessages();
 loadErrorMessages();
 
-const errorLink = new ApolloLink((operation, forward) => {
-  const context = operation.getContext();
-  if (
-    context.error === "always" ||
-    (typeof window === "undefined" && context.error === "ssr") ||
-    (typeof window !== "undefined" && context.error === "browser")
-  ) {
-    return new Observable((subscriber) => {
-      subscriber.next({
-        data: null,
-        errors: [new GraphQLError("Simulated error")],
-      });
-    });
-  }
-  return forward(operation);
-});
-
 export function ApolloWrapper({
   children,
   nonce,

integration-test/nextjs/src/app/cc/dynamic/dynamic.test.ts

@@ -2,9 +2,9 @@ import { expect } from "@playwright/test";
 import { test } from "../../../../fixture";
 
 const regex_connection_closed_early =
-  /streaming connection closed before server query could be fully transported, rerunning/;
+  /streaming connection closed before server query could be fully transported, rerunning/i;
 const regex_query_error_restart =
-  /query failed on server, rerunning in browser/;
+  /query failed on server, rerunning in browser/i;
 
 test.describe("CC dynamic", () => {
   test.describe("useSuspenseQuery", () => {

integration-test/nextjs/src/app/cc/dynamic/useBackgroundQuery/page.tsx

@@ -27,7 +27,9 @@ const QUERY: TypedDocumentNode<Data> = gql`
 export const dynamic = "force-dynamic";
 
 export default function Page() {
-  const [queryRef] = useBackgroundQuery(QUERY, { context: { delay: 2000 } });
+  const [queryRef] = useBackgroundQuery(QUERY, {
+    context: { delay: 2000, error: "browser" },
+  });
   return (
     <Suspense fallback={<p>loading</p>}>
       <DisplayData queryRef={queryRef} />

integration-test/nextjs/src/app/cc/dynamic/useSuspenseQuery/page.tsx

@@ -21,7 +21,9 @@ const QUERY: TypedDocumentNode<{
 export const dynamic = "force-dynamic";
 
 export default function Page() {
-  const { data } = useSuspenseQuery(QUERY);
+  const { data } = useSuspenseQuery(QUERY, {
+    context: { delay: 1000 },
+  });
   globalThis.hydrationFinished?.();
 
   return (

integration-test/nextjs/src/app/graphql/route.ts

@@ -6,7 +6,13 @@ const server = new ApolloServer({
   schema,
 });
 
-const handler = startServerAndCreateNextHandler(server);
+const handler = startServerAndCreateNextHandler(server, {
+  context: async () => {
+    return {
+      from: "network",
+    };
+  },
+});
 
 export async function GET(request: Request) {
   return handler(request);

integration-test/nextjs/src/app/graphql/schema.ts

@@ -1,13 +1,16 @@
 import { makeExecutableSchema } from "@graphql-tools/schema";
 import gql from "graphql-tag";
+import * as entryPoint from "@apollo/client-react-streaming";
+import type { IResolvers } from "@graphql-tools/utils";
 
 const typeDefs = gql`
   type Product {
     id: String!
     title: String!
   }
   type Query {
-    products: [Product!]!
+    products(someArgument: String): [Product!]!
+    env: String!
   }
 `;
 
@@ -39,8 +42,19 @@ const resolvers = {
         title: "The Apollo Socks",
       },
     ],
+    env: (source, args, context) => {
+      return context && context.from === "network"
+        ? "browser"
+        : "built_for_ssr" in entryPoint
+          ? "SSR"
+          : "built_for_browser" in entryPoint
+            ? "Browser"
+            : "built_for_rsc" in entryPoint
+              ? "RSC"
+              : "unknown";
+    },
   },
-};
+} satisfies IResolvers;
 
 export const schema = makeExecutableSchema({
   typeDefs,

integration-test/nextjs/src/app/rsc/client.ts

@@ -1,9 +1,10 @@
-import { ApolloClient, HttpLink, InMemoryCache } from "@apollo/client";
+import { ApolloClient, InMemoryCache } from "@apollo/client";
 import { registerApolloClient } from "@apollo/experimental-nextjs-app-support/rsc";
 
 import { loadErrorMessages, loadDevMessages } from "@apollo/client/dev";
 import { setVerbosity } from "ts-invariant";
 import { delayLink } from "@/shared/delayLink";
+import { errorLink } from "@/shared/errorLink";
 import { SchemaLink } from "@apollo/client/link/schema";
 
 import { schema } from "../graphql/schema";
@@ -12,15 +13,9 @@ setVerbosity("debug");
 loadDevMessages();
 loadErrorMessages();
 
-export const { getClient } = registerApolloClient(() => {
+export const { getClient, PreloadQuery, query } = registerApolloClient(() => {
   return new ApolloClient({
     cache: new InMemoryCache(),
-    link: delayLink.concat(
-      typeof window === "undefined"
-        ? new SchemaLink({ schema })
-        : new HttpLink({
-            uri: "/graphql",
-          })
-    ),
+    link: delayLink.concat(errorLink.concat(new SchemaLink({ schema }))),
   });
 });

integration-test/nextjs/src/app/rsc/dynamic/PreloadQuery/PreloadQuery.test.ts

@@ -0,0 +1,78 @@
+import { expect } from "@playwright/test";
+import { test } from "../../../../../fixture";
+
+test.describe("PreloadQuery", () => {
+  for (const [decription, path] of [
+    ["with useSuspenseQuery", "useSuspenseQuery"],
+    ["with queryRef and useReadQuery", "queryRef-useReadQuery"],
+  ] as const) {
+    test.describe(decription, () => {
+      test("query resolves on the server", async ({ page, blockRequest }) => {
+        await page.goto(
+          `/rsc/dynamic/PreloadQuery/${path}?errorIn=ssr,browser`,
+          {
+            waitUntil: "commit",
+          }
+        );
+
+        await expect(page).toBeInitiallyLoading(true);
+        await expect(page.getByText("loading")).not.toBeVisible();
+        await expect(page.getByText("Soft Warm Apollo Beanie")).toBeVisible();
+        await expect(
+          page.getByText("Queried in RSC environment")
+        ).toBeVisible();
+      });
+
+      test("query errors on the server, restarts in the browser", async ({
+        page,
+      }) => {
+        page.allowErrors?.();
+        await page.goto(`/rsc/dynamic/PreloadQuery/${path}?errorIn=rsc`, {
+          waitUntil: "commit",
+        });
+
+        await expect(page).toBeInitiallyLoading(true);
+
+        await page.waitForEvent("pageerror", (error) => {
+          return (
+            /* prod */ error.message.includes("Minified React error #419") ||
+            /* dev */ error.message.includes("Query failed upstream.")
+          );
+        });
+
+        await expect(page.getByText("loading")).not.toBeVisible();
+        await expect(page.getByText("Soft Warm Apollo Beanie")).toBeVisible();
+        await expect(
+          page.getByText("Queried in Browser environment")
+        ).toBeVisible();
+      });
+    });
+  }
+  test("queryRef works with useQueryRefHandlers", async ({ page }) => {
+    await page.goto(`/rsc/dynamic/PreloadQuery/queryRef-useReadQuery`, {
+      waitUntil: "commit",
+    });
+
+    await expect(page).toBeInitiallyLoading(true);
+    await expect(page.getByText("loading")).not.toBeVisible();
+    await expect(page.getByText("Soft Warm Apollo Beanie")).toBeVisible();
+    await expect(page.getByText("Queried in RSC environment")).toBeVisible();
+
+    await page.getByRole("button", { name: "refetch" }).click();
+    await expect(
+      page.getByText("Queried in Browser environment")
+    ).toBeVisible();
+  });
+
+  test("queryRef: assumptions about referential equality", async ({ page }) => {
+    await page.goto(`/rsc/dynamic/PreloadQuery/queryRef-refTest`, {
+      waitUntil: "commit",
+    });
+
+    await page.getByRole("spinbutton").nth(11).waitFor();
+
+    for (let i = 0; i < 12; i++) {
+      await expect(page.getByRole("spinbutton").nth(i)).toHaveClass("valid");
+    }
+  });
+});