add shared @apollo/experimental-nextjs-app-support entry point (#300)

This unifies `@apollo/experimental-nextjs-app-support/rsc` and `@apollo/experimental-nextjs-app-support/ssr` into `@apollo/experimental-nextjs-app-support`. Once we rename the package to remove the `experimental` label, this will be the only entry point. Also, some imports are changed: * the `useQuery`/`useSuspenseQuery` etc. hooks have been dropped. They should be imported from `@apollo/client` instead. * `NextSSRApolloClient` has been renamed to `ApolloClient` and is available in different variations from all environments, including RSC. * `NextSSRInMemoryCache` has been renamed to `InMemoryCache` and is available in different variations from all environments, including RSC. * `resetNextSSRApolloSingletons` has been renamed to `resetApolloClientSingletons`
apollographql · May 16, 2024 · d502aec · d502aec
1 parent 05e162a
commit d502aec
Show file tree

Hide file tree

Showing 47 changed files with 298 additions and 196 deletions.
diff --git 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/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<HydrationContextOptions>
+buildManualDataTransport: (args: ManualDataTransportOptions) => DataTransportProviderImplementation<HydrationContextOptions>
 ```
 
 ## Parameters
@@ -39,7 +39,7 @@ args
 
 </td><td>
 
-BuildArgs
+ManualDataTransportOptions
 
 
 </td><td>

diff --git 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<WatchQueryOptions, "query">;
     id: TransportIdentifier;
 } | {
     type: "data";

diff --git a/docs/experimental-nextjs-app-support.apolloclient.md b/docs/experimental-nextjs-app-support.apolloclient.md
@@ -0,0 +1,17 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@apollo/experimental-nextjs-app-support](./experimental-nextjs-app-support.md) &gt; [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<TCacheShape> extends ApolloClient$1<TCacheShape> 
+```
+**Extends:** ApolloClient$1&lt;TCacheShape&gt;
+
diff --git 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/...extjs-app-support.nextssrinmemorycache.md → ...ental-nextjs-app-support.inmemorycache.md b/...extjs-app-support.nextssrinmemorycache.md → ...ental-nextjs-app-support.inmemorycache.md
@@ -1,8 +1,8 @@
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-[Home](./index.md) &gt; [@apollo/experimental-nextjs-app-support](./experimental-nextjs-app-support.md) &gt; [NextSSRInMemoryCache](./experimental-nextjs-app-support.nextssrinmemorycache.md)
+[Home](./index.md) &gt; [@apollo/experimental-nextjs-app-support](./experimental-nextjs-app-support.md) &gt; [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
@@ -20,35 +20,35 @@ Description
 </th></tr></thead>
 <tbody><tr><td>
 
-[DebounceMultipartResponsesLink](./experimental-nextjs-app-support.debouncemultipartresponseslink.md)
+[ApolloClient](./experimental-nextjs-app-support.apolloclient.md)
 
 
 </td><td>
 
-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)<!-- -->.
 
 
 </td></tr>
 <tr><td>
 
-[NextSSRApolloClient](./experimental-nextjs-app-support.nextssrapolloclient.md)
+[DebounceMultipartResponsesLink](./experimental-nextjs-app-support.debouncemultipartresponseslink.md)
 
 
 </td><td>
 
-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.
 
 
 </td></tr>
 <tr><td>
 
-[NextSSRInMemoryCache](./experimental-nextjs-app-support.nextssrinmemorycache.md)
+[InMemoryCache](./experimental-nextjs-app-support.inmemorycache.md)
 
 
 </td><td>
@@ -139,7 +139,7 @@ Ensures that you can always access the same instance of ApolloClient during RSC
 </td></tr>
 <tr><td>
 
-[resetNextSSRApolloSingletons()](./experimental-nextjs-app-support.resetnextssrapollosingletons.md)
+[resetApolloClientSingletons()](./experimental-nextjs-app-support.resetapolloclientsingletons.md)
 
 
 </td><td>
@@ -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.
 
 
 </td></tr>

diff --git a/docs/experimental-nextjs-app-support.nextssrapolloclient.md b/docs/experimental-nextjs-app-support.nextssrapolloclient.md
diff --git a/...p-support.resetnextssrapollosingletons.md → ...pp-support.resetapolloclientsingletons.md b/...p-support.resetnextssrapollosingletons.md → ...pp-support.resetapolloclientsingletons.md
@@ -1,8 +1,8 @@
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-[Home](./index.md) &gt; [@apollo/experimental-nextjs-app-support](./experimental-nextjs-app-support.md) &gt; [resetNextSSRApolloSingletons](./experimental-nextjs-app-support.resetnextssrapollosingletons.md)
+[Home](./index.md) &gt; [@apollo/experimental-nextjs-app-support](./experimental-nextjs-app-support.md) &gt; [resetApolloClientSingletons](./experimental-nextjs-app-support.resetapolloclientsingletons.md)
 
-## resetNextSSRApolloSingletons() function
+## resetApolloClientSingletons() function
 
 &gt; This export is only available in React Client Components
 

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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(<App />);