0.9.0 (2) - wrap hook functionality from ApolloClient instance (#216)

* rename wrapped classes to original name, also export in RSC * fix up test * fixup build types * comment shape * adjust type resolution * fixup * adjust package shapes * bundling adjustment: no `/index.js` in CJS * check "package shapes" * revert changes to examples/integration tests * reset README changes * add description to helper scripts * wrap hook functionality from ApolloClient instance * move wrappers to `QueryManager` * update version * remove hook exports from `@apollo/client-react-streaming` * run test-bundle in CI * drop hook exports
apollographql · Mar 5, 2024 · a78996e · a78996e
1 parent cbebe9e
commit a78996e
Show file tree

Hide file tree

Showing 9 changed files with 62 additions and 80 deletions.
diff --git a/package.json b/package.json
@@ -12,5 +12,8 @@
   "scripts": {
     "verify-package-json": "node ./scripts/verify-package-json.mjs",
     "verify-package-shape": "node ./scripts/verify-package-shape.mjs"
+  },
+  "resolutions": {
+    "@apollo/client": "0.0.0-pr-11617-20240227102358"
   }
 }
diff --git a/packages/client-react-streaming/package-shape.json b/packages/client-react-streaming/package-shape.json
@@ -16,12 +16,7 @@
       "RemoveMultipartDirectivesLink",
       "SSRMultipartLink",
       "WrapApolloProvider",
