Fully fix issue sending data from client to devtools (#1268)

.changeset/pretty-cars-jump.md

@@ -0,0 +1,5 @@
+---
+"apollo-client-devtools": patch
+---
+
+Revert change that removed JSON stringify on the entire set of client data. This is a followup to [#1259](https://github.com/apollographql/apollo-client-devtools/pull/1259) which only partially fixed the issue.

src/application/components/Cache/__tests__/Cache.test.tsx

@@ -78,7 +78,7 @@ describe("Cache component tests", () => {
       writeData({
         queries: [],
         mutations: [],
-        cache: JSON.stringify(CACHE_DATA),
+        cache: CACHE_DATA,
       });
     });
 
@@ -126,7 +126,7 @@ describe("Cache component tests", () => {
       writeData({
         queries: [],
         mutations: [],
-        cache: JSON.stringify(CACHE_DATA),
+        cache: CACHE_DATA,
       });
     });
 

src/application/index.tsx

@@ -24,6 +24,7 @@ import type {
   WatchedQuery,
 } from "./types/gql";
 import type { QueryInfo } from "../extension/tab/helpers";
+import type { JSONObject } from "./types/json";
 
 const cache = new InMemoryCache({
   fragments: fragmentRegistry,
@@ -152,7 +153,7 @@ export const writeData = ({
 }: {
   queries: QueryInfo[];
   mutations: QueryInfo[];
-  cache: string;
+  cache: JSONObject;
 }) => {
   const filteredQueries = queries.map(getQueryData).filter(Boolean);
 
@@ -179,7 +180,7 @@ export const writeData = ({
       },
     },
   });
-  cacheVar(cache);
+  cacheVar(JSON.stringify(cache));
 };
 
 export const AppProvider = () => {

src/application/machines.ts

@@ -1,5 +1,6 @@
 import { createMachine } from "./stateMachine";
 import type { QueryInfo } from "../extension/tab/helpers";
+import type { JSONObject } from "./types/json";
 
 export const devtoolsMachine = createMachine({
   initial: "initialized",
@@ -15,7 +16,7 @@ export const devtoolsMachine = createMachine({
     clientContext: {
       queries: [] as QueryInfo[],
       mutations: [] as QueryInfo[],
-      cache: "{}",
+      cache: {} as JSONObject,
     },
   },
   states: {

src/extension/devtools/devtools.ts

@@ -141,15 +141,7 @@ async function createDevtoolsPanel() {
       unsubscribers.add(startRequestInterval());
     }
 
-    removeUpdateListener = clientPort.on("update", (message) => {
-      const { queries, mutations, cache } = message.payload;
-
-      panelWindow.send({
-        type: "update",
-        payload: { queries, mutations, cache },
-      });
-    });
-
+    removeUpdateListener = clientPort.forward("update", panelWindow);
     removeExplorerForward = clientPort.forward("explorerResponse", panelWindow);
     removeExplorerListener = panelWindow.forward("explorerRequest", clientPort);
     removeSubscriptionTerminationListener = panelWindow.forward(

src/extension/tab/hook.ts

@@ -94,20 +94,21 @@ function initializeHook() {
   function sendHookDataToDevTools(eventName: "update" | "connectToDevtools") {
     tab.send({
       type: eventName,
-      payload: {
-        queries: hook.getQueries(),
-        mutations: hook.getMutations(),
-
-        // We need to JSON stringify the cache here in case the cache contains
-        // references to `URL` instances which are not cloneable via
-        // `structuredClone` (which `window.postMessage` uses to send messages).
-        // `JSON.stringify` does however serialize `URL`s into strings properly,
-        // so this should ensure that the cache data will be sent without
-        // errors.
-        //
-        // https://github.com/apollographql/apollo-client-devtools/issues/1258
-        cache: JSON.stringify(hook.getCache()),
-      },
+      // We need to JSON stringify the data here in case the cache contains
+      // references to irregular data such as `URL` instances which are not
+      // cloneable via `structuredClone` (which `window.postMessage` uses to
+      // send messages). `JSON.stringify` does however serialize `URL`s into
+      // strings properly, so this should ensure that the cache data will be
+      // sent without errors.
+      //
+      // https://github.com/apollographql/apollo-client-devtools/issues/1258
+      payload: JSON.parse(
+        JSON.stringify({
+          queries: hook.getQueries(),
+          mutations: hook.getMutations(),
+          cache: hook.getCache(),
+        })
+      ) as { queries: QueryInfo[]; mutations: QueryInfo[]; cache: JSONObject },
     });
   }