Record connectors requests until devtools is connected

src/application/index.tsx

@@ -15,6 +15,7 @@ import { RouterProvider } from "react-router-dom";
 import { router } from "./router";
 import { getPanelActor } from "../extension/devtools/panelActor";
 import { connectorsRequestsVar } from "./vars";
+import type { ConnectorsDebuggingResultPayload } from "../types";
 
 loadDevMessages();
 loadErrorMessages();
@@ -99,6 +100,13 @@ export const AppProvider = () => {
 export const initDevTools = () => {
   const root = createRoot(document.getElementById("devtools") as HTMLElement);
 
+  rpcClient
+    .withTimeout(3000)
+    .request("getConnectorsRequests")
+    .then((results) => {
+      connectorsRequestsVar(results.map(assignConnectorsIds));
+    });
+
   root.render(<AppProvider />);
 };
 
@@ -108,19 +116,23 @@ const actor = getPanelActor(window);
 actor.on("connectorsDebuggingResult", ({ payload }) => {
   connectorsRequestsVar([
     ...connectorsRequestsVar(),
-    {
-      ...payload,
-      id: ++nextPayloadId,
-      debuggingResult: {
-        ...payload.debuggingResult,
-        data: payload.debuggingResult.data.map((request, idx) => ({
-          ...request,
-          id: idx + 1,
-        })),
-      },
-    },
+    assignConnectorsIds(payload),
   ]);
 });
 
 actor.on("pageNavigated", () => connectorsRequestsVar([]));
 actor.on("clientTerminated", () => connectorsRequestsVar([]));
+
+function assignConnectorsIds(result: ConnectorsDebuggingResultPayload) {
+  return {
+    ...result,
+    id: ++nextPayloadId,
+    debuggingResult: {
+      ...result.debuggingResult,
+      data: result.debuggingResult.data.map((data, idx) => ({
+        ...data,
+        id: idx + 1,
+      })),
+    },
+  };
+}

src/extension/rpc.ts

@@ -1,6 +1,11 @@
 import type { ErrorCodes } from "@apollo/client/invariantErrorCodes";
 import type { JSONObject } from "../application/types/json";
-import type { ApolloClientInfo, NoInfer, SafeAny } from "../types";
+import type {
+  ApolloClientInfo,
+  ConnectorsDebuggingResultPayload,
+  NoInfer,
+  SafeAny,
+} from "../types";
 import { createId } from "../utils/createId";
 import { RPC_MESSAGE_TIMEOUT } from "./errorMessages";
 import { deserializeError, serializeError } from "./errorSerialization";
@@ -15,6 +20,7 @@ export type RPCRequest = {
   getMutations(clientId: string): MutationDetails[];
   getCache(clientId: string): JSONObject;
   getErrorCodes(version: string): Promise<ErrorCodes | undefined>;
+  getConnectorsRequests(): ConnectorsDebuggingResultPayload[];
 };
 
 export interface RpcClient {

src/extension/tab/hook.ts

@@ -6,7 +6,11 @@ import * as manifest from "../chrome/manifest.json";
 const { version: devtoolsVersion } = manifest;
 import type { MutationDetails, QueryDetails } from "./helpers";
 import { getQueries, getQueriesLegacy, getMutations } from "./helpers";
-import type { ApolloClientInfo, SafeAny } from "../../types";
+import type {
+  ApolloClientInfo,
+  ConnectorsDebuggingResultPayload,
+  SafeAny,
+} from "../../types";
 import { getPrivateAccess } from "../../privateAccess";
 import type { JSONObject } from "../../application/types/json";
 import { createWindowActor } from "../actor";
@@ -131,6 +135,26 @@ handleRpc("getCache", (clientId) => {
   return getClientById(clientId)?.cache.extract(true) ?? {};
 });
 
+// Temporarily hold all connectors requests until the devtools connects and asks
+// for them. After these are requests, we clear this array since we no longer
+// need to hold onto the requests here.
+let connectorsRequests: ConnectorsDebuggingResultPayload[] = [];
+handleRpc("getConnectorsRequests", () => {
+  try {
+    return connectorsRequests;
+  } finally {
+    disconnectFromDebuggingResults();
+    connectorsRequests = [];
+  }
+});
+
+const disconnectFromDebuggingResults = tab.on(
+  "connectorsDebuggingResult",
+  ({ payload }) => {
+    connectorsRequests.push(payload);
+  }
+);
+
 function getClientById(clientId: string) {
   const [client] =
     [...knownClients.entries()].find(([, id]) => id === clientId) ?? [];