From cb22c6f11b0a7bbd5dd997b9f9e846ae23c6cfbc Mon Sep 17 00:00:00 2001
From: Jerel Miller <jerelmiller@gmail.com>
Date: Thu, 7 Mar 2024 16:29:57 -0700
Subject: [PATCH] Avoid serializing the payload before sending it in devtools
 messages (#1245)

---
 .changeset/happy-kiwis-watch.md    |  5 +++++
 src/extension/devtools/devtools.ts | 16 ++--------------
 src/extension/messages.ts          |  7 +++++--
 src/extension/tab/hook.ts          |  4 ++--
 4 files changed, 14 insertions(+), 18 deletions(-)
 create mode 100644 .changeset/happy-kiwis-watch.md

diff --git a/.changeset/happy-kiwis-watch.md b/.changeset/happy-kiwis-watch.md
new file mode 100644
index 000000000..18ee7d176
--- /dev/null
+++ b/.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).
diff --git a/src/extension/devtools/devtools.ts b/src/extension/devtools/devtools.ts
index c76fa2d9e..1d1e5d559 100755
--- a/src/extension/devtools/devtools.ts
+++ b/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",
diff --git a/src/extension/messages.ts b/src/extension/messages.ts
index 480b969e1..769f53452 100644
--- a/src/extension/messages.ts
+++ b/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
diff --git a/src/extension/tab/hook.ts b/src/extension/tab/hook.ts
index 36416ae35..51f00461c 100755
--- a/src/extension/tab/hook.ts
+++ b/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(),
-      }),
+      },
     });
   }