add a react-server entry point, remove rehackt (#12438)

* add a `react-server` entry point

* drop rehackt dependency

* changeset

* add `exports` test

* small fixup

* fix imports, skip some linter warnings

* knip, chores

Author: phryneas

.changeset/clean-sheep-hide.md

@@ -0,0 +1,6 @@
+---
+"@apollo/client": minor
+---
+
+Drop `rehackt` dependency.
+We can now directly import from `react` without causing build errors in RSC.

.changeset/rare-houses-prove.md

@@ -0,0 +1,5 @@
+---
+"@apollo/client": minor
+---
+
+Add `react-server` entry point with stubs for normal exports.

.size-limit.cjs

@@ -32,7 +32,6 @@ const checks = [
     brotli: true,
     ignore: [
       ...(config.ignore || []),
-      "rehackt",
       "react",
       "react-dom",
       "@graphql-typed-document-node/core",

.size-limits.json

@@ -1,6 +1,6 @@
 {
-  "import { ApolloClient, InMemoryCache, HttpLink } from \"@apollo/client\" (CJS)": 43200,
-  "import { ApolloClient, InMemoryCache, HttpLink } from \"@apollo/client\" (production) (CJS)": 38700,
-  "import { ApolloClient, InMemoryCache, HttpLink } from \"@apollo/client\"": 33359,
-  "import { ApolloClient, InMemoryCache, HttpLink } from \"@apollo/client\" (production)": 28372
+  "import { ApolloClient, InMemoryCache, HttpLink } from \"@apollo/client\" (CJS)": 42782,
+  "import { ApolloClient, InMemoryCache, HttpLink } from \"@apollo/client\" (production) (CJS)": 38120,
+  "import { ApolloClient, InMemoryCache, HttpLink } from \"@apollo/client\"": 33090,
+  "import { ApolloClient, InMemoryCache, HttpLink } from \"@apollo/client\" (production)": 27946
 }

config/apiExtractor.ts

@@ -127,36 +127,13 @@ async function buildReport(
     })
   );
 
-  let succeededAdditionalChecks = true;
-  if (fs.existsSync(extractorConfig.reportFilePath)) {
-    const contents = readFileSync(extractorConfig.reportFilePath, "utf8");
-    if (contents.includes("rehackt")) {
-      succeededAdditionalChecks = false;
-      console.error(
-        "❗ %s contains a reference to the `rehackt` package!",
-        extractorConfig.reportFilePath
-      );
-    }
-    if (contents.includes('/// <reference types="react" />')) {
-      succeededAdditionalChecks = false;
-      console.error(
-        "❗ %s contains a reference to the global `React` type!/n" +
-          'Use `import type * as ReactTypes from "react";` instead',
-        extractorConfig.reportFilePath
-      );
-    }
-  }
-
-  if (extractorResult.succeeded && succeededAdditionalChecks) {
+  if (extractorResult.succeeded) {
     console.log(`✅ API Extractor completed successfully`);
   } else {
     console.error(
       `❗ API Extractor completed with ${extractorResult.errorCount} errors` +
         ` and ${extractorResult.warningCount} warnings`
     );
-    if (!succeededAdditionalChecks) {
-      console.error("Additional checks failed.");
-    }
     process.exitCode = 1;
   }
 }

config/listImports.ts

@@ -0,0 +1,27 @@
+/**
+ *  used via e.g.
+```sh
+node --experimental-transform-types --no-warnings --conditions 'react-server' config/listImports.ts @apollo/client/react
+```
+from `src/__tests__/exports.ts`
+*/
+import { registerHooks } from "node:module";
+
+registerHooks({
+  resolve(specifier, context, nextResolve) {
+    try {
+      return nextResolve(specifier, context);
+    } catch (e) {
+      if (specifier.endsWith(".js")) {
+        for (const ext of [".ts", ".tsx"]) {
+          return nextResolve(specifier.slice(0, -3) + ext, context);
+        }
+      }
+      throw e;
+    }
+  },
+});
+
+Object.keys(await import(process.argv[2]))
+  .sort()
+  .forEach((i) => console.log(i));

config/package.json

@@ -39,6 +39,7 @@ const config = {
     ".yalc/**/*",
     "config/schema.package.json.ts",
     "src/config/jest/resolver.ts",
+    "config/listImports.ts",
   ],
   ignoreBinaries: ["jq"],
   ignoreDependencies: [

knip.config.js

@@ -49,7 +49,10 @@
     "./link/utils": "./src/link/utils/index.ts",
     "./link/ws": "./src/link/ws/index.ts",
     "./masking": "./src/masking/index.ts",
-    "./react": "./src/react/index.ts",
+    "./react": {
+      "react-server": "./src/react/index.react-server.ts",
+      "default": "./src/react/index.ts"
+    },
     "./react/context": "./src/react/context/index.ts",
     "./react/hooks": "./src/react/hooks/index.ts",
     "./react/internal": "./src/react/internal/index.ts",
@@ -149,7 +152,6 @@
     "@wry/trie": "^0.5.0",
     "graphql-tag": "^2.12.6",
     "optimism": "^0.18.0",
-    "rehackt": "^0.1.0",
     "tslib": "^2.3.0"
   },
   "devDependencies": {

package-lock.json

@@ -270,6 +270,31 @@ Array [
 ]
 `;
 
+exports[`exports of public entry points @apollo/client/react with conditions [react-server] 1`] = `
+Array [
+  "ApolloConsumer",
+  "ApolloProvider",
+  "DocumentType",
+  "createQueryPreloader",
+  "getApolloContext",
+  "operationName",
+  "parser",
+  "useApolloClient",
+  "useBackgroundQuery",
+  "useFragment",
+  "useLazyQuery",
+  "useLoadableQuery",
+  "useMutation",
+  "useQuery",
+  "useQueryRefHandlers",
+  "useReactiveVar",
+  "useReadQuery",
+  "useSubscription",
+  "useSuspenseFragment",
+  "useSuspenseQuery",
+]
+`;
+
 exports[`exports of public entry points @apollo/client/react/context 1`] = `
 Array [
   "ApolloConsumer",

package.json

@@ -3,6 +3,10 @@
 // A) JSDOM doesn't yet support the TextEncoder/TextDecoder globals added in node 11, meaning certain imports (e.g. reactSSR) will fail (See https://github.com/jsdom/jsdom/issues/2524)
 // B) We're just testing imports/exports, so no reason not to use Node for slightly better performance.
 
+import { resolve } from "node:path";
+
+import { $ } from "zx";
+
 import * as client from "@apollo/client";
 import * as cache from "@apollo/client/cache";
 import * as core from "@apollo/client/core";
@@ -51,6 +55,18 @@ describe("exports of public entry points", () => {
       expect(Object.keys(ns).sort()).toMatchSnapshot();
     });
   }
+  function checkWithConditions(id: string, conditions: string[]) {
+    test(`${id} with conditions [${conditions.join(",")}]`, async () => {
+      const exports = await $({
+        cwd: resolve(__dirname, "../../"),
+      })`node --experimental-transform-types --no-warnings ${conditions.flatMap(
+        (condition) => [`--conditions`, condition]
+      )} config/listImports.ts ${id}`;
+      expect(
+        exports.stdout.split("\n").filter((x) => x.trim() !== "")
+      ).toMatchSnapshot();
+    });
+  }
 
   check("@apollo/client", client);
   check("@apollo/client/cache", cache);
@@ -87,6 +103,8 @@ describe("exports of public entry points", () => {
   check("@apollo/client/utilities/invariant", utilitiesInvariant);
   check("@apollo/client/utilities/environment", utilitiesEnvironment);
 
+  checkWithConditions("@apollo/client/react", ["react-server"]);
+
   it("completeness", () => {
     const { join } = require("path").posix;
     entryPoints.forEach((info: Record<string, any>) => {

src/__tests__/__snapshots__/exports.ts.snap

@@ -1,5 +1,5 @@
 import type { Subscription } from "rxjs";
-import { Observable, EMPTY } from "rxjs";
+import { EMPTY, Observable } from "rxjs";
 
 import type {
   FetchResult,

src/__tests__/exports.ts

@@ -1,5 +1,5 @@
 import type * as ReactTypes from "react";
-import * as React from "rehackt";
+import * as React from "react";
 
 import type { ApolloClient } from "@apollo/client/core";
 import { invariant } from "@apollo/client/utilities/invariant";

src/link/batch/batching.ts

@@ -1,5 +1,5 @@
 import type * as ReactTypes from "react";
-import * as React from "rehackt";
+import * as React from "react";
 
 import type { ApolloClient } from "@apollo/client/core";
 import type { RenderPromises } from "@apollo/client/react/ssr";

src/react/context/ApolloConsumer.tsx

@@ -1,5 +1,5 @@
 import type * as ReactTypes from "react";
-import * as React from "rehackt";
+import * as React from "react";
 
 import type { ApolloClient } from "@apollo/client/core";
 import { invariant } from "@apollo/client/utilities/invariant";

src/react/context/ApolloContext.ts

@@ -1,6 +1,6 @@
 /* eslint-disable testing-library/render-result-naming-convention */
-import * as React from "rehackt";
 import { render, waitFor } from "@testing-library/react";
+import * as React from "react";
 
 import { useRenderGuard } from "../useRenderGuard.js";
 

src/react/context/ApolloProvider.tsx

@@ -1,4 +1,4 @@
-import * as React from "rehackt";
+import * as React from "react";
 
 import { wrapPromiseWithState } from "@apollo/client/utilities";
 

src/react/hooks/internal/__tests__/useRenderGuard.test.tsx

@@ -1,17 +1,17 @@
 import { equal } from "@wry/equality";
 import type { DependencyList } from "react";
-import * as React from "rehackt";
+import * as React from "react";
 
 export function useDeepMemo<TValue>(
   memoFn: () => TValue,
   deps: DependencyList
 ) {
   const ref = React.useRef<{ deps: DependencyList; value: TValue }>(void 0);
-
+  // eslint-disable-next-line react-compiler/react-compiler
   if (!ref.current || !equal(ref.current.deps, deps)) {
     // eslint-disable-next-line react-compiler/react-compiler
     ref.current = { value: memoFn(), deps };
   }
-
+  // eslint-disable-next-line react-compiler/react-compiler
   return ref.current.value;
 }

src/react/hooks/internal/__use.ts

@@ -1,4 +1,4 @@
-import * as React from "rehackt";
+import * as React from "react";
 
 import { canUseDOM } from "@apollo/client/utilities";
 

src/react/hooks/internal/useDeepMemo.ts

@@ -1,4 +1,4 @@
-import * as React from "rehackt";
+import * as React from "react";
 
 let Ctx: React.Context<null>;
 

src/react/hooks/internal/useIsomorphicLayoutEffect.ts

@@ -1,4 +1,4 @@
-import * as React from "rehackt";
+import * as React from "react";
 
 import type { ApolloClient } from "@apollo/client/core";
 import { getApolloContext } from "@apollo/client/react/context";

src/react/hooks/internal/useRenderGuard.ts

@@ -1,4 +1,4 @@
-import * as React from "rehackt";
+import * as React from "react";
 
 import { canonicalStringify } from "@apollo/client/cache";
 import type {

src/react/hooks/useApolloClient.ts

@@ -1,5 +1,5 @@
 import equal from "@wry/equality";
-import * as React from "rehackt";
+import * as React from "react";
 
 import type {
   Cache,

src/react/hooks/useBackgroundQuery.ts

@@ -1,7 +1,7 @@
 import type { TypedDocumentNode } from "@graphql-typed-document-node/core";
 import { equal } from "@wry/equality";
 import type { DocumentNode } from "graphql";
-import * as React from "rehackt";
+import * as React from "react";
 
 import type {
   ApolloClient,
@@ -240,7 +240,6 @@ export function useLazyQuery<
       const previousData = resultRef.current?.data;
 
       if (previousData && !equal(previousData, result.data)) {
-        // eslint-disable-next-line react-compiler/react-compiler
         previousDataRef.current = previousData;
       }
 
@@ -275,6 +274,7 @@ export function useLazyQuery<
   const eagerMethods = React.useMemo(() => {
     const eagerMethods: Record<string, any> = {};
     for (const key of EAGER_METHODS) {
+      // eslint-disable-next-line react-compiler/react-compiler
       eagerMethods[key] = function () {
         invariant(
           resultRef.current,
@@ -373,9 +373,11 @@ export function useLazyQuery<
       ...eagerMethods,
       ...observableResult,
       client,
+      // eslint-disable-next-line react-compiler/react-compiler
       previousData: previousDataRef.current,
       variables: observable.variables,
       observable,
+      // eslint-disable-next-line react-compiler/react-compiler
       called: !!resultRef.current,
     }),
     [client, observableResult, eagerMethods, observable]

src/react/hooks/useFragment.ts

@@ -1,4 +1,4 @@
-import * as React from "rehackt";
+import * as React from "react";
 
 import { canonicalStringify } from "@apollo/client/cache";
 import type {

src/react/hooks/useLazyQuery.ts

@@ -1,7 +1,7 @@
 import type { TypedDocumentNode } from "@graphql-typed-document-node/core";
 import { equal } from "@wry/equality";
 import type { DocumentNode } from "graphql";
-import * as React from "rehackt";
+import * as React from "react";
 
 import type {
   ApolloCache,
@@ -231,7 +231,6 @@ export function useMutation<
 
   React.useEffect(() => {
     const current = ref.current;
-    // eslint-disable-next-line react-compiler/react-compiler
     current.isMounted = true;
 
     return () => {

src/react/hooks/useLoadableQuery.ts

@@ -16,7 +16,7 @@
  */
 /** */
 import { equal } from "@wry/equality";
-import * as React from "rehackt";
+import * as React from "react";
 import { asapScheduler, observeOn } from "rxjs";
 
 import type {

src/react/hooks/useMutation.ts

@@ -1,4 +1,4 @@
-import * as React from "rehackt";
+import * as React from "react";
 
 import type { OperationVariables } from "@apollo/client/core";
 import type { SubscribeToMoreFunction } from "@apollo/client/core";

src/react/hooks/useQuery.ts

@@ -1,4 +1,4 @@
-import * as React from "rehackt";
+import * as React from "react";
 
 import type { ReactiveVar } from "@apollo/client/core";
 

src/react/hooks/useQueryRefHandlers.ts

@@ -1,4 +1,4 @@
-import * as React from "rehackt";
+import * as React from "react";
 
 import type {
   ApolloClient,