Clean up some redundant logic for connecting to the client (#1392)

Author: jerelmiller

.changeset/polite-brooms-glow.md

@@ -0,0 +1,5 @@
+---
+"apollo-client-devtools": patch
+---
+
+Remove some redundant logic for connecting to the client instance from the devtools.

src/extension/devtools/devtools.ts

@@ -17,10 +17,7 @@ const inspectedTabId = browser.devtools.inspectedWindow.tabId;
 const devtoolsMachine = interpret(
   createDevtoolsMachine({
     actions: {
-      connectToClient: () => {
-        clientPort.send({ type: "connectToClient" });
-        startConnectTimeout();
-      },
+      connectToClient,
       startRequestInterval: () => {
         clearTimeout(connectTimeoutId);
 
@@ -40,7 +37,6 @@ const devtoolsMachine = interpret(
 
 let panelHidden = true;
 let connectTimeoutId: NodeJS.Timeout;
-let disconnectTimeoutId: NodeJS.Timeout;
 
 const portAdapter = createPortMessageAdapter(() =>
   browser.runtime.connect({ name: inspectedTabId.toString() })
@@ -51,24 +47,21 @@ const rpcClient = createRpcClient<DevtoolsRPCMessage>(portAdapter);
 
 devtoolsMachine.subscribe(({ value }) => {
   if (value === "connected") {
-    clearTimeout(disconnectTimeoutId);
+    clearTimeout(connectTimeoutId);
   }
 });
 
-// In case we can't connect to the tab, we should at least show something to the
-// user when we've attempted to connect a max number of times.
-function startConnectTimeout(attempts = 0) {
+function connectToClient() {
+  clientPort.send({ type: "connectToClient" });
+  startConnectTimeout();
+}
+
+function startConnectTimeout() {
+  clearTimeout(connectTimeoutId);
+
   connectTimeoutId = setTimeout(() => {
-    if (attempts < 3) {
-      clientPort.send({ type: "connectToClient" });
-      startConnectTimeout(attempts + 1);
-    } else {
-      devtoolsMachine.send("timeout");
-    }
-    // Pick a threshold above the time it takes to determine if the client is
-    // found on the page. This ensures we don't reset that counter and provide a
-    // proper "not found" message.
-  }, 11_000);
+    devtoolsMachine.send("clientNotFound");
+  }, 10_000);
 }
 
 clientPort.on("connectToDevtools", (message) => {
@@ -83,20 +76,11 @@ clientPort.on("registerClient", (message) => {
 });
 
 clientPort.on("disconnectFromDevtools", () => {
-  clearTimeout(disconnectTimeoutId);
   devtoolsMachine.send("disconnect");
-
-  disconnectTimeoutId = setTimeout(() => {
-    devtoolsMachine.send("clientNotFound");
-  }, 10_000);
-});
-
-clientPort.on("clientNotFound", () => {
-  clearTimeout(connectTimeoutId);
-  devtoolsMachine.send("clientNotFound");
+  startConnectTimeout();
 });
 
-clientPort.send({ type: "connectToClient" });
+connectToClient();
 
 function startRequestInterval(ms = 500) {
   let id: NodeJS.Timeout;
@@ -163,11 +147,6 @@ async function createDevtoolsPanel() {
       connectedToPanel = true;
     }
 
-    if (devtoolsMachine.state.value === "initialized") {
-      clientPort.send({ type: "connectToClient" });
-      startConnectTimeout();
-    }
-
     if (devtoolsMachine.state.value === "connected" && panelHidden) {
       unsubscribers.add(startRequestInterval());
     }

src/extension/messages.ts

@@ -83,7 +83,6 @@ type ExplorerSubscriptionTerminationMessage = {
 
 export type ClientMessage =
   | { type: "registerClient"; payload: ClientContext }
-  | { type: "clientNotFound" }
   | { type: "connectToClient" }
   | {
       type: "connectToDevtools";

src/extension/tab/hook.ts

@@ -117,18 +117,9 @@ function getClientData() {
 
 handleRpc("getClientOperations", getClientData);
 
-function sendHookDataToDevTools(eventName: "connectToDevtools") {
-  tab.send({
-    type: eventName,
-    payload: getClientData(),
-  });
-}
-
 tab.on("connectToClient", () => {
   if (hook.ApolloClient) {
-    sendHookDataToDevTools("connectToDevtools");
-  } else {
-    findClient();
+    tab.send({ type: "connectToDevtools", payload: getClientData() });
   }
 });
 
@@ -223,28 +214,6 @@ tab.on("explorerRequest", (message) => {
   }
 });
 
-/**
- * Attempt to find the client on a 1-second interval for 10 seconds max
- */
-let interval: NodeJS.Timeout;
-function findClient() {
-  let count = 0;
-
-  function initializeDevtoolsHook() {
-    if (count++ > 10) {
-      clearInterval(interval);
-      tab.send({ type: "clientNotFound" });
-    }
-    if (window.__APOLLO_CLIENT__) {
-      registerClient(window.__APOLLO_CLIENT__);
-    }
-  }
-
-  clearInterval(interval);
-  interval = setInterval(initializeDevtoolsHook, 1000);
-  initializeDevtoolsHook(); // call immediately to reduce lag if devtools are already available
-}
-
 function watchForClientTermination(client: ApolloClient<any>) {
   const originalStop = client.stop;
 
@@ -283,7 +252,6 @@ function registerClient(client: ApolloClient<any>) {
   //   }
   // });
 
-  clearInterval(interval);
   loadErrorCodes(rpcClient, client.version);
 }
 

src/extension/tab/tab.ts

@@ -24,7 +24,6 @@ devtools.forward("explorerSubscriptionTermination", tab);
 devtools.forward("explorerRequest", tab);
 
 tab.forward("registerClient", devtools);
-tab.forward("clientNotFound", devtools);
 tab.forward("connectToDevtools", devtools);
 tab.forward("disconnectFromDevtools", devtools);
 tab.forward("explorerResponse", devtools);