diff --git a/integration-test/nextjs/package.json b/integration-test/nextjs/package.json index d2459cf5..ae488694 100644 --- 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/client@0.0.0-pr-11757-20240405111250", "@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 index c48c5f11..521e5642 100644 --- 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/integration-test/nextjs/src/app/rsc/dynamic/PreloadQuery/ClientChild.tsx b/integration-test/nextjs/src/app/rsc/dynamic/PreloadQuery/queryRef-useReadQuery/ClientChild.tsx similarity index 65% rename from integration-test/nextjs/src/app/rsc/dynamic/PreloadQuery/ClientChild.tsx rename to integration-test/nextjs/src/app/rsc/dynamic/PreloadQuery/queryRef-useReadQuery/ClientChild.tsx index 5371fa42..fac78dda 100644 --- a/integration-test/nextjs/src/app/rsc/dynamic/PreloadQuery/ClientChild.tsx +++ b/integration-test/nextjs/src/app/rsc/dynamic/PreloadQuery/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(queryRef); diff --git a/integration-test/nextjs/src/app/rsc/dynamic/PreloadQuery/page.tsx b/integration-test/nextjs/src/app/rsc/dynamic/PreloadQuery/queryRef-useReadQuery/page.tsx similarity index 90% rename from integration-test/nextjs/src/app/rsc/dynamic/PreloadQuery/page.tsx rename to integration-test/nextjs/src/app/rsc/dynamic/PreloadQuery/queryRef-useReadQuery/page.tsx index 93345b3f..d8672135 100644 --- a/integration-test/nextjs/src/app/rsc/dynamic/PreloadQuery/page.tsx +++ b/integration-test/nextjs/src/app/rsc/dynamic/PreloadQuery/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 new file mode 100644 index 00000000..4e1c0521 --- /dev/null +++ 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 ( + + ); +} 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 new file mode 100644 index 00000000..1f8008e0 --- /dev/null +++ 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 ( + + + loading}> + + + + + ); +} diff --git a/integration-test/yarn.lock b/integration-test/yarn.lock index 25e0664b..9f70090e 100644 --- a/integration-test/yarn.lock +++ b/integration-test/yarn.lock @@ -44,6 +44,43 @@ __metadata: languageName: node linkType: hard +"@apollo/client@npm:@apollo/client@0.0.0-pr-11757-20240405111250": + 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/client@0.0.0-pr-11757-20240405111250" "@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 index 09d95a0f..9142f3dc 100644 --- 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 = {