From cb00d3769e884ddd18861829b05deff2cb4ea1c1 Mon Sep 17 00:00:00 2001 From: Lenz Weber-Tronic Date: Wed, 15 May 2024 10:41:33 +0200 Subject: [PATCH 1/6] add shared `@apollo/experimental-nextjs-app-support` entry point --- .../WrappedApolloClient.tsx | 2 +- .../experimental-nextjs-app-support/README.md | 38 ++++++++--------- .../package-shape.json | 41 +++++++++++++++++++ .../package.json | 18 +++++++- .../src/ApolloNextAppProvider.ts | 10 +++-- .../src/bundleInfo.ts | 6 +-- .../src/combined.ts | 17 ++++++++ .../src/index.rsc.ts | 2 + .../src/index.shared.ts | 26 ++++++++++++ .../src/index.ts | 16 ++++++++ .../src/rsc/index.ts | 2 +- .../src/ssr/index.ts | 26 ++---------- .../tsconfig.json | 5 ++- .../tsup.config.ts | 8 ++++ 14 files changed, 163 insertions(+), 54 deletions(-) create mode 100644 packages/experimental-nextjs-app-support/src/combined.ts create mode 100644 packages/experimental-nextjs-app-support/src/index.rsc.ts create mode 100644 packages/experimental-nextjs-app-support/src/index.shared.ts create mode 100644 packages/experimental-nextjs-app-support/src/index.ts diff --git a/packages/client-react-streaming/src/DataTransportAbstraction/WrappedApolloClient.tsx b/packages/client-react-streaming/src/DataTransportAbstraction/WrappedApolloClient.tsx index c331259f..952dc1e7 100644 --- a/packages/client-react-streaming/src/DataTransportAbstraction/WrappedApolloClient.tsx +++ b/packages/client-react-streaming/src/DataTransportAbstraction/WrappedApolloClient.tsx @@ -340,7 +340,7 @@ const ApolloClientImplementation = : ApolloClientBase; /** - * A version of `ApolloClient` to be used with streaming SSR. + * A version of `ApolloClient` to be used with streaming SSR or in React Server Components. * * For more documentation, please see {@link https://www.apollographql.com/docs/react/api/core/ApolloClient | the Apollo Client API documentation}. * diff --git a/packages/experimental-nextjs-app-support/README.md b/packages/experimental-nextjs-app-support/README.md index 24d4756c..21a44c6b 100644 --- a/packages/experimental-nextjs-app-support/README.md +++ b/packages/experimental-nextjs-app-support/README.md @@ -50,8 +50,12 @@ npm install @apollo/client@latest @apollo/experimental-nextjs-app-support Create an `ApolloClient.js` file: ```js -import { ApolloClient, HttpLink, InMemoryCache } from "@apollo/client"; -import { registerApolloClient } from "@apollo/experimental-nextjs-app-support/rsc"; +import { HttpLink } from "@apollo/client"; +import { + registerApolloClient, + ApolloClient, + InMemoryCache, +} from "@apollo/experimental-nextjs-app-support"; export const { getClient } = registerApolloClient(() => { return new ApolloClient({ @@ -86,10 +90,10 @@ First, create a new file `app/ApolloWrapper.jsx`: import { ApolloLink, HttpLink } from "@apollo/client"; import { ApolloNextAppProvider, - NextSSRInMemoryCache, - NextSSRApolloClient, + ApolloClient, + InMemoryCache, SSRMultipartLink, -} from "@apollo/experimental-nextjs-app-support/ssr"; +} from "@apollo/experimental-nextjs-app-support"; // have a function to create a client for you function makeClient() { @@ -105,21 +109,11 @@ function makeClient() { // const { data } = useSuspenseQuery(MY_QUERY, { context: { fetchOptions: { cache: "force-cache" }}}); }); - return new NextSSRApolloClient({ - // use the `NextSSRInMemoryCache`, not the normal `InMemoryCache` - cache: new NextSSRInMemoryCache(), - link: - typeof window === "undefined" - ? ApolloLink.from([ - // in a SSR environment, if you use multipart features like - // @defer, you need to decide how to handle these. - // This strips all interfaces with a `@defer` directive from your queries. - new SSRMultipartLink({ - stripDefer: true, - }), - httpLink, - ]) - : httpLink, + // use the `ApolloClient` from "@apollo/experimental-nextjs-app-support" + return new ApolloClient({ + // use the `InMemoryCache` from "@apollo/experimental-nextjs-app-support" + cache: new InMemoryCache(), + link: httpLink, }); } @@ -167,9 +161,9 @@ This package uses some singleton instances on the Browser side - if you are writ For that, you can use the `resetNextSSRApolloSingletons` helper: ```ts -import { resetNextSSRApolloSingletons } from "@apollo/experimental-nextjs-app-support/ssr"; +import { resetApolloClientSingletons } from "@apollo/experimental-nextjs-app-support"; -afterEach(resetNextSSRApolloSingletons); +afterEach(resetApolloClientSingletons); ``` ## Handling Multipart responses in SSR diff --git a/packages/experimental-nextjs-app-support/package-shape.json b/packages/experimental-nextjs-app-support/package-shape.json index 0e979872..1347707c 100644 --- a/packages/experimental-nextjs-app-support/package-shape.json +++ b/packages/experimental-nextjs-app-support/package-shape.json @@ -1,4 +1,45 @@ { + "@apollo/experimental-nextjs-app-support": { + "react-server": [ + "registerApolloClient", + "DebounceMultipartResponsesLink", + "RemoveMultipartDirectivesLink", + "SSRMultipartLink", + "ApolloClient", + "InMemoryCache", + "built_for_rsc" + ], + "browser": [ + "ApolloNextAppProvider", + "DebounceMultipartResponsesLink", + "ApolloClient", + "InMemoryCache", + "RemoveMultipartDirectivesLink", + "SSRMultipartLink", + "resetApolloClientSingletons", + "built_for_browser" + ], + "node": [ + "ApolloNextAppProvider", + "DebounceMultipartResponsesLink", + "ApolloClient", + "InMemoryCache", + "RemoveMultipartDirectivesLink", + "SSRMultipartLink", + "resetApolloClientSingletons", + "built_for_ssr" + ], + "edge-light,worker,browser": [ + "ApolloNextAppProvider", + "DebounceMultipartResponsesLink", + "ApolloClient", + "InMemoryCache", + "RemoveMultipartDirectivesLink", + "SSRMultipartLink", + "resetApolloClientSingletons", + "built_for_ssr" + ] + }, "@apollo/experimental-nextjs-app-support/ssr": { "react-server": [ "DebounceMultipartResponsesLink", diff --git a/packages/experimental-nextjs-app-support/package.json b/packages/experimental-nextjs-app-support/package.json index 0ca7ab6f..21bc9470 100644 --- a/packages/experimental-nextjs-app-support/package.json +++ b/packages/experimental-nextjs-app-support/package.json @@ -16,6 +16,22 @@ ], "type": "module", "exports": { + ".": { + "require": { + "types": "./dist/combined.d.cts", + "react-server": "./dist/index.rsc.cjs", + "edge-light": "./dist/index.ssr.cjs", + "browser": "./dist/index.browser.cjs", + "node": "./dist/index.ssr.cjs" + }, + "import": { + "types": "./dist/combined.d.ts", + "react-server": "./dist/index.rsc.js", + "edge-light": "./dist/index.ssr.js", + "browser": "./dist/index.browser.js", + "node": "./dist/index.ssr.js" + } + }, "./rsc": { "require": { "types": "./dist/rsc/index.d.cts", @@ -56,7 +72,7 @@ ] } }, - "typings": "./dist/empty.d.ts", + "typings": "./dist/combined.d.ts", "author": "packages@apollographql.com", "license": "MIT", "files": [ diff --git a/packages/experimental-nextjs-app-support/src/ApolloNextAppProvider.ts b/packages/experimental-nextjs-app-support/src/ApolloNextAppProvider.ts index 1679ed87..b1d3c9c1 100644 --- a/packages/experimental-nextjs-app-support/src/ApolloNextAppProvider.ts +++ b/packages/experimental-nextjs-app-support/src/ApolloNextAppProvider.ts @@ -12,20 +12,24 @@ import { bundle } from "./bundleInfo.js"; * As opposed to the normal `ApolloProvider`, this version does not require a `client` prop, * but requires a `makeClient` prop instead. * - * Use this component together with `NextSSRApolloClient` and `NextSSRInMemoryCache` + * Use this component together with `ApolloClient` and `InMemoryCache` + * from the "@apollo/experimental-nextjs-app-support" package * to make an ApolloClient instance available to your Client Component hooks in the * Next.js App Router. * * @example * `app/ApolloWrapper.jsx` * ```tsx + * import { HttpLink } from "@apollo/client"; + * import { ApolloNextAppProvider, ApolloClient, InMemoryCache } from "@apollo/experimental-nextjs-app-support"; + * * function makeClient() { * const httpLink = new HttpLink({ * uri: "https://example.com/api/graphql", * }); * - * return new NextSSRApolloClient({ - * cache: new NextSSRInMemoryCache(), + * return new ApolloClient({ + * cache: new InMemoryCache(), * link: httpLink, * }); * } diff --git a/packages/experimental-nextjs-app-support/src/bundleInfo.ts b/packages/experimental-nextjs-app-support/src/bundleInfo.ts index 58fc2bdf..5f44d9e2 100644 --- a/packages/experimental-nextjs-app-support/src/bundleInfo.ts +++ b/packages/experimental-nextjs-app-support/src/bundleInfo.ts @@ -1,5 +1,5 @@ export const bundle = { - pkg: "@apollo/experimental-nextjs-app-support/ssr", - client: "NextSSRApolloClient", - cache: "NextSSRInMemoryCache", + pkg: "@apollo/experimental-nextjs-app-support", + client: "ApolloClient", + cache: "InMemoryCache", }; diff --git a/packages/experimental-nextjs-app-support/src/combined.ts b/packages/experimental-nextjs-app-support/src/combined.ts new file mode 100644 index 00000000..086e6ca7 --- /dev/null +++ b/packages/experimental-nextjs-app-support/src/combined.ts @@ -0,0 +1,17 @@ +/** + * TypeScript does not have the concept of these environments, + * so we need to create a single entry point that combines all + * possible exports. + * That means that users will be offered "RSC" exports in a + * "SSR/Browser" code file, but those will error in a compilation + * step. + * + * This is a limitation of TypeScript, and we can't do anything + * about it. + * + * The build process will only create `.d.ts`/`d.cts` files from + * this, and not actual runtime code. + */ + +export * from "./index.rsc.js"; +export * from "./index.js"; diff --git a/packages/experimental-nextjs-app-support/src/index.rsc.ts b/packages/experimental-nextjs-app-support/src/index.rsc.ts new file mode 100644 index 00000000..a7649d95 --- /dev/null +++ b/packages/experimental-nextjs-app-support/src/index.rsc.ts @@ -0,0 +1,2 @@ +export * from "./index.shared.js"; +export { registerApolloClient } from "@apollo/client-react-streaming"; diff --git a/packages/experimental-nextjs-app-support/src/index.shared.ts b/packages/experimental-nextjs-app-support/src/index.shared.ts new file mode 100644 index 00000000..f117a148 --- /dev/null +++ b/packages/experimental-nextjs-app-support/src/index.shared.ts @@ -0,0 +1,26 @@ +export { + SSRMultipartLink, + DebounceMultipartResponsesLink, + RemoveMultipartDirectivesLink, + InMemoryCache, +} from "@apollo/client-react-streaming"; +import { bundle } from "./bundleInfo.js"; +import { ApolloClient as UpstreamApolloClient } from "@apollo/client-react-streaming"; + +/** + * A version of `ApolloClient` to be used with streaming SSR or in React Server Components. + * + * For more documentation, please see {@link https://www.apollographql.com/docs/react/api/core/ApolloClient | the Apollo Client API documentation}. + * + * @public + */ +export class ApolloClient< + TCacheShape, +> extends UpstreamApolloClient { + /** + * Information about the current package and it's export names, for use in error messages. + * + * @internal + */ + static readonly info = bundle; +} diff --git a/packages/experimental-nextjs-app-support/src/index.ts b/packages/experimental-nextjs-app-support/src/index.ts new file mode 100644 index 00000000..bfb5f80a --- /dev/null +++ b/packages/experimental-nextjs-app-support/src/index.ts @@ -0,0 +1,16 @@ +export * from "./index.shared.js"; +export { ApolloNextAppProvider } from "./ApolloNextAppProvider.js"; +import { resetManualSSRApolloSingletons } from "@apollo/client-react-streaming/manual-transport"; +/** + * > This export is only available in React Client Components + * + * Resets the singleton instances created for the Apollo SSR data transport and caches. + * + * To be used in testing only, like + * ```ts + * afterEach(resetApolloClientSingletons); + * ``` + * + * @public + */ +export const resetApolloClientSingletons = resetManualSSRApolloSingletons; diff --git a/packages/experimental-nextjs-app-support/src/rsc/index.ts b/packages/experimental-nextjs-app-support/src/rsc/index.ts index fe8b3f08..e6891201 100644 --- a/packages/experimental-nextjs-app-support/src/rsc/index.ts +++ b/packages/experimental-nextjs-app-support/src/rsc/index.ts @@ -1 +1 @@ -export { registerApolloClient } from "@apollo/client-react-streaming"; +export { registerApolloClient } from "@apollo/experimental-nextjs-app-support"; diff --git a/packages/experimental-nextjs-app-support/src/ssr/index.ts b/packages/experimental-nextjs-app-support/src/ssr/index.ts index b09ff525..acb88504 100644 --- a/packages/experimental-nextjs-app-support/src/ssr/index.ts +++ b/packages/experimental-nextjs-app-support/src/ssr/index.ts @@ -1,13 +1,12 @@ -export { ApolloNextAppProvider } from "../ApolloNextAppProvider.js"; -export { resetManualSSRApolloSingletons as resetNextSSRApolloSingletons } from "@apollo/client-react-streaming/manual-transport"; -import { ApolloClient } from "@apollo/client-react-streaming"; -import { bundle } from "../bundleInfo.js"; export { InMemoryCache as NextSSRInMemoryCache, + ApolloClient as NextSSRApolloClient, SSRMultipartLink, DebounceMultipartResponsesLink, RemoveMultipartDirectivesLink, -} from "@apollo/client-react-streaming"; + ApolloNextAppProvider, + resetApolloClientSingletons as resetNextSSRApolloSingletons, +} from "@apollo/experimental-nextjs-app-support"; export { useBackgroundQuery, useFragment, @@ -15,20 +14,3 @@ export { useReadQuery, useSuspenseQuery, } from "@apollo/client/index.js"; -/** - * A version of `ApolloClient` to be used with streaming SSR. - * - * For more documentation, please see {@link https://www.apollographql.com/docs/react/api/core/ApolloClient | the Apollo Client API documentation}. - * - * @public - */ -export class NextSSRApolloClient< - TCacheShape, -> extends ApolloClient { - /** - * Information about the current package and it's export names, for use in error messages. - * - * @internal - */ - static readonly info = bundle; -} diff --git a/packages/experimental-nextjs-app-support/tsconfig.json b/packages/experimental-nextjs-app-support/tsconfig.json index 82531828..a29b456c 100644 --- a/packages/experimental-nextjs-app-support/tsconfig.json +++ b/packages/experimental-nextjs-app-support/tsconfig.json @@ -11,7 +11,10 @@ "jsx": "react", "declarationMap": true, "types": ["react/canary", "node"], - "esModuleInterop": true + "esModuleInterop": true, + "paths": { + "@apollo/experimental-nextjs-app-support": ["./src/combined.ts"] + } }, "include": ["src"] } diff --git a/packages/experimental-nextjs-app-support/tsup.config.ts b/packages/experimental-nextjs-app-support/tsup.config.ts index 404e5e14..a6d5efff 100644 --- a/packages/experimental-nextjs-app-support/tsup.config.ts +++ b/packages/experimental-nextjs-app-support/tsup.config.ts @@ -14,6 +14,7 @@ export default defineConfig((options) => { external: [ "@apollo/client-react-streaming", "@apollo/client-react-streaming/manual-transport", + "@apollo/experimental-nextjs-app-support", "react", "rehackt", ], @@ -50,7 +51,14 @@ export default defineConfig((options) => { } return [ + { + ...entry("other", "src/combined.ts", "combined"), + dts: { only: true }, + }, entry("other", "src/empty.ts", "empty"), + entry("rsc", "src/index.rsc.ts", "index.rsc"), + entry("ssr", "src/index.ts", "index.ssr"), + entry("browser", "src/index.ts", "index.browser"), entry("rsc", "src/rsc/index.ts", "rsc/index"), entry("rsc", "src/ssr/index.rsc.ts", "ssr/index.rsc"), entry("ssr", "src/ssr/index.ts", "ssr/index.ssr"), From acaf37981f0caa7e3910e43e35797235fbfd8d75 Mon Sep 17 00:00:00 2001 From: Lenz Weber-Tronic Date: Wed, 15 May 2024 10:45:46 +0200 Subject: [PATCH 2/6] update docs --- ...eact-streaming.buildmanualdatatransport.md | 4 ++-- docs/client-react-streaming.queryevent.md | 4 +++- ...imental-nextjs-app-support.apolloclient.md | 17 ++++++++++++++ ...extjs-app-support.apollonextappprovider.md | 9 +++++--- ...ental-nextjs-app-support.inmemorycache.md} | 4 ++-- docs/experimental-nextjs-app-support.md | 22 +++++++++---------- ...-nextjs-app-support.nextssrapolloclient.md | 17 -------------- ...pp-support.resetapolloclientsingletons.md} | 4 ++-- .../api-extractor.d.ts | 3 +-- 9 files changed, 44 insertions(+), 40 deletions(-) create mode 100644 docs/experimental-nextjs-app-support.apolloclient.md rename docs/{experimental-nextjs-app-support.nextssrinmemorycache.md => experimental-nextjs-app-support.inmemorycache.md} (73%) delete mode 100644 docs/experimental-nextjs-app-support.nextssrapolloclient.md rename docs/{experimental-nextjs-app-support.resetnextssrapollosingletons.md => experimental-nextjs-app-support.resetapolloclientsingletons.md} (70%) diff --git a/docs/client-react-streaming.buildmanualdatatransport.md b/docs/client-react-streaming.buildmanualdatatransport.md index 1ea18b58..5c55d1b2 100644 --- a/docs/client-react-streaming.buildmanualdatatransport.md +++ b/docs/client-react-streaming.buildmanualdatatransport.md @@ -11,7 +11,7 @@ Creates a "manual" Data Transport, to be used with `WrapApolloProvider`. **Signature:** ```typescript -buildManualDataTransport: (args: BuildArgs) => DataTransportProviderImplementation +buildManualDataTransport: (args: ManualDataTransportOptions) => DataTransportProviderImplementation ``` ## Parameters @@ -39,7 +39,7 @@ args -BuildArgs +ManualDataTransportOptions diff --git a/docs/client-react-streaming.queryevent.md b/docs/client-react-streaming.queryevent.md index a8160b0a..087ef7a4 100644 --- a/docs/client-react-streaming.queryevent.md +++ b/docs/client-react-streaming.queryevent.md @@ -11,7 +11,9 @@ Events that will be emitted by a wrapped ApolloClient instance during SSR on `Da ```typescript type QueryEvent = { type: "started"; - options: WatchQueryOptions; + options: { + query: string; + } & Omit; id: TransportIdentifier; } | { type: "data"; diff --git a/docs/experimental-nextjs-app-support.apolloclient.md b/docs/experimental-nextjs-app-support.apolloclient.md new file mode 100644 index 00000000..eba6300f --- /dev/null +++ b/docs/experimental-nextjs-app-support.apolloclient.md @@ -0,0 +1,17 @@ + + +[Home](./index.md) > [@apollo/experimental-nextjs-app-support](./experimental-nextjs-app-support.md) > [ApolloClient](./experimental-nextjs-app-support.apolloclient.md) + +## ApolloClient class + +A version of `ApolloClient` to be used with streaming SSR or in React Server Components. + +For more documentation, please see [the Apollo Client API documentation](https://www.apollographql.com/docs/react/api/core/ApolloClient). + +**Signature:** + +```typescript +declare class ApolloClient extends ApolloClient$1 +``` +**Extends:** ApolloClient$1<TCacheShape> + diff --git a/docs/experimental-nextjs-app-support.apollonextappprovider.md b/docs/experimental-nextjs-app-support.apollonextappprovider.md index 742266ee..5ff06781 100644 --- a/docs/experimental-nextjs-app-support.apollonextappprovider.md +++ b/docs/experimental-nextjs-app-support.apollonextappprovider.md @@ -10,7 +10,7 @@ A version of `ApolloProvider` to be used with the Next.js App Router. As opposed to the normal `ApolloProvider`, this version does not require a `client` prop, but requires a `makeClient` prop instead. -Use this component together with `NextSSRApolloClient` and `NextSSRInMemoryCache` to make an ApolloClient instance available to your Client Component hooks in the Next.js App Router. +Use this component together with `ApolloClient` and `InMemoryCache` from the `@apollo/experimental-nextjs-app-support` package to make an ApolloClient instance available to your Client Component hooks in the Next.js App Router. **Signature:** @@ -23,13 +23,16 @@ ApolloNextAppProvider: _apollo_client_react_streaming.WrappedApolloProvider<_apo `app/ApolloWrapper.jsx` ```tsx +import { HttpLink } from "@apollo/client"; +import { ApolloNextAppProvider, ApolloClient, InMemoryCache } from "@apollo/experimental-nextjs-app-support"; + function makeClient() { const httpLink = new HttpLink({ uri: "https://example.com/api/graphql", }); - return new NextSSRApolloClient({ - cache: new NextSSRInMemoryCache(), + return new ApolloClient({ + cache: new InMemoryCache(), link: httpLink, }); } diff --git a/docs/experimental-nextjs-app-support.nextssrinmemorycache.md b/docs/experimental-nextjs-app-support.inmemorycache.md similarity index 73% rename from docs/experimental-nextjs-app-support.nextssrinmemorycache.md rename to docs/experimental-nextjs-app-support.inmemorycache.md index c28416f3..92e4ab51 100644 --- a/docs/experimental-nextjs-app-support.nextssrinmemorycache.md +++ b/docs/experimental-nextjs-app-support.inmemorycache.md @@ -1,8 +1,8 @@ -[Home](./index.md) > [@apollo/experimental-nextjs-app-support](./experimental-nextjs-app-support.md) > [NextSSRInMemoryCache](./experimental-nextjs-app-support.nextssrinmemorycache.md) +[Home](./index.md) > [@apollo/experimental-nextjs-app-support](./experimental-nextjs-app-support.md) > [InMemoryCache](./experimental-nextjs-app-support.inmemorycache.md) -## NextSSRInMemoryCache class +## InMemoryCache class A version of `InMemoryCache` to be used with streaming SSR. diff --git a/docs/experimental-nextjs-app-support.md b/docs/experimental-nextjs-app-support.md index 2436c8d2..9a5df2fa 100644 --- a/docs/experimental-nextjs-app-support.md +++ b/docs/experimental-nextjs-app-support.md @@ -20,35 +20,35 @@ Description -[DebounceMultipartResponsesLink](./experimental-nextjs-app-support.debouncemultipartresponseslink.md) +[ApolloClient](./experimental-nextjs-app-support.apolloclient.md) -This link can be used to "debounce" the initial response of a multipart request. Any incremental data received during the `cutoffDelay` time will be merged into the initial response. - -After `cutoffDelay`, the link will return the initial response, even if there is still incremental data pending, and close the network connection. +A version of `ApolloClient` to be used with streaming SSR or in React Server Components. -If `cutoffDelay` is `0`, the link will immediately return data as soon as it is received, without waiting for incremental data, and immediately close the network connection. +For more documentation, please see [the Apollo Client API documentation](https://www.apollographql.com/docs/react/api/core/ApolloClient). -[NextSSRApolloClient](./experimental-nextjs-app-support.nextssrapolloclient.md) +[DebounceMultipartResponsesLink](./experimental-nextjs-app-support.debouncemultipartresponseslink.md) -A version of `ApolloClient` to be used with streaming SSR. +This link can be used to "debounce" the initial response of a multipart request. Any incremental data received during the `cutoffDelay` time will be merged into the initial response. -For more documentation, please see [the Apollo Client API documentation](https://www.apollographql.com/docs/react/api/core/ApolloClient). +After `cutoffDelay`, the link will return the initial response, even if there is still incremental data pending, and close the network connection. + +If `cutoffDelay` is `0`, the link will immediately return data as soon as it is received, without waiting for incremental data, and immediately close the network connection. -[NextSSRInMemoryCache](./experimental-nextjs-app-support.nextssrinmemorycache.md) +[InMemoryCache](./experimental-nextjs-app-support.inmemorycache.md) @@ -139,7 +139,7 @@ Ensures that you can always access the same instance of ApolloClient during RSC -[resetNextSSRApolloSingletons()](./experimental-nextjs-app-support.resetnextssrapollosingletons.md) +[resetApolloClientSingletons()](./experimental-nextjs-app-support.resetapolloclientsingletons.md) @@ -184,7 +184,7 @@ A version of `ApolloProvider` to be used with the Next.js App Router. As opposed to the normal `ApolloProvider`, this version does not require a `client` prop, but requires a `makeClient` prop instead. -Use this component together with `NextSSRApolloClient` and `NextSSRInMemoryCache` to make an ApolloClient instance available to your Client Component hooks in the Next.js App Router. +Use this component together with `ApolloClient` and `InMemoryCache` from the `@apollo/experimental-nextjs-app-support` package to make an ApolloClient instance available to your Client Component hooks in the Next.js App Router. diff --git a/docs/experimental-nextjs-app-support.nextssrapolloclient.md b/docs/experimental-nextjs-app-support.nextssrapolloclient.md deleted file mode 100644 index 945aad84..00000000 --- a/docs/experimental-nextjs-app-support.nextssrapolloclient.md +++ /dev/null @@ -1,17 +0,0 @@ - - -[Home](./index.md) > [@apollo/experimental-nextjs-app-support](./experimental-nextjs-app-support.md) > [NextSSRApolloClient](./experimental-nextjs-app-support.nextssrapolloclient.md) - -## NextSSRApolloClient class - -A version of `ApolloClient` to be used with streaming SSR. - -For more documentation, please see [the Apollo Client API documentation](https://www.apollographql.com/docs/react/api/core/ApolloClient). - -**Signature:** - -```typescript -declare class NextSSRApolloClient extends ApolloClient -``` -**Extends:** ApolloClient<TCacheShape> - diff --git a/docs/experimental-nextjs-app-support.resetnextssrapollosingletons.md b/docs/experimental-nextjs-app-support.resetapolloclientsingletons.md similarity index 70% rename from docs/experimental-nextjs-app-support.resetnextssrapollosingletons.md rename to docs/experimental-nextjs-app-support.resetapolloclientsingletons.md index d896cf53..3ac3176e 100644 --- a/docs/experimental-nextjs-app-support.resetnextssrapollosingletons.md +++ b/docs/experimental-nextjs-app-support.resetapolloclientsingletons.md @@ -1,8 +1,8 @@ -[Home](./index.md) > [@apollo/experimental-nextjs-app-support](./experimental-nextjs-app-support.md) > [resetNextSSRApolloSingletons](./experimental-nextjs-app-support.resetnextssrapollosingletons.md) +[Home](./index.md) > [@apollo/experimental-nextjs-app-support](./experimental-nextjs-app-support.md) > [resetApolloClientSingletons](./experimental-nextjs-app-support.resetapolloclientsingletons.md) -## resetNextSSRApolloSingletons() function +## resetApolloClientSingletons() function > This export is only available in React Client Components diff --git a/packages/experimental-nextjs-app-support/api-extractor.d.ts b/packages/experimental-nextjs-app-support/api-extractor.d.ts index 28f02f54..d8c9ad8a 100644 --- a/packages/experimental-nextjs-app-support/api-extractor.d.ts +++ b/packages/experimental-nextjs-app-support/api-extractor.d.ts @@ -2,5 +2,4 @@ * @packageDocumentation */ -export * from "./dist/rsc/index.d.ts"; -export * from "./dist/ssr/index.ssr.d.ts"; +export * from "./dist/combined.d.ts"; From e6552437c8ce78d71f845efc1b949933713fb1e7 Mon Sep 17 00:00:00 2001 From: Lenz Weber-Tronic Date: Wed, 15 May 2024 10:56:10 +0200 Subject: [PATCH 3/6] adjust imports --- .size-limit.cjs | 19 +++++++++---------- .../app/ssr/ApolloWrapper.tsx | 10 +++++----- examples/app-dir-experiments/app/ssr/page.tsx | 6 +----- .../app/ApolloWrapper.tsx | 10 +++++----- examples/hack-the-supergraph-ssr/app/page.tsx | 3 +-- .../app/product/[id]/page.tsx | 2 +- .../components/ProductCard.tsx | 3 +-- examples/polls-demo/app/cc/apollo-wrapper.tsx | 10 +++++----- examples/polls-demo/app/cc/poll-cc.tsx | 6 +----- integration-test/jest/src/App.jsx | 18 +++++++++++------- integration-test/jest/src/App.test.jsx | 4 ++-- integration-test/jest/src/hooks.test.jsx | 15 +++++++-------- .../nextjs/src/app/cc/ApolloWrapper.tsx | 10 +++++----- .../cc/dynamic/useBackgroundQuery/page.tsx | 7 ++++--- .../page.tsx | 6 +++--- .../src/app/cc/dynamic/useQuery/page.tsx | 3 +-- .../app/cc/dynamic/useQueryWithCache/page.tsx | 6 +----- .../app/cc/dynamic/useSuspenseQuery/page.tsx | 3 +-- .../useSuspenseQueryWithError/page.tsx | 5 ++--- .../page.tsx | 7 ++++--- .../app/cc/static/useSuspenseQuery/page.tsx | 3 +-- integration-test/vitest/src/App.jsx | 18 +++++++++++------- integration-test/vitest/src/App.test.jsx | 4 ++-- integration-test/vitest/src/hooks.test.jsx | 12 ++++++------ 24 files changed, 90 insertions(+), 100 deletions(-) diff --git a/.size-limit.cjs b/.size-limit.cjs index 4d14675d..27d93a11 100644 --- a/.size-limit.cjs +++ b/.size-limit.cjs @@ -1,10 +1,9 @@ /** @type {import('size-limit').SizeLimitConfig} */ const checks = [ { - name: "{ ApolloNextAppProvider, NextSSRApolloClient, NextSSRInMemoryCache } from '@apollo/experimental-nextjs-app-support/ssr' (Browser ESM)", - path: "packages/experimental-nextjs-app-support/dist/ssr/index.browser.js", - import: - "{ ApolloNextAppProvider, NextSSRApolloClient, NextSSRInMemoryCache }", + name: "{ ApolloNextAppProvider, ApolloClient, InMemoryCache } from '@apollo/experimental-nextjs-app-support' (Browser ESM)", + path: "packages/experimental-nextjs-app-support/dist/index.browser.js", + import: "{ ApolloNextAppProvider, ApolloClient, InMemoryCache }", }, { name: "{ WrapApolloProvider, ApolloClient, InMemoryCache } from '@apollo/client-react-streaming' (Browser ESM)", @@ -37,16 +36,16 @@ const checks = [ path: "packages/client-react-streaming/dist/manual-transport.ssr.cjs", }, { - name: "@apollo/experimental-nextjs-app-support/ssr (Browser ESM)", - path: "packages/experimental-nextjs-app-support/dist/ssr/index.browser.js", + name: "@apollo/experimental-nextjs-app-support (Browser ESM)", + path: "packages/experimental-nextjs-app-support/dist/index.browser.js", }, { - name: "@apollo/experimental-nextjs-app-support/ssr (SSR ESM)", - path: "packages/experimental-nextjs-app-support/dist/ssr/index.ssr.js", + name: "@apollo/experimental-nextjs-app-support (SSR ESM)", + path: "packages/experimental-nextjs-app-support/dist/index.ssr.js", }, { - name: "@apollo/experimental-nextjs-app-support/ssr (RSC ESM)", - path: "packages/experimental-nextjs-app-support/dist/ssr/index.rsc.js", + name: "@apollo/experimental-nextjs-app-support (RSC ESM)", + path: "packages/experimental-nextjs-app-support/dist/index.rsc.js", }, { name: "@apollo/experimental-nextjs-app-support/rsc (RSC ESM)", diff --git a/examples/app-dir-experiments/app/ssr/ApolloWrapper.tsx b/examples/app-dir-experiments/app/ssr/ApolloWrapper.tsx index 204037a0..e7003ecf 100644 --- a/examples/app-dir-experiments/app/ssr/ApolloWrapper.tsx +++ b/examples/app-dir-experiments/app/ssr/ApolloWrapper.tsx @@ -3,10 +3,10 @@ import { ApolloLink, HttpLink } from "@apollo/client"; import { ApolloNextAppProvider, - NextSSRInMemoryCache, - NextSSRApolloClient, + InMemoryCache, + ApolloClient, SSRMultipartLink, -} from "@apollo/experimental-nextjs-app-support/ssr"; +} from "@apollo/experimental-nextjs-app-support"; import { setVerbosity } from "ts-invariant"; setVerbosity("debug"); @@ -17,8 +17,8 @@ function makeClient() { fetchOptions: { cache: "no-store" }, }); - return new NextSSRApolloClient({ - cache: new NextSSRInMemoryCache(), + return new ApolloClient({ + cache: new InMemoryCache(), link: typeof window === "undefined" ? ApolloLink.from([ diff --git a/examples/app-dir-experiments/app/ssr/page.tsx b/examples/app-dir-experiments/app/ssr/page.tsx index 372aec94..5b3ef26f 100644 --- a/examples/app-dir-experiments/app/ssr/page.tsx +++ b/examples/app-dir-experiments/app/ssr/page.tsx @@ -1,10 +1,6 @@ "use client"; import React, { Suspense } from "react"; -import { - useFragment, - useQuery, - useSuspenseQuery, -} from "@apollo/experimental-nextjs-app-support/ssr"; +import { useFragment, useQuery, useSuspenseQuery } from "@apollo/client"; import { gql } from "@apollo/client"; import { HtmlChangesObserver } from "@/components/HtmlChangesObserver"; diff --git a/examples/hack-the-supergraph-ssr/app/ApolloWrapper.tsx b/examples/hack-the-supergraph-ssr/app/ApolloWrapper.tsx index 7f115ba9..4167895e 100644 --- a/examples/hack-the-supergraph-ssr/app/ApolloWrapper.tsx +++ b/examples/hack-the-supergraph-ssr/app/ApolloWrapper.tsx @@ -4,10 +4,10 @@ import { ApolloLink, HttpLink } from "@apollo/client"; import clientCookies from "js-cookie"; import { ApolloNextAppProvider, - NextSSRInMemoryCache, - NextSSRApolloClient, + InMemoryCache, + ApolloClient, SSRMultipartLink, -} from "@apollo/experimental-nextjs-app-support/ssr"; +} from "@apollo/experimental-nextjs-app-support"; import { loadErrorMessages, loadDevMessages } from "@apollo/client/dev"; import { setVerbosity } from "ts-invariant"; @@ -68,8 +68,8 @@ export function ApolloWrapper({ ]) : ApolloLink.from([delayLink, httpLink]); - return new NextSSRApolloClient({ - cache: new NextSSRInMemoryCache(), + return new ApolloClient({ + cache: new InMemoryCache(), link, }); } diff --git a/examples/hack-the-supergraph-ssr/app/page.tsx b/examples/hack-the-supergraph-ssr/app/page.tsx index 1b3ede29..0a4dd36f 100644 --- a/examples/hack-the-supergraph-ssr/app/page.tsx +++ b/examples/hack-the-supergraph-ssr/app/page.tsx @@ -2,8 +2,7 @@ import ProductCard from "../components/ProductCard"; import { Heading, SimpleGrid, Stack, Text, VStack } from "@chakra-ui/react"; -import { gql, TypedDocumentNode } from "@apollo/client"; -import { useSuspenseQuery } from "@apollo/experimental-nextjs-app-support/ssr"; +import { useSuspenseQuery, gql, TypedDocumentNode } from "@apollo/client"; const GET_LATEST_PRODUCTS: TypedDocumentNode<{ products: { id: string }[]; diff --git a/examples/hack-the-supergraph-ssr/app/product/[id]/page.tsx b/examples/hack-the-supergraph-ssr/app/product/[id]/page.tsx index 81971bd4..516c9077 100644 --- a/examples/hack-the-supergraph-ssr/app/product/[id]/page.tsx +++ b/examples/hack-the-supergraph-ssr/app/product/[id]/page.tsx @@ -15,7 +15,7 @@ import { Text, } from "@chakra-ui/react"; import { gql, TypedDocumentNode } from "@apollo/client"; -import { useSuspenseQuery } from "@apollo/experimental-nextjs-app-support/ssr"; +import { useSuspenseQuery } from "@apollo/client"; const GET_PRODUCT_DETAILS: TypedDocumentNode<{ product: { diff --git a/examples/hack-the-supergraph-ssr/components/ProductCard.tsx b/examples/hack-the-supergraph-ssr/components/ProductCard.tsx index a5f002b7..06650aea 100644 --- a/examples/hack-the-supergraph-ssr/components/ProductCard.tsx +++ b/examples/hack-the-supergraph-ssr/components/ProductCard.tsx @@ -9,8 +9,7 @@ import { usePrefersReducedMotion, } from "@chakra-ui/react"; import Link from "next/link"; -import { TypedDocumentNode, gql } from "@apollo/client"; -import { useFragment } from "@apollo/experimental-nextjs-app-support/ssr"; +import { useFragment, TypedDocumentNode, gql } from "@apollo/client"; const ProductCardProductFragment: TypedDocumentNode<{ id: string; diff --git a/examples/polls-demo/app/cc/apollo-wrapper.tsx b/examples/polls-demo/app/cc/apollo-wrapper.tsx index b92ac869..f9b3e39a 100644 --- a/examples/polls-demo/app/cc/apollo-wrapper.tsx +++ b/examples/polls-demo/app/cc/apollo-wrapper.tsx @@ -2,11 +2,11 @@ import { ApolloLink, HttpLink } from "@apollo/client"; import { - NextSSRApolloClient, + ApolloClient, ApolloNextAppProvider, - NextSSRInMemoryCache, + InMemoryCache, SSRMultipartLink, -} from "@apollo/experimental-nextjs-app-support/ssr"; +} from "@apollo/experimental-nextjs-app-support"; import { loadErrorMessages, loadDevMessages } from "@apollo/client/dev"; import { setVerbosity } from "ts-invariant"; @@ -21,8 +21,8 @@ function makeClient() { uri: "https://apollo-next-poll.up.railway.app/", }); - return new NextSSRApolloClient({ - cache: new NextSSRInMemoryCache(), + return new ApolloClient({ + cache: new InMemoryCache(), link: typeof window === "undefined" ? ApolloLink.from([ diff --git a/examples/polls-demo/app/cc/poll-cc.tsx b/examples/polls-demo/app/cc/poll-cc.tsx index 73f6a4bc..d5897e4a 100644 --- a/examples/polls-demo/app/cc/poll-cc.tsx +++ b/examples/polls-demo/app/cc/poll-cc.tsx @@ -1,10 +1,6 @@ "use client"; import { Suspense } from "react"; -import { - useReadQuery, - useBackgroundQuery, -} from "@apollo/experimental-nextjs-app-support/ssr"; -import { useMutation } from "@apollo/client"; +import { useReadQuery, useBackgroundQuery, useMutation } from "@apollo/client"; import { QueryReference } from "@apollo/client/react"; import { Poll as PollInner } from "@/components/poll"; diff --git a/integration-test/jest/src/App.jsx b/integration-test/jest/src/App.jsx index 94e116a4..390f473b 100644 --- a/integration-test/jest/src/App.jsx +++ b/integration-test/jest/src/App.jsx @@ -1,12 +1,16 @@ import { Suspense, useState } from "react"; import { ApolloNextAppProvider, - NextSSRApolloClient, - NextSSRInMemoryCache, - useSuspenseQuery, -} from "@apollo/experimental-nextjs-app-support/ssr"; + ApolloClient, + InMemoryCache, +} from "@apollo/experimental-nextjs-app-support"; import { SchemaLink } from "@apollo/client/link/schema/index.js"; -import { gql, ApolloLink, Observable } from "@apollo/client/index.js"; +import { + useSuspenseQuery, + gql, + ApolloLink, + Observable, +} from "@apollo/client/index.js"; import { schema } from "./schema"; const delayLink = new ApolloLink((operation, forward) => { @@ -22,8 +26,8 @@ const delayLink = new ApolloLink((operation, forward) => { }); export const makeClient = () => { - return new NextSSRApolloClient({ - cache: new NextSSRInMemoryCache(), + return new ApolloClient({ + cache: new InMemoryCache(), link: delayLink.concat(new SchemaLink({ schema })), }); }; diff --git a/integration-test/jest/src/App.test.jsx b/integration-test/jest/src/App.test.jsx index c99bb53e..fd73b4bf 100644 --- a/integration-test/jest/src/App.test.jsx +++ b/integration-test/jest/src/App.test.jsx @@ -3,9 +3,9 @@ import userEvent from "@testing-library/user-event"; import "@testing-library/jest-dom"; import App from "./App"; -import { resetNextSSRApolloSingletons } from "@apollo/experimental-nextjs-app-support/ssr"; +import { resetApolloClientSingletons } from "@apollo/experimental-nextjs-app-support"; -afterEach(resetNextSSRApolloSingletons); +afterEach(resetApolloClientSingletons); test("loads data", async () => { render(); diff --git a/integration-test/jest/src/hooks.test.jsx b/integration-test/jest/src/hooks.test.jsx index c16a8f98..c688ad89 100644 --- a/integration-test/jest/src/hooks.test.jsx +++ b/integration-test/jest/src/hooks.test.jsx @@ -4,10 +4,9 @@ import "@testing-library/jest-dom"; import { makeClient, QUERY } from "./App"; import { ApolloNextAppProvider, - NextSSRApolloClient, - useQuery, - resetNextSSRApolloSingletons, -} from "@apollo/experimental-nextjs-app-support/ssr"; + ApolloClient, + resetApolloClientSingletons, +} from "@apollo/experimental-nextjs-app-support"; import { Suspense } from "react"; const wrapper = ({ children }) => ( @@ -16,7 +15,7 @@ const wrapper = ({ children }) => ( ); -afterEach(resetNextSSRApolloSingletons); +afterEach(resetApolloClientSingletons); /** * We test that jest is using the "browser" build. @@ -25,7 +24,7 @@ afterEach(resetNextSSRApolloSingletons); */ test("uses the browser build", () => { let foundPrototype = false; - let proto = NextSSRApolloClient; + let proto = ApolloClient; while (proto) { if (proto.name === "ApolloClientBrowserImpl") { foundPrototype = true; @@ -66,11 +65,11 @@ test("will set up the data transport", () => { expect(globalThis[Symbol.for("ApolloClientSingleton")]).toBeDefined(); }); -test("resetNextSSRApolloSingletons tears down global singletons", () => { +test("resetApolloClientSingletons tears down global singletons", () => { render(<>, { wrapper }); // wrappers are now set up, see last test // usually, we do this in `afterEach` - resetNextSSRApolloSingletons(); + resetApolloClientSingletons(); expect(globalThis[Symbol.for("ApolloSSRDataTransport")]).not.toBeDefined(); expect(globalThis[Symbol.for("ApolloClientSingleton")]).not.toBeDefined(); }); diff --git a/integration-test/nextjs/src/app/cc/ApolloWrapper.tsx b/integration-test/nextjs/src/app/cc/ApolloWrapper.tsx index 28c80b3b..480b62a9 100644 --- a/integration-test/nextjs/src/app/cc/ApolloWrapper.tsx +++ b/integration-test/nextjs/src/app/cc/ApolloWrapper.tsx @@ -3,9 +3,9 @@ import React from "react"; import { ApolloLink, HttpLink, Observable } from "@apollo/client"; import { ApolloNextAppProvider, - NextSSRInMemoryCache, - NextSSRApolloClient, -} from "@apollo/experimental-nextjs-app-support/ssr"; + InMemoryCache, + ApolloClient, +} from "@apollo/experimental-nextjs-app-support"; import { SchemaLink } from "@apollo/client/link/schema"; @@ -59,8 +59,8 @@ export function ApolloWrapper({ uri: "/graphql", }); - return new NextSSRApolloClient({ - cache: new NextSSRInMemoryCache(), + return new ApolloClient({ + cache: new InMemoryCache(), link: delayLink .concat(errorLink) .concat( diff --git a/integration-test/nextjs/src/app/cc/dynamic/useBackgroundQuery/page.tsx b/integration-test/nextjs/src/app/cc/dynamic/useBackgroundQuery/page.tsx index 58928057..e45a648d 100644 --- a/integration-test/nextjs/src/app/cc/dynamic/useBackgroundQuery/page.tsx +++ b/integration-test/nextjs/src/app/cc/dynamic/useBackgroundQuery/page.tsx @@ -1,11 +1,12 @@ "use client"; +import type { TypedDocumentNode } from "@apollo/client"; import { useBackgroundQuery, useReadQuery, -} from "@apollo/experimental-nextjs-app-support/ssr"; -import type { TypedDocumentNode } from "@apollo/client"; -import { gql, QueryReference } from "@apollo/client"; + gql, + QueryReference, +} from "@apollo/client"; import { Suspense } from "react"; interface Data { diff --git a/integration-test/nextjs/src/app/cc/dynamic/useBackgroundQueryWithoutSsrReadQuery/page.tsx b/integration-test/nextjs/src/app/cc/dynamic/useBackgroundQueryWithoutSsrReadQuery/page.tsx index 76c4326e..85879403 100644 --- a/integration-test/nextjs/src/app/cc/dynamic/useBackgroundQueryWithoutSsrReadQuery/page.tsx +++ b/integration-test/nextjs/src/app/cc/dynamic/useBackgroundQueryWithoutSsrReadQuery/page.tsx @@ -1,10 +1,10 @@ "use client"; -import { +import type { useBackgroundQuery, useReadQuery, -} from "@apollo/experimental-nextjs-app-support/ssr"; -import type { TypedDocumentNode } from "@apollo/client"; + TypedDocumentNode, +} from "@apollo/client"; import { gql, QueryReference } from "@apollo/client"; import { Suspense, useState, useEffect } from "react"; diff --git a/integration-test/nextjs/src/app/cc/dynamic/useQuery/page.tsx b/integration-test/nextjs/src/app/cc/dynamic/useQuery/page.tsx index d3f34c52..f150e009 100644 --- a/integration-test/nextjs/src/app/cc/dynamic/useQuery/page.tsx +++ b/integration-test/nextjs/src/app/cc/dynamic/useQuery/page.tsx @@ -1,8 +1,7 @@ "use client"; -import { useQuery } from "@apollo/experimental-nextjs-app-support/ssr"; import type { TypedDocumentNode } from "@apollo/client"; -import { gql } from "@apollo/client"; +import { useQuery, gql } from "@apollo/client"; const QUERY: TypedDocumentNode<{ products: { diff --git a/integration-test/nextjs/src/app/cc/dynamic/useQueryWithCache/page.tsx b/integration-test/nextjs/src/app/cc/dynamic/useQueryWithCache/page.tsx index 455d44f7..8df4b7ce 100644 --- a/integration-test/nextjs/src/app/cc/dynamic/useQueryWithCache/page.tsx +++ b/integration-test/nextjs/src/app/cc/dynamic/useQueryWithCache/page.tsx @@ -1,11 +1,7 @@ "use client"; -import { - useQuery, - useSuspenseQuery, -} from "@apollo/experimental-nextjs-app-support/ssr"; import type { TypedDocumentNode } from "@apollo/client"; -import { gql } from "@apollo/client"; +import { useQuery, useSuspenseQuery, gql } from "@apollo/client"; const QUERY: TypedDocumentNode<{ products: { diff --git a/integration-test/nextjs/src/app/cc/dynamic/useSuspenseQuery/page.tsx b/integration-test/nextjs/src/app/cc/dynamic/useSuspenseQuery/page.tsx index 56148d54..387ec10f 100644 --- a/integration-test/nextjs/src/app/cc/dynamic/useSuspenseQuery/page.tsx +++ b/integration-test/nextjs/src/app/cc/dynamic/useSuspenseQuery/page.tsx @@ -1,8 +1,7 @@ "use client"; -import { useSuspenseQuery } from "@apollo/experimental-nextjs-app-support/ssr"; import type { TypedDocumentNode } from "@apollo/client"; -import { gql } from "@apollo/client"; +import { useSuspenseQuery, gql } from "@apollo/client"; const QUERY: TypedDocumentNode<{ products: { diff --git a/integration-test/nextjs/src/app/cc/dynamic/useSuspenseQueryWithError/page.tsx b/integration-test/nextjs/src/app/cc/dynamic/useSuspenseQueryWithError/page.tsx index e1a5b5c0..0862ddad 100644 --- a/integration-test/nextjs/src/app/cc/dynamic/useSuspenseQueryWithError/page.tsx +++ b/integration-test/nextjs/src/app/cc/dynamic/useSuspenseQueryWithError/page.tsx @@ -1,10 +1,9 @@ "use client"; -import { useSuspenseQuery } from "@apollo/experimental-nextjs-app-support/ssr"; import type { TypedDocumentNode } from "@apollo/client"; -import { gql } from "@apollo/client"; +import { useSuspenseQuery, gql } from "@apollo/client"; import { ErrorBoundary, FallbackProps } from "react-error-boundary"; -import { Suspense, startTransition, useState, useTransition } from "react"; +import { Suspense } from "react"; const QUERY: TypedDocumentNode<{ products: { diff --git a/integration-test/nextjs/src/app/cc/static/useBackgroundQueryWithoutSsrReadQuery/page.tsx b/integration-test/nextjs/src/app/cc/static/useBackgroundQueryWithoutSsrReadQuery/page.tsx index 5ec41b4e..18a46960 100644 --- a/integration-test/nextjs/src/app/cc/static/useBackgroundQueryWithoutSsrReadQuery/page.tsx +++ b/integration-test/nextjs/src/app/cc/static/useBackgroundQueryWithoutSsrReadQuery/page.tsx @@ -1,11 +1,12 @@ "use client"; +import type { TypedDocumentNode } from "@apollo/client"; import { useBackgroundQuery, useReadQuery, -} from "@apollo/experimental-nextjs-app-support/ssr"; -import type { TypedDocumentNode } from "@apollo/client"; -import { gql, QueryReference } from "@apollo/client"; + gql, + QueryReference, +} from "@apollo/client"; import { Suspense, useState, useEffect } from "react"; interface Data { diff --git a/integration-test/nextjs/src/app/cc/static/useSuspenseQuery/page.tsx b/integration-test/nextjs/src/app/cc/static/useSuspenseQuery/page.tsx index 65449c48..16f631c0 100644 --- a/integration-test/nextjs/src/app/cc/static/useSuspenseQuery/page.tsx +++ b/integration-test/nextjs/src/app/cc/static/useSuspenseQuery/page.tsx @@ -1,8 +1,7 @@ "use client"; -import { useSuspenseQuery } from "@apollo/experimental-nextjs-app-support/ssr"; import type { TypedDocumentNode } from "@apollo/client"; -import { gql, useApolloClient } from "@apollo/client"; +import { gql, useSuspenseQuery } from "@apollo/client"; const QUERY: TypedDocumentNode<{ products: { diff --git a/integration-test/vitest/src/App.jsx b/integration-test/vitest/src/App.jsx index 12ccf395..2f5813b1 100644 --- a/integration-test/vitest/src/App.jsx +++ b/integration-test/vitest/src/App.jsx @@ -1,12 +1,16 @@ import { Suspense, useState } from "react"; import { ApolloNextAppProvider, - NextSSRApolloClient, - NextSSRInMemoryCache, - useSuspenseQuery, -} from "@apollo/experimental-nextjs-app-support/ssr"; + ApolloClient, + InMemoryCache, +} from "@apollo/experimental-nextjs-app-support"; import { SchemaLink } from "@apollo/client/link/schema/index.js"; -import { gql, ApolloLink, Observable } from "@apollo/client/index.js"; +import { + useSuspenseQuery, + gql, + ApolloLink, + Observable, +} from "@apollo/client/index.js"; import { schema } from "./schema"; const delayLink = new ApolloLink((operation, forward) => { @@ -22,8 +26,8 @@ const delayLink = new ApolloLink((operation, forward) => { }); export const makeClient = () => { - return new NextSSRApolloClient({ - cache: new NextSSRInMemoryCache(), + return new ApolloClient({ + cache: new InMemoryCache(), link: delayLink.concat(new SchemaLink({ schema })), }); }; diff --git a/integration-test/vitest/src/App.test.jsx b/integration-test/vitest/src/App.test.jsx index 68142a18..e42304f1 100644 --- a/integration-test/vitest/src/App.test.jsx +++ b/integration-test/vitest/src/App.test.jsx @@ -2,9 +2,9 @@ import { render, screen } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import App from "./App"; -import { resetNextSSRApolloSingletons } from "@apollo/experimental-nextjs-app-support/ssr"; +import { resetApolloClientSingletons } from "@apollo/experimental-nextjs-app-support"; -afterEach(resetNextSSRApolloSingletons); +afterEach(resetApolloClientSingletons); test("loads data", async () => { render(); diff --git a/integration-test/vitest/src/hooks.test.jsx b/integration-test/vitest/src/hooks.test.jsx index c16a8f98..6582106d 100644 --- a/integration-test/vitest/src/hooks.test.jsx +++ b/integration-test/vitest/src/hooks.test.jsx @@ -4,11 +4,11 @@ import "@testing-library/jest-dom"; import { makeClient, QUERY } from "./App"; import { ApolloNextAppProvider, - NextSSRApolloClient, - useQuery, - resetNextSSRApolloSingletons, -} from "@apollo/experimental-nextjs-app-support/ssr"; + ApolloClient, + resetApolloClientSingletons, +} from "@apollo/experimental-nextjs-app-support"; import { Suspense } from "react"; +import { useQuery } from "@apollo/client"; const wrapper = ({ children }) => ( @@ -16,7 +16,7 @@ const wrapper = ({ children }) => ( ); -afterEach(resetNextSSRApolloSingletons); +afterEach(resetApolloClientSingletons); /** * We test that jest is using the "browser" build. @@ -25,7 +25,7 @@ afterEach(resetNextSSRApolloSingletons); */ test("uses the browser build", () => { let foundPrototype = false; - let proto = NextSSRApolloClient; + let proto = ApolloClient; while (proto) { if (proto.name === "ApolloClientBrowserImpl") { foundPrototype = true; From 5758f0159a3946ba757fd81931f4d80936c970a4 Mon Sep 17 00:00:00 2001 From: Lenz Weber-Tronic Date: Wed, 15 May 2024 11:18:32 +0200 Subject: [PATCH 4/6] fix up import --- .../dynamic/useBackgroundQueryWithoutSsrReadQuery/page.tsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/integration-test/nextjs/src/app/cc/dynamic/useBackgroundQueryWithoutSsrReadQuery/page.tsx b/integration-test/nextjs/src/app/cc/dynamic/useBackgroundQueryWithoutSsrReadQuery/page.tsx index 85879403..a2cbb020 100644 --- a/integration-test/nextjs/src/app/cc/dynamic/useBackgroundQueryWithoutSsrReadQuery/page.tsx +++ b/integration-test/nextjs/src/app/cc/dynamic/useBackgroundQueryWithoutSsrReadQuery/page.tsx @@ -1,10 +1,7 @@ "use client"; -import type { - useBackgroundQuery, - useReadQuery, - TypedDocumentNode, -} from "@apollo/client"; +import { useBackgroundQuery, useReadQuery } from "@apollo/client"; +import type { TypedDocumentNode } from "@apollo/client"; import { gql, QueryReference } from "@apollo/client"; import { Suspense, useState, useEffect } from "react"; From acad9ce3f5e3e1252096d5369b3c040d7df9cf60 Mon Sep 17 00:00:00 2001 From: Lenz Weber-Tronic Date: Wed, 15 May 2024 11:26:20 +0200 Subject: [PATCH 5/6] adjust one more import --- integration-test/jest/src/hooks.test.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/integration-test/jest/src/hooks.test.jsx b/integration-test/jest/src/hooks.test.jsx index c688ad89..11947f5a 100644 --- a/integration-test/jest/src/hooks.test.jsx +++ b/integration-test/jest/src/hooks.test.jsx @@ -8,6 +8,7 @@ import { resetApolloClientSingletons, } from "@apollo/experimental-nextjs-app-support"; import { Suspense } from "react"; +import { useQuery } from "@apollo/client"; const wrapper = ({ children }) => ( From 3cdf29fb9621e57bfaff5386baca39fd5751bd0c Mon Sep 17 00:00:00 2001 From: Lenz Weber-Tronic Date: Thu, 16 May 2024 12:40:24 +0200 Subject: [PATCH 6/6] Update packages/experimental-nextjs-app-support/README.md Co-authored-by: Jerel Miller --- packages/experimental-nextjs-app-support/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/experimental-nextjs-app-support/README.md b/packages/experimental-nextjs-app-support/README.md index 21a44c6b..1eadf21a 100644 --- a/packages/experimental-nextjs-app-support/README.md +++ b/packages/experimental-nextjs-app-support/README.md @@ -158,7 +158,7 @@ If you want to make the most of the streaming SSR features offered by React & th This package uses some singleton instances on the Browser side - if you are writing tests, you must reset them between tests. -For that, you can use the `resetNextSSRApolloSingletons` helper: +For that, you can use the `resetApolloClientSingletons ` helper: ```ts import { resetApolloClientSingletons } from "@apollo/experimental-nextjs-app-support";