tests for both notations

apollographql · Apr 5, 2024 · 50642e4 · 50642e4
1 parent 293e03e
commit 50642e4
Show file tree

Hide file tree

Showing 8 changed files with 126 additions and 48 deletions.
diff --git a/integration-test/nextjs/package.json b/integration-test/nextjs/package.json
@@ -10,7 +10,7 @@
     "test": "yarn playwright test"
   },
   "dependencies": {
-    "@apollo/client": "^3.9.6",
+    "@apollo/client": "npm:@apollo/[email protected]",
     "@apollo/experimental-nextjs-app-support": "workspace:*",
     "@apollo/server": "^4.9.5",
     "@as-integrations/next": "^3.0.0",

diff --git a/integration-test/nextjs/src/app/rsc/dynamic/PreloadQuery/PreloadQuery.test.ts b/integration-test/nextjs/src/app/rsc/dynamic/PreloadQuery/PreloadQuery.test.ts
@@ -2,40 +2,47 @@ import { expect } from "@playwright/test";
 import { test } from "../../../../../fixture";
 
 test.describe("PreloadQuery", () => {
-  test("query resolves on the server", async ({ page, blockRequest }) => {
-    await page.goto(
-      "http://localhost:3000/rsc/dynamic/PreloadQuery?errorIn=ssr,browser",
-      {
-        waitUntil: "commit",
-      }
-    );
+  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).toBeInitiallyLoading(true);
+        await expect(page.getByText("loading")).not.toBeVisible();
+        await expect(page.getByText("Soft Warm Apollo Beanie")).toBeVisible();
+      });
 
-  test("query errors on the server, restarts in the browser", async ({
-    page,
-  }) => {
-    page.allowErrors?.();
-    await page.goto(
-      "http://localhost:3000/rsc/dynamic/PreloadQuery?errorIn=rsc",
-      {
-        waitUntil: "commit",
-      }
-    );
+      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 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 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("loading")).not.toBeVisible();
+        await expect(page.getByText("Soft Warm Apollo Beanie")).toBeVisible();
+      });
+    });
+  }
 });
diff --git a/.../rsc/dynamic/PreloadQuery/ClientChild.tsx → ...ery/queryRef-useReadQuery/ClientChild.tsx b/.../rsc/dynamic/PreloadQuery/ClientChild.tsx → ...ery/queryRef-useReadQuery/ClientChild.tsx
@@ -1,12 +1,6 @@
 "use client";
 
-import {
-  QueryReference,
-  useBackgroundQuery,
-  useReadQuery,
-  useSuspenseQuery,
-} from "@apollo/client";
-import { QUERY } from "./shared";
+import { QueryReference, useReadQuery } from "@apollo/client";
 
 export function ClientChild({ queryRef }: { queryRef: QueryReference }) {
   const { data } = useReadQuery<any>(queryRef);

diff --git a/...src/app/rsc/dynamic/PreloadQuery/page.tsx → ...eloadQuery/queryRef-useReadQuery/page.tsx b/...src/app/rsc/dynamic/PreloadQuery/page.tsx → ...eloadQuery/queryRef-useReadQuery/page.tsx
@@ -1,10 +1,10 @@
 import { ApolloWrapper } from "@/app/cc/ApolloWrapper";
 import { PreloadQuery } from "@apollo/client-react-streaming";
 import { ClientChild } from "./ClientChild";
-import { QUERY } from "./shared";
+import { QUERY } from "../shared";
 
 export const dynamic = "force-dynamic";
-import { getClient } from "../../client";
+import { getClient } from "../../../client";
 import { Suspense } from "react";
 
 export default function Page({ searchParams }: { searchParams?: any }) {

diff --git a/integration-test/nextjs/src/app/rsc/dynamic/PreloadQuery/useSuspenseQuery/ClientChild.tsx b/integration-test/nextjs/src/app/rsc/dynamic/PreloadQuery/useSuspenseQuery/ClientChild.tsx
@@ -0,0 +1,15 @@
+"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>
+  );
+}
diff --git a/integration-test/nextjs/src/app/rsc/dynamic/PreloadQuery/useSuspenseQuery/page.tsx b/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>
+  );
+}
diff --git a/integration-test/yarn.lock b/integration-test/yarn.lock
@@ -44,6 +44,43 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@apollo/client@npm:@apollo/[email protected]":
+  version: 0.0.0-pr-11757-20240405111250
+  resolution: "@apollo/client@npm:0.0.0-pr-11757-20240405111250"
+  dependencies:
+    "@graphql-typed-document-node/core": "npm:^3.1.1"
+    "@wry/caches": "npm:^1.0.0"
+    "@wry/equality": "npm:^0.5.6"
+    "@wry/trie": "npm:^0.5.0"
+    graphql-tag: "npm:^2.12.6"
+    hoist-non-react-statics: "npm:^3.3.2"
+    optimism: "npm:^0.18.0"
+    prop-types: "npm:^15.7.2"
+    rehackt: "npm:0.0.6"
+    response-iterator: "npm:^0.2.6"
+    symbol-observable: "npm:^4.0.0"
+    ts-invariant: "npm:^0.10.3"
+    tslib: "npm:^2.3.0"
+    zen-observable-ts: "npm:^1.2.5"
+  peerDependencies:
+    graphql: ^15.0.0 || ^16.0.0
+    graphql-ws: ^5.5.5
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+    subscriptions-transport-ws: ^0.9.0 || ^0.11.0
+  peerDependenciesMeta:
+    graphql-ws:
+      optional: true
+    react:
+      optional: true
+    react-dom:
+      optional: true
+    subscriptions-transport-ws:
+      optional: true
+  checksum: 10/a9ff604e63042a1d40263d63f93ef823d84a23e716a310dc9491a22663512dd449e81583bbd677fe4b8b6ac10ec82254858705f32ebc21e4a669605bfadd09d3
+  languageName: node
+  linkType: hard
+
 "@apollo/client@npm:^3.9.6":
   version: 3.9.6
   resolution: "@apollo/client@npm:3.9.6"
@@ -2026,7 +2063,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@integration-test/nextjs@workspace:nextjs"
   dependencies:
-    "@apollo/client": "npm:^3.9.6"
+    "@apollo/client": "npm:@apollo/[email protected]"
     "@apollo/experimental-nextjs-app-support": "workspace:*"
     "@apollo/server": "npm:^4.9.5"
     "@as-integrations/next": "npm:^3.0.0"

diff --git a/packages/client-react-streaming/src/DataTransportAbstraction/hooks.ts b/packages/client-react-streaming/src/DataTransportAbstraction/hooks.ts
@@ -3,12 +3,8 @@ import type {
   QueryReference,
 } from "@apollo/client/react/internal/index.js";
 import { useTransportValue } from "./useTransportValue.js";
-import {
-  QueryOptions,
-  getApolloContext,
-  createQueryPreloader,
-  OperationVariables,
-} from "@apollo/client";
+import type { QueryOptions } from "@apollo/client";
+import { getApolloContext, createQueryPreloader } from "@apollo/client";
 import { use } from "react";
 
 export const hookWrappers: HookWrappers = {