New devtools registration mechanism (#11117)

Co-authored-by: Alessia Bellisario <github@bellisar.io>
apollographql · Aug 31, 2023 · 6b81981 · 6b81981
1 parent eef27e5
commit 6b81981
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 27 deletions.
diff --git a/.changeset/nine-balloons-compete.md b/.changeset/nine-balloons-compete.md
@@ -0,0 +1,6 @@
+---
+"@apollo/client": patch
+---
+
+Adds a new devtools registration mechanism and tweaks the mechanism behind the
+"devtools not found" mechanic.
diff --git a/.size-limit.cjs b/.size-limit.cjs
@@ -1,7 +1,7 @@
 const checks = [
   {
     path: "dist/apollo-client.min.cjs",
-    limit: "38074",
+    limit: "38107",
   },
   {
     path: "dist/main.cjs",

diff --git a/src/core/ApolloClient.ts b/src/core/ApolloClient.ts
@@ -187,41 +187,55 @@ export class ApolloClient<TCacheShape> implements DataProxy {
     this.reFetchObservableQueries = this.reFetchObservableQueries.bind(this);
 
     if (connectToDevTools && typeof window === "object") {
-      (window as any).__APOLLO_CLIENT__ = this;
+      type DevToolsConnector = {
+        push(client: ApolloClient<any>): void;
+      };
+      const windowWithDevTools = window as Window & {
+        [devtoolsSymbol]?: DevToolsConnector;
+        __APOLLO_CLIENT__?: ApolloClient<any>;
+      };
+      const devtoolsSymbol = Symbol.for("apollo.devtools");
+      (windowWithDevTools[devtoolsSymbol] =
+        windowWithDevTools[devtoolsSymbol] || ([] as DevToolsConnector)).push(
+        this
+      );
+      windowWithDevTools.__APOLLO_CLIENT__ = this;
     }
 
     /**
      * Suggest installing the devtools for developers who don't have them
      */
     if (!hasSuggestedDevtools && connectToDevTools && __DEV__) {
       hasSuggestedDevtools = true;
-      if (
-        typeof window !== "undefined" &&
-        window.document &&
-        window.top === window.self &&
-        !(window as any).__APOLLO_DEVTOOLS_GLOBAL_HOOK__
-      ) {
-        const nav = window.navigator;
-        const ua = nav && nav.userAgent;
-        let url: string | undefined;
-        if (typeof ua === "string") {
-          if (ua.indexOf("Chrome/") > -1) {
-            url =
-              "https://chrome.google.com/webstore/detail/" +
-              "apollo-client-developer-t/jdkknkkbebbapilgoeccciglkfbmbnfm";
-          } else if (ua.indexOf("Firefox/") > -1) {
-            url =
-              "https://addons.mozilla.org/en-US/firefox/addon/apollo-developer-tools/";
+      setTimeout(() => {
+        if (
+          typeof window !== "undefined" &&
+          window.document &&
+          window.top === window.self &&
+          !(window as any).__APOLLO_DEVTOOLS_GLOBAL_HOOK__
+        ) {
+          const nav = window.navigator;
+          const ua = nav && nav.userAgent;
+          let url: string | undefined;
+          if (typeof ua === "string") {
+            if (ua.indexOf("Chrome/") > -1) {
+              url =
+                "https://chrome.google.com/webstore/detail/" +
+                "apollo-client-developer-t/jdkknkkbebbapilgoeccciglkfbmbnfm";
+            } else if (ua.indexOf("Firefox/") > -1) {
+              url =
+                "https://addons.mozilla.org/en-US/firefox/addon/apollo-developer-tools/";
+            }
+          }
+          if (url) {
+            invariant.log(
+              "Download the Apollo DevTools for a better development " +
+                "experience: %s",
+              url
+            );
           }
         }
-        if (url) {
-          invariant.log(
-            "Download the Apollo DevTools for a better development " +
-              "experience: %s",
-            url
-          );
-        }
-      }
+      }, 10000);
     }
 
     this.version = version;