Avoid serializing the payload before sending it in devtools messages (#…

…1245)

.changeset/happy-kiwis-watch.md

@@ -0,0 +1,5 @@
+---
+"apollo-client-devtools": patch
+---
+
+Don't `JSON.stringify` the Apollo Client instance data before sending it in the message payload when communicating between the various parts of the devtools extension. This was mostly redundant since message passing already relies on the [structured clone algorithm](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm).

src/extension/devtools/devtools.ts

@@ -1,6 +1,4 @@
 import browser from "webextension-polyfill";
-import { QueryInfo } from "../tab/helpers";
-import { JSONObject } from "../../application/types/json";
 import { devtoolsMachine } from "../../application/machines";
 import { createPortActor } from "../actor";
 import { ClientMessage } from "../messages";
@@ -37,11 +35,7 @@ clientPort.on("connectToDevtools", (message) => {
   devtoolsMachine.send({
     type: "connect",
     context: {
-      clientContext: JSON.parse(message.payload ?? "") as {
-        queries: QueryInfo[];
-        mutations: QueryInfo[];
-        cache: Record<string, JSONObject>;
-      },
+      clientContext: message.payload,
     },
   });
 });
@@ -148,13 +142,7 @@ async function createDevtoolsPanel() {
     }
 
     removeUpdateListener = clientPort.on("update", (message) => {
-      const { queries, mutations, cache } = JSON.parse(
-        message.payload ?? ""
-      ) as {
-        queries: QueryInfo[];
-        mutations: QueryInfo[];
-        cache: Record<string, JSONObject>;
-      };
+      const { queries, mutations, cache } = message.payload;
 
       panelWindow.send({
         type: "update",

src/extension/messages.ts

@@ -29,13 +29,16 @@ export type ClientMessage =
   | { type: "clientNotFound" }
   | { type: "connectToClient" }
   | { type: "connectToClientTimeout" }
-  | { type: "connectToDevtools"; payload: string }
+  | {
+      type: "connectToDevtools";
+      payload: GetContext<DevtoolsMachine>["clientContext"];
+    }
   | { type: "disconnectFromDevtools" }
   | ExplorerRequestMessage
   | ExplorerResponseMessage
   | ExplorerSubscriptionTerminationMessage
   | { type: "requestData" }
-  | { type: "update"; payload: string };
+  | { type: "update"; payload: GetContext<DevtoolsMachine>["clientContext"] };
 
 export type PanelMessage =
   | ExplorerRequestMessage

src/extension/tab/hook.ts

@@ -99,11 +99,11 @@ function initializeHook() {
   function sendHookDataToDevTools(eventName: "update" | "connectToDevtools") {
     tab.send({
       type: eventName,
-      payload: JSON.stringify({
+      payload: {
         queries: hook.getQueries(),
         mutations: hook.getMutations(),
         cache: hook.getCache(),
-      }),
+      },
     });
   }