-      "resetApolloSingletons",
-      "useBackgroundQuery",
-      "useFragment",
-      "useQuery",
-      "useReadQuery",
-      "useSuspenseQuery"
+      "resetApolloSingletons"
     ],
     "node": [
       "ApolloClient",
@@ -31,12 +26,7 @@
       "RemoveMultipartDirectivesLink",
       "SSRMultipartLink",
       "WrapApolloProvider",
-      "resetApolloSingletons",
-      "useBackgroundQuery",
-      "useFragment",
-      "useQuery",
-      "useReadQuery",
-      "useSuspenseQuery"
+      "resetApolloSingletons"
     ]
   },
   "@apollo/client-react-streaming/experimental-manual-transport": {

diff --git a/packages/client-react-streaming/src/DataTransportAbstraction/WrappedApolloClient.test.tsx b/packages/client-react-streaming/src/DataTransportAbstraction/WrappedApolloClient.test.tsx
@@ -18,8 +18,8 @@ const {
   InMemoryCache,
   WrapApolloProvider,
   DataTransportContext,
-  useSuspenseQuery,
 } = await import("#bundled");
+const { useSuspenseQuery } = await import("@apollo/client/index.js");
 const { MockSubscriptionLink } = await import(
   "@apollo/client/testing/index.js"
 );

diff --git a/packages/client-react-streaming/src/DataTransportAbstraction/WrappedApolloClient.tsx b/packages/client-react-streaming/src/DataTransportAbstraction/WrappedApolloClient.tsx
@@ -16,10 +16,14 @@ import { canonicalStringify } from "@apollo/client/cache/index.js";
 import { invariant } from "ts-invariant";
 import { createBackpressuredCallback } from "./backpressuredCallback.js";
 import { InMemoryCache } from "./WrappedInMemoryCache.js";
+import { hookWrappers } from "./hooks.js";
+import type { HookWrappers } from "@apollo/client/react/internal/index.js";
 
 function getQueryManager<TCacheShape>(
   client: OrigApolloClient<unknown>
-): QueryManager<TCacheShape> {
+): QueryManager<TCacheShape> & {
+  [wrappers]: HookWrappers;
+} {
   return client["queryManager"];
 }
 
@@ -29,12 +33,23 @@ type SimulatedQueryInfo = {
   options: WatchQueryOptions<OperationVariables, any>;
 };
 
-class ApolloClientSSRImpl<TCacheShape> extends OrigApolloClient<TCacheShape> {
-  watchQueryQueue = createBackpressuredCallback<WatchQueryOptions<any>>();
-
+const wrappers = Symbol.for("apollo.hook.wrappers");
+class ApolloClientBase<TCacheShape> extends OrigApolloClient<TCacheShape> {
   constructor(options: ApolloClientOptions<TCacheShape>) {
     super(options);
+
+    if (!(this.cache instanceof InMemoryCache)) {
+      throw new Error(
+        "When using Apollo Client streaming SSR, you must use the `InMemoryCache` variant provided by the streaming package."
+      );
+    }
+
+    getQueryManager(this)[wrappers] = hookWrappers;
   }
+}
+
+class ApolloClientSSRImpl<TCacheShape> extends ApolloClientBase<TCacheShape> {
+  watchQueryQueue = createBackpressuredCallback<WatchQueryOptions<any>>();
 
   watchQuery<
     T = any,
@@ -52,17 +67,7 @@ class ApolloClientSSRImpl<TCacheShape> extends OrigApolloClient<TCacheShape> {
 
 export class ApolloClientBrowserImpl<
   TCacheShape,
-> extends OrigApolloClient<TCacheShape> {
-  constructor(options: ApolloClientOptions<TCacheShape>) {
-    super(options);
-
-    if (!(this.cache instanceof InMemoryCache)) {
-      throw new Error(
-        "When using Apollo Client streaming SSR, you must use the `InMemoryCache` variant provided by the streaming package."
-      );
-    }
-  }
-
+> extends ApolloClientBase<TCacheShape> {
   private simulatedStreamingQueries = new Map<string, SimulatedQueryInfo>();
 
   private identifyUniqueQuery(options: {

diff --git a/packages/client-react-streaming/src/DataTransportAbstraction/hooks.ts b/packages/client-react-streaming/src/DataTransportAbstraction/hooks.ts
@@ -1,32 +1,26 @@
-"use client";
-import {
-  useFragment as orig_useFragment,
-  useSuspenseQuery as orig_useSuspenseQuery,
-  useReadQuery as orig_useReadQuery,
-  useQuery as orig_useQuery,
-  useBackgroundQuery as orig_useBackgroundQuery,
-} from "@apollo/client/index.js";
+import type { HookWrappers } from "@apollo/client/react/internal/index.js";
 import { useTransportValue } from "./useTransportValue.js";
 
-export const useFragment = wrap(orig_useFragment, [
-  "data",
-  "complete",
-  "missing",
-]);
-export const useQuery = wrap<typeof orig_useQuery>(
-  process.env.REACT_ENV === "ssr"
-    ? (query, options) =>
-        orig_useQuery(query, { ...options, fetchPolicy: "cache-only" })
-    : orig_useQuery,
-  ["data", "loading", "networkStatus", "called"]
-);
-export const useSuspenseQuery = wrap(orig_useSuspenseQuery, [
-  "data",
-  "networkStatus",
-]);
-export const useReadQuery = wrap(orig_useReadQuery, ["data", "networkStatus"]);
-
-export const useBackgroundQuery = orig_useBackgroundQuery;
+export const hookWrappers: HookWrappers = {
+  useFragment(orig_useFragment) {
+    return wrap(orig_useFragment, ["data", "complete", "missing"]);
+  },
+  useQuery(orig_useQuery) {
+    return wrap<typeof orig_useQuery>(
+      process.env.REACT_ENV === "ssr"
+        ? (query, options) =>
+            orig_useQuery(query, { ...options, fetchPolicy: "cache-only" })
+        : orig_useQuery,
+      ["data", "loading", "networkStatus", "called"]
+    );
+  },
+  useSuspenseQuery(orig_useSuspenseQuery) {
+    return wrap(orig_useSuspenseQuery, ["data", "networkStatus"]);
+  },
+  useReadQuery(orig_useReadQuery) {
+    return wrap(orig_useReadQuery, ["data", "networkStatus"]);
+  },
+};
 
 function wrap<T extends (...args: any[]) => any>(
   useFn: T,

diff --git a/packages/client-react-streaming/src/DataTransportAbstraction/index.ts b/packages/client-react-streaming/src/DataTransportAbstraction/index.ts
@@ -1,13 +1,6 @@
 export { InMemoryCache } from "./WrappedInMemoryCache.js";
 export { ApolloClient } from "./WrappedApolloClient.js";
 
-export {
-  useFragment,
-  useQuery,
-  useSuspenseQuery,
-  useReadQuery,
-  useBackgroundQuery,
-} from "./hooks.js";
 export { resetApolloSingletons } from "./testHelpers.js";
 
 export { DataTransportContext } from "./DataTransportAbstraction.js";

diff --git a/packages/client-react-streaming/src/index.ts b/packages/client-react-streaming/src/index.ts
@@ -1,10 +1,5 @@
 export * from "./index.shared.js";
 export {
-  useFragment,
-  useQuery,
-  useSuspenseQuery,
-  useReadQuery,
-  useBackgroundQuery,
   resetApolloSingletons,
   DataTransportContext,
   DataTransportProviderImplementation,

diff --git a/packages/experimental-nextjs-app-support/src/ssr/index.ts b/packages/experimental-nextjs-app-support/src/ssr/index.ts
@@ -3,12 +3,14 @@ export { resetManualSSRApolloSingletons as resetNextSSRApolloSingletons } from "
 export {
   InMemoryCache as NextSSRInMemoryCache,
   ApolloClient as NextSSRApolloClient,
+  SSRMultipartLink,
+  DebounceMultipartResponsesLink,
+  RemoveMultipartDirectivesLink,
+} from "@apollo/client-react-streaming";
+export {
   useBackgroundQuery,
   useFragment,
   useQuery,
   useReadQuery,
   useSuspenseQuery,
-  SSRMultipartLink,
-  DebounceMultipartResponsesLink,
-  RemoveMultipartDirectivesLink,
-} from "@apollo/client-react-streaming";
+} from "@apollo/client/index.js";
diff --git a/yarn.lock b/yarn.lock
@@ -83,9 +83,9 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@apollo/client@npm:3.9.1, @apollo/client@npm:^3.9.1":
-  version: 3.9.1
-  resolution: "@apollo/client@npm:3.9.1"
+"@apollo/client@npm:0.0.0-pr-11617-20240227102358":
+  version: 0.0.0-pr-11617-20240227102358
+  resolution: "@apollo/client@npm:0.0.0-pr-11617-20240227102358"
   dependencies:
     "@graphql-typed-document-node/core": "npm:^3.1.1"
     "@wry/caches": "npm:^1.0.0"
@@ -95,7 +95,7 @@ __metadata:
     hoist-non-react-statics: "npm:^3.3.2"
     optimism: "npm:^0.18.0"
     prop-types: "npm:^15.7.2"
-    rehackt: "npm:0.0.3"
+    rehackt: "npm:0.0.5"
     response-iterator: "npm:^0.2.6"
     symbol-observable: "npm:^4.0.0"
     ts-invariant: "npm:^0.10.3"
@@ -116,7 +116,7 @@ __metadata:
       optional: true
     subscriptions-transport-ws:
       optional: true
-  checksum: 10/76c7024fbb7bd4a8e4cb1a36193c0ca23340b78e3a47006af6d91bd250b91006d8334856ac91c235d040bcaaadc0ef6d6eb0bba6a4f48b7fa12174f029e9eee1
+  checksum: 10/0189a24d832ef14a408a0a3dd5e15d416ed4c223aa9aca21c80774beb60ff7303242242f688c684a20df0166ba95f4c92708dfe7badc0ab12dabe63232616483
   languageName: node
   linkType: hard
 
@@ -12272,9 +12272,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rehackt@npm:0.0.3":
-  version: 0.0.3
-  resolution: "rehackt@npm:0.0.3"
+"rehackt@npm:0.0.5":
+  version: 0.0.5
+  resolution: "rehackt@npm:0.0.5"
   peerDependencies:
     "@types/react": "*"
     react: "*"
@@ -12283,7 +12283,7 @@ __metadata:
       optional: true
     react:
       optional: true
-  checksum: 10/2e3674d84aca46802f38cf5b01c62bf7d0ca5e324b2749dd79156fa61723e9f84df7778c39f97d351e815a852a8a8ac9633e29b6b7b8734d18042fda86620f54
+  checksum: 10/a7536eaeb47ba46bc29fa050c7cbf80860809689c893c6177664efbbdca641a1996185ea6602fb76473f0e2b145c1f3e9c27a5e738054d69809b6c39046fe269
   languageName: node
   linkType: hard