Modify legacy registration mechanism (#1375)

Author: jerelmiller

.changeset/young-brooms-protect.md

@@ -0,0 +1,5 @@
+---
+"apollo-client-devtools": patch
+---
+
+Use `Object.defineProperty` to register legacy clients to avoid the need to search for the client in a loop in initialization.

src/extension/tab/hook.ts

@@ -19,7 +19,7 @@ import {
   getMutations,
   getMainDefinition,
 } from "./helpers";
-import type { QueryResult } from "../../types";
+import type { QueryResult, SafeAny } from "../../types";
 import { getPrivateAccess } from "../../privateAccess";
 import type { JSONObject } from "../../application/types/json";
 import { createWindowActor } from "../actor";
@@ -91,12 +91,6 @@ window.onbeforeunload = () => {
   tab.send({ type: "disconnectFromDevtools" });
 };
 
-window.addEventListener("load", () => {
-  if (hook.ApolloClient) {
-    sendHookDataToDevTools("connectToDevtools");
-  }
-});
-
 function getClientData() {
   // We need to JSON stringify the data here in case the cache contains
   // references to irregular data such as `URL` instances which are not
@@ -301,4 +295,26 @@ if (Array.isArray(preExisting)) {
   (preExisting as Array<ApolloClient<any>>).forEach(registerClient);
 }
 
-findClient();
+// Handles registering legacy clients (< v3.7) which do not use the new
+// registration mechanism above.
+let globalClient = window.__APOLLO_CLIENT__;
+Object.defineProperty(window, "__APOLLO_CLIENT__", {
+  get() {
+    return globalClient;
+  },
+  set(client: ApolloClient<SafeAny> | undefined) {
+    if (client) {
+      // We call this in a setTimeout because the client is not fully
+      // instantiated before the property on window is assigned since it
+      // connects from the constructor of ApolloClient. This allows
+      // initialization to finish before we register it.
+      setTimeout(() => registerClient(client));
+    }
+
+    globalClient = client;
+  },
+});
+
+if (globalClient) {
+  registerClient(globalClient);
+}