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; - }, + 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; - }; + 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["clientContext"]; + } | { type: "disconnectFromDevtools" } | ExplorerRequestMessage | ExplorerResponseMessage | ExplorerSubscriptionTerminationMessage | { type: "requestData" } - | { type: "update"; payload: string }; + | { type: "update"; payload: GetContext["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(), - }), + }, }); }