restart simulated streamed request on stream close (#62)

integration-test/fixture.ts

@@ -23,7 +23,6 @@ expect.extend({
 });
 
 export const test = base.extend<{
-  withHar: import("@playwright/test").Page;
   blockRequest: import("@playwright/test").Page;
 }>({
   page: async ({ page }, use) => {

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

@@ -0,0 +1,62 @@
+import { expect } from "@playwright/test";
+import { test } from "../../../../fixture";
+
+test.describe("CC dynamic", () => {
+  test.describe("useSuspenseQuery", () => {
+    test("one query", async ({ page, blockRequest }) => {
+      await page.goto("http://localhost:3000/cc/dynamic/useSuspenseQuery", {
+        waitUntil: "commit",
+      });
+
+      await expect(page).toBeInitiallyLoading(false);
+      await expect(page.getByText("Soft Warm Apollo Beanie")).toBeVisible();
+    });
+  });
+  test.describe("useBackgroundQuery", () => {
+    test("one query", async ({ page, blockRequest }) => {
+      await page.goto("http://localhost:3000/cc/dynamic/useBackgroundQuery", {
+        waitUntil: "commit",
+      });
+
+      await expect(page).toBeInitiallyLoading(true);
+      await expect(page.getByText("loading")).not.toBeVisible();
+      await expect(page.getByText("Soft Warm Apollo Beanie")).toBeVisible();
+    });
+
+    // this will close the connection before the final result is received, so it can never be forwarded
+    test("no `useReadQuery` on the server", async ({ page }) => {
+      await page.goto(
+        "http://localhost:3000/cc/dynamic/useBackgroundQueryWithoutSsrReadQuery",
+        {
+          waitUntil: "commit",
+        }
+      );
+
+      await expect(page.getByText("rendered on server")).toBeVisible();
+      await expect(page.getByText("rendered on client")).toBeVisible();
+      await expect(page.getByText("loading")).toBeVisible();
+      await expect(page.getByText("loading")).not.toBeVisible();
+      await expect(page.getByText("Soft Warm Apollo Beanie")).toBeVisible();
+    });
+  });
+  test.describe("useQuery", () => {
+    test("without cache value", async ({ page }) => {
+      await page.goto("http://localhost:3000/cc/dynamic/useQuery", {
+        waitUntil: "commit",
+      });
+
+      await expect(page).toBeInitiallyLoading(true);
+      await expect(page.getByText("loading")).not.toBeVisible();
+      await expect(page.getByText("Soft Warm Apollo Beanie")).toBeVisible();
+    });
+
+    test("with cache value", async ({ page }) => {
+      await page.goto("http://localhost:3000/cc/dynamic/useQueryWithCache", {
+        waitUntil: "commit",
+      });
+
+      await expect(page).toBeInitiallyLoading(false);
+      await expect(page.getByText("Soft Warm Apollo Beanie")).toBeVisible();
+    });
+  });
+});

integration-test/src/app/cc/dynamic/useBackgroundQueryWithoutSsrReadQuery/page.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import {
+  useBackgroundQuery,
+  useReadQuery,
+} from "@apollo/experimental-nextjs-app-support/ssr";
+import type { TypedDocumentNode } from "@apollo/client";
+import { gql, QueryReference } from "@apollo/client";
+import { Suspense, useState, useEffect } from "react";
+
+interface Data {
+  products: {
+    id: string;
+    title: string;
+  }[];
+}
+
+const QUERY: TypedDocumentNode<Data> = gql`
+  query dynamicProducts {
+    products {
+      id
+      title
+    }
+  }
+`;
+
+export const dynamic = "force-dynamic";
+
+export default function Page() {
+  const [queryRef] = useBackgroundQuery(QUERY, { context: { delay: 2000 } });
+  const [isClient, setIsClient] = useState(false);
+  useEffect(() => setIsClient(true), []);
+  return (
+    <>
+      {isClient ? "rendered on client" : "rendered on server"}
+      <Suspense fallback={<p>loading</p>}>
+        {isClient ? <DisplayData queryRef={queryRef} /> : null}
+      </Suspense>
+    </>
+  );
+}
+
+function DisplayData({ queryRef }: { queryRef: QueryReference<Data> }) {
+  const { data } = useReadQuery(queryRef);
+  return (
+    <ul>
+      {data.products.map(({ id, title }) => (
+        <li key={id}>{title}</li>
+      ))}
+    </ul>
+  );
+}

integration-test/src/app/cc/static/static.test.ts

@@ -0,0 +1,32 @@
+import { expect } from "@playwright/test";
+import { test } from "../../../../fixture";
+
+test.describe("CC static", () => {
+  test.describe("useSuspenseQuery", () => {
+    test("one query", async ({ page, blockRequest }) => {
+      await page.goto("http://localhost:3000/cc/static/useSuspenseQuery", {
+        waitUntil: "commit",
+      });
+
+      await expect(page.getByText("Soft Warm Apollo Beanie")).toBeVisible();
+    });
+  });
+
+  test.describe("useBackgroundQuery", () => {
+    // this will close the connection before the final result is received, so it can never be forwarded
+    test("no `useReadQuery` on the server", async ({ page }) => {
+      await page.goto(
+        "http://localhost:3000/cc/static/useBackgroundQueryWithoutSsrReadQuery",
+        {
+          waitUntil: "commit",
+        }
+      );
+
+      await expect(page.getByText("rendered on server")).toBeVisible();
+      await expect(page.getByText("rendered on client")).toBeVisible();
+      await expect(page.getByText("loading")).toBeVisible();
+      await expect(page.getByText("loading")).not.toBeVisible();
+      await expect(page.getByText("Soft Warm Apollo Beanie")).toBeVisible();
+    });
+  });
+});

integration-test/src/app/cc/static/useBackgroundQueryWithoutSsrReadQuery/page.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import {
+  useBackgroundQuery,
+  useReadQuery,
+} from "@apollo/experimental-nextjs-app-support/ssr";
+import type { TypedDocumentNode } from "@apollo/client";
+import { gql, QueryReference } from "@apollo/client";
+import { Suspense, useState, useEffect } from "react";
+
+interface Data {
+  products: {
+    id: string;
+    title: string;
+  }[];
+}
+
+const QUERY: TypedDocumentNode<Data> = gql`
+  query dynamicProducts {
+    products {
+      id
+      title
+    }
+  }
+`;
+
+export default function Page() {
+  const [queryRef] = useBackgroundQuery(QUERY, { context: { delay: 2000 } });
+  const [isClient, setIsClient] = useState(false);
+  useEffect(() => setIsClient(true), []);
+  return (
+    <>
+      {isClient ? "rendered on client" : "rendered on server"}
+      <Suspense fallback={<p>loading</p>}>
+        {isClient ? <DisplayData queryRef={queryRef} /> : null}
+      </Suspense>
+    </>
+  );
+}
+
+function DisplayData({ queryRef }: { queryRef: QueryReference<Data> }) {
+  const { data } = useReadQuery(queryRef);
+  return (
+    <ul>
+      {data.products.map(({ id, title }) => (
+        <li key={id}>{title}</li>
+      ))}
+    </ul>
+  );
+}

integration-test/src/shared/delayLink.ts

@@ -11,7 +11,7 @@ export const delayLink = new ApolloLink((operation, forward) => {
   return new Observable((observer) => {
     const timeout = setTimeout(() => {
       forward(operation).subscribe(observer);
-    }, 1500);
+    }, operation.getContext().delay ?? 1500);
     return () => clearTimeout(timeout);
   });
 });