integrate useQueryRefHandlers

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/dynamic/PreloadQuery/PreloadQuery.test.ts

@@ -18,6 +18,9 @@ test.describe("PreloadQuery", () => {
         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 ({
@@ -42,7 +45,28 @@ test.describe("PreloadQuery", () => {
 
         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

@@ -1,14 +1,28 @@
 "use client";
 
-import { QueryReference, useReadQuery } from "@apollo/client";
+import {
+  QueryReference,
+  useQueryRefHandlers,
+  useReadQuery,
+} from "@apollo/client";
+import { DynamicProductResult } from "../shared";
 
-export function ClientChild({ queryRef }: { queryRef: QueryReference }) {
-  const { data } = useReadQuery<any>(queryRef);
+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>
+    <>
+      <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

@@ -22,7 +22,7 @@ export default function Page({ searchParams }: { searchParams?: any }) {
       >
         {(queryRef) => (
           <Suspense fallback={<>loading</>}>
-            <ClientChild queryRef={queryRef} />
+            <ClientChild queryRef={queryRef as any /*TODO*/} />
           </Suspense>
         )}
       </PreloadQuery>

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

@@ -1,15 +1,18 @@
 import { TypedDocumentNode, gql } from "@apollo/client";
 
-export const QUERY: TypedDocumentNode<{
+export interface DynamicProductResult {
   products: {
     id: string;
     title: string;
   }[];
-}> = gql`
+  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

@@ -6,10 +6,13 @@ 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>
+    <>
+      <ul>
+        {data.products.map(({ id, title }: any) => (
+          <li key={id}>{title}</li>
+        ))}
+      </ul>
+      <p>Queried in {data.env} environment</p>
+    </>
   );
 }

integration-test/package.json

@@ -4,7 +4,7 @@
   "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",
-    "@integration-test/nextjs/@apollo/client": "0.0.0-pr-11757-20240405111250"
+    "@integration-test/nextjs/@apollo/client": "0.0.0-pr-11771-20240409102352"
   },
   "workspaces": [
     "*"

integration-test/yarn.lock

@@ -44,9 +44,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@apollo/client@npm:0.0.0-pr-11757-20240405111250":
-  version: 0.0.0-pr-11757-20240405111250
-  resolution: "@apollo/client@npm:0.0.0-pr-11757-20240405111250"
+"@apollo/client@npm:0.0.0-pr-11771-20240409102352":
+  version: 0.0.0-pr-11771-20240409102352
+  resolution: "@apollo/client@npm:0.0.0-pr-11771-20240409102352"
   dependencies:
     "@graphql-typed-document-node/core": "npm:^3.1.1"
     "@wry/caches": "npm:^1.0.0"
@@ -77,7 +77,7 @@ __metadata:
       optional: true
     subscriptions-transport-ws:
       optional: true
-  checksum: 10/a9ff604e63042a1d40263d63f93ef823d84a23e716a310dc9491a22663512dd449e81583bbd677fe4b8b6ac10ec82254858705f32ebc21e4a669605bfadd09d3
+  checksum: 10/055f65bdb82a8e60c98c39a5e895d85296aa905a88fbf16f168f4acb0b8c2a717a978c21bb719c30f10507f5e2c7d6070369eec99c9d5f1072366c56f12bb5c1
   languageName: node
   linkType: hard
 

package.json

@@ -22,7 +22,8 @@
     "[email protected]": "18.3.0-canary-60a927d04-20240113",
     "[email protected]": "18.3.0-canary-60a927d04-20240113",
     "superjson": "1.13.3",
-    "@microsoft/api-documenter": "7.24.1"
+    "@microsoft/api-documenter": "7.24.1",
+    "@apollo/client": "0.0.0-pr-11771-20240409102352"
   },
   "devDependencies": {
     "@microsoft/api-documenter": "7.24.1",

packages/client-react-streaming/src/DataTransportAbstraction/hooks.ts

@@ -30,27 +30,37 @@ export const hookWrappers: HookWrappers = {
     return wrap(
       (queryRef) => {
         if (isTransportedQueryRef(queryRef)) {
-          if (queryRef.__transportedQueryRef === true) {
-            const preloader = createQueryPreloader(
-              use(getApolloContext()).client!
-            );
-            const { query, ...options } = queryRef.options;
-            // TODO: discuss what to do with the fetchPolicy here
-            options.fetchPolicy = "cache-first";
-            queryRef.__transportedQueryRef = preloader(
-              query,
-              options as typeof options & { fetchPolicy: "cache-first" }
-            );
-          }
-          queryRef = queryRef.__transportedQueryRef;
+          queryRef = reviveTransportedQueryRef(queryRef);
         }
         return orig_useReadQuery(queryRef);
       },
       ["data", "networkStatus"]
     );
   },
+  useQueryRefHandlers(orig_useQueryRefHandlers) {
+    return wrap((queryRef) => {
+      if (isTransportedQueryRef(queryRef)) {
+        queryRef = reviveTransportedQueryRef(queryRef);
+      }
+      return orig_useQueryRefHandlers(queryRef);
+    }, []);
+  },
 };
 
+function reviveTransportedQueryRef(queryRef: TransportedQueryRef) {
+  if (queryRef.__transportedQueryRef === true) {
+    const preloader = createQueryPreloader(use(getApolloContext()).client!);
+    const { query, ...options } = queryRef.options;
+    // TODO: discuss what to do with the fetchPolicy here
+    options.fetchPolicy = "cache-first";
+    queryRef.__transportedQueryRef = preloader(
+      query,
+      options as typeof options & { fetchPolicy: "cache-first" }
+    );
+  }
+  return queryRef.__transportedQueryRef;
+}
+
 function isTransportedQueryRef(
   queryRef: object
 ): queryRef is TransportedQueryRef {
@@ -68,6 +78,9 @@ function wrap<T extends (...args: any[]) => any>(
 ): T {
   return ((...args: any[]) => {
     const result = useFn(...args);
+    if (transportKeys.length == 0) {
+      return result;
+    }
     const transported: Partial<typeof result> = {};
     for (const key of transportKeys) {
       transported[key] = result[key];

yarn.lock

@@ -85,9 +85,9 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@apollo/client@npm:3.9.9, @apollo/client@npm:^3.9.9":
-  version: 3.9.9
-  resolution: "@apollo/client@npm:3.9.9"
+"@apollo/client@npm:0.0.0-pr-11771-20240409102352":
+  version: 0.0.0-pr-11771-20240409102352
+  resolution: "@apollo/client@npm:0.0.0-pr-11771-20240409102352"
   dependencies:
     "@graphql-typed-document-node/core": "npm:^3.1.1"
     "@wry/caches": "npm:^1.0.0"
@@ -118,7 +118,7 @@ __metadata:
       optional: true
     subscriptions-transport-ws:
       optional: true
-  checksum: 10/9e67f8867eb4fd8a29c36267d919f20d003584040134744db99d85db18cfc2ba61364586c76799bef413b690fc3957a37b79b9b1e084bf1730217aa95d7efd2f
+  checksum: 10/055f65bdb82a8e60c98c39a5e895d85296aa905a88fbf16f168f4acb0b8c2a717a978c21bb719c30f10507f5e2c7d6070369eec99c9d5f1072366c56f12bb5c1
   languageName: node
   linkType: hard