Fix intermittent issue where a page refresh or navigation might mistakenly connect but show no data (#1378)

Author: jerelmiller

.changeset/dirty-rules-deny.md

@@ -0,0 +1,5 @@
+---
+"apollo-client-devtools": patch
+---
+
+Fix intermittent issue where data would not show up in the devtools after refreshing the page while the Apollo devtools panel is open.

src/application/App.tsx

@@ -130,6 +130,7 @@ export const App = () => {
     const dismiss = BannerAlert.show(ALERT_CONFIGS[state]);
 
     if (state === "connected") {
+      setClientNotFoundModalOpen(false);
       timeout = setTimeout(dismiss, 2500);
     }
 

src/application/machines.ts

@@ -87,12 +87,13 @@ export function createDevtoolsMachine({ actions }: { actions: Actions }) {
             timeout: "timedout",
             clientNotFound: "notFound",
           },
-          entry: ["unsubscribeFromAll", "connectToClient"],
+          entry: ["unsubscribeFromAll"],
         },
         timedout: {},
         notFound: {
           on: {
             retry: "retrying",
+            connect: "connected",
           },
           entry: "unsubscribeFromAll",
         },

src/extension/devtools/devtools.ts

@@ -40,6 +40,7 @@ const devtoolsMachine = interpret(
 
 let panelHidden = true;
 let connectTimeoutId: NodeJS.Timeout;
+let disconnectTimeoutId: NodeJS.Timeout;
 
 const port = browser.runtime.connect({
   name: inspectedTabId.toString(),
@@ -50,6 +51,12 @@ const rpcClient = createRpcClient<DevtoolsRPCMessage>(
   createPortMessageAdapter(port)
 );
 
+devtoolsMachine.subscribe(({ value }) => {
+  if (value === "connected") {
+    clearTimeout(disconnectTimeoutId);
+  }
+});
+
 // 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) {
@@ -73,12 +80,17 @@ clientPort.on("connectToDevtools", (message) => {
   });
 });
 
-clientPort.on("connectToClientTimeout", () => {
-  devtoolsMachine.send("timeout");
+clientPort.on("registerClient", (message) => {
+  devtoolsMachine.send({ type: "connect", clientContext: message.payload });
 });
 
 clientPort.on("disconnectFromDevtools", () => {
+  clearTimeout(disconnectTimeoutId);
   devtoolsMachine.send("disconnect");
+
+  disconnectTimeoutId = setTimeout(() => {
+    devtoolsMachine.send("clientNotFound");
+  }, 10_000);
 });
 
 clientPort.on("clientNotFound", () => {

src/extension/messages.ts

@@ -82,9 +82,9 @@ type ExplorerSubscriptionTerminationMessage = {
 };
 
 export type ClientMessage =
+  | { type: "registerClient"; payload: ClientContext }
   | { type: "clientNotFound" }
   | { type: "connectToClient" }
-  | { type: "connectToClientTimeout" }
   | {
       type: "connectToDevtools";
       payload: ClientContext;

src/extension/tab/hook.ts

@@ -268,6 +268,7 @@ function registerClient(client: ApolloClient<any>) {
   if (!knownClients.has(client)) {
     knownClients.add(client);
     watchForClientTermination(client);
+    tab.send({ type: "registerClient", payload: getClientData() });
   }
 
   hook.ApolloClient = client;
@@ -283,9 +284,6 @@ function registerClient(client: ApolloClient<any>) {
   // });
 
   clearInterval(interval);
-  // incase initial update was missed because the client wasn't ready, send the create devtools event.
-  // devtools checks to see if it's already created, so this won't create duplicate tabs
-  sendHookDataToDevTools("connectToDevtools");
   loadErrorCodes(rpcClient, client.version);
 }
 

src/extension/tab/tab.ts

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