RSC preloading mechanism

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,5 +1,7 @@
 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 {
@@ -8,6 +10,7 @@ const typeDefs = gql`
   }
   type Query {
     products: [Product!]!
+    env: String!
   }
 `;
 
@@ -39,8 +42,20 @@ const resolvers = {
         title: "The Apollo Socks",
       },
     ],
+    env: (source, args, context, info) => {
+      console.log({ source, args, context, info });
+      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

@@ -4,6 +4,7 @@ import { registerApolloClient } from "@apollo/experimental-nextjs-app-support/rs
 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";
@@ -15,12 +16,6 @@ loadErrorMessages();
 export const { getClient } = 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,72 @@
+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(
+          `http://localhost:3000/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(
+          `http://localhost:3000/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(
+      `http://localhost:3000/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();
+  });
+});

integration-test/nextjs/src/app/rsc/dynamic/PreloadQuery/queryRef-useReadQuery/ClientChild.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import {
+  QueryReference,
+  useQueryRefHandlers,
+  useReadQuery,
+} from "@apollo/client";
+import { DynamicProductResult } from "../shared";
+
+export function ClientChild({
+  queryRef,
+}: {
+  queryRef: QueryReference<DynamicProductResult>;
+}) {
+  const { data } = useReadQuery(queryRef);
+  const { refetch } = useQueryRefHandlers(queryRef);
+  return (
+    <>
+      <ul>
+        {data.products.map(({ id, title }: any) => (
+          <li key={id}>{title}</li>
+        ))}
+      </ul>
+      <p>Queried in {data.env} environment</p>
+      <button onClick={() => refetch()}>refetch</button>
+    </>
+  );
+}

integration-test/nextjs/src/app/rsc/dynamic/PreloadQuery/queryRef-useReadQuery/page.tsx

@@ -0,0 +1,31 @@
+import { ApolloWrapper } from "@/app/cc/ApolloWrapper";
+import { PreloadQuery } from "@apollo/client-react-streaming";
+import { ClientChild } from "./ClientChild";
+import { QUERY } from "../shared";
+
+export const dynamic = "force-dynamic";
+import { getClient } from "../../../client";
+import { Suspense } from "react";
+
+export default function Page({ searchParams }: { searchParams?: any }) {
+  return (
+    <ApolloWrapper>
+      <PreloadQuery
+        options={{
+          query: QUERY,
+          context: {
+            delay: 1000,
+            error: searchParams?.errorIn || undefined,
+          },
+        }}
+        getClient={getClient}
+      >
+        {(queryRef) => (
+          <Suspense fallback={<>loading</>}>
+            <ClientChild queryRef={queryRef as any /*TODO*/} />
+          </Suspense>
+        )}
+      </PreloadQuery>
+    </ApolloWrapper>
+  );
+}

integration-test/nextjs/src/app/rsc/dynamic/PreloadQuery/shared.tsx

@@ -0,0 +1,18 @@
+import { TypedDocumentNode, gql } from "@apollo/client";
+
+export interface DynamicProductResult {
+  products: {
+    id: string;
+    title: string;
+  }[];
+  env: string;
+}
+export const QUERY: TypedDocumentNode<DynamicProductResult> = gql`
+  query dynamicProducts {
+    products {
+      id
+      title
+    }
+    env
+  }
+`;

integration-test/nextjs/src/app/rsc/dynamic/PreloadQuery/useSuspenseQuery/ClientChild.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { useSuspenseQuery } from "@apollo/client";
+import { QUERY } from "../shared";
+
+export function ClientChild() {
+  const { data } = useSuspenseQuery(QUERY);
+  return (
+    <>
+      <ul>
+        {data.products.map(({ id, title }: any) => (
+          <li key={id}>{title}</li>
+        ))}
+      </ul>
+      <p>Queried in {data.env} environment</p>
+    </>
+  );
+}

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

@@ -0,0 +1,29 @@
+import { ApolloWrapper } from "@/app/cc/ApolloWrapper";
+import { PreloadQuery } from "@apollo/client-react-streaming";
+import { ClientChild } from "./ClientChild";
+import { QUERY } from "../shared";
+
+export const dynamic = "force-dynamic";
+import { getClient } from "../../../client";
+import { Suspense } from "react";
+
+export default function Page({ searchParams }: { searchParams?: any }) {
+  return (
+    <ApolloWrapper>
+      <PreloadQuery
+        options={{
+          query: QUERY,
+          context: {
+            delay: 1000,
+            error: searchParams?.errorIn || undefined,
+          },
+        }}
+        getClient={getClient}
+      >
+        <Suspense fallback={<>loading</>}>
+          <ClientChild />
+        </Suspense>
+      </PreloadQuery>
+    </ApolloWrapper>
+  );
+}

integration-test/nextjs/src/shared/delayLink.ts

@@ -1,5 +1,11 @@
 import { ApolloLink, Observable } from "@apollo/client";
 
+declare module "@apollo/client" {
+  export interface DefaultContext {
+    delay?: number;
+  }
+}
+
 export const delayLink = new ApolloLink((operation, forward) => {
   if (operation.operationName?.includes("dynamic")) {
     operation.setContext({

integration-test/nextjs/src/shared/errorLink.tsx

@@ -0,0 +1,30 @@
+import { ApolloLink, Observable } from "@apollo/client";
+import { GraphQLError } from "graphql";
+import * as entryPoint from "@apollo/client-react-streaming";
+
+declare module "@apollo/client" {
+  type Env = "ssr" | "browser" | "rsc";
+  export interface DefaultContext {
+    error?: "always" | Env | `${Env},${Env}`;
+  }
+}
+
+export const errorLink = new ApolloLink((operation, forward) => {
+  const context = operation.getContext();
+  if (
+    context.error === "always" ||
+    ("built_for_ssr" in entryPoint &&
+      context.error?.split(",").includes("ssr")) ||
+    ("built_for_browser" in entryPoint &&
+      context.error?.split(",").includes("browser")) ||
+    ("built_for_rsc" in entryPoint && context.error?.split(",").includes("rsc"))
+  ) {
+    return new Observable((subscriber) => {
+      subscriber.next({
+        data: null,
+        errors: [new GraphQLError("Simulated error")],
+      });
+    });
+  }
+  return forward(operation);
+});