Map React.Context instances by React.createContext (#11026)

* Map React.Context instances by React.createContext
apollographql · Jul 6, 2023 · b8d405e · b8d405e
1 parent 788262d
commit b8d405e
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 13 deletions.
diff --git a/.changeset/itchy-bulldogs-help.md b/.changeset/itchy-bulldogs-help.md
@@ -0,0 +1,6 @@
+---
+'@apollo/client': patch
+---
+
+Store React.Context instance mapped by React.createContext instance, not React.version.
+Using `React.version` can cause problems with `preact`, as multiple versions of `preact` will all identify themselves as React `17.0.2`.
diff --git a/.size-limit.cjs b/.size-limit.cjs
@@ -1,7 +1,7 @@
 const checks = [
   {
     path: "dist/apollo-client.min.cjs",
-    limit: "37915"
+    limit: "37976"
   },
   {
     path: "dist/main.cjs",
@@ -10,7 +10,7 @@ const checks = [
   {
     path: "dist/index.js",
     import: "{ ApolloClient, InMemoryCache, HttpLink }",
-    limit: "33413"
+    limit: "33437"
   },
   ...[
     "ApolloProvider",

diff --git a/src/react/context/ApolloContext.ts b/src/react/context/ApolloContext.ts
@@ -11,10 +11,12 @@ export interface ApolloContextValue {
   suspenseCache?: SuspenseCache;
 }
 
-type ReactVersion = string;
 declare global {
   interface Window {
-    [contextKey]: Record<ReactVersion, React.Context<ApolloContextValue>>;
+    [contextKey]: Map<
+      typeof React.createContext,
+      React.Context<ApolloContextValue>
+    >;
   }
 }
 
@@ -40,16 +42,18 @@ export function getApolloContext(): React.Context<ApolloContextValue> {
       'For more information, see https://nextjs.org/docs/getting-started/react-essentials#client-components'
   );
 
-  let contextStorage = global[contextKey] || (
-    global[contextKey] = Object.create(null)
-  );
+  let contextStorage =
+    global[contextKey] || (global[contextKey] = new Map());
 
-  return contextStorage[React.version] || (
-    contextStorage[React.version] = Object.assign(
-      React.createContext<ApolloContextValue>({}),
-      { displayName: 'ApolloContext' },
-    )
-  );
+  let value = contextStorage.get(React.createContext);
+  if (!value) {
+    value = Object.assign(React.createContext<ApolloContextValue>({}), {
+      displayName: 'ApolloContext',
+    });
+    contextStorage.set(React.createContext, value);
+  }
+
+  return value;
 }
 
 /**