Serialize query keys in devtools components

src/_components/devtools/Explorer.tsx

@@ -6,6 +6,7 @@ import sendClientCommand from "../../_util/sendClientCommand";
 import { Socket } from "socket.io-client";
 import { User } from "../../_types/User";
 import { useSerializedValue } from "../../_hooks/useSerializedValue";
+import { serialize } from "superjson";
 function isIterable(x: any): x is Iterable<unknown> {
   return Symbol.iterator in x;
 }
@@ -117,7 +118,7 @@ const DeleteItemButton = ({
       socket: socket,
       socketID: socketID,
       command: {
-        queryKey: activeQuery.queryKey.toString(),
+        queryKey: JSON.stringify(serialize(activeQuery.queryKey).json),
         command: "Data Delete",
         dataPath: dataPath,
       },
@@ -155,11 +156,15 @@ const ClearArrayButton = ({
     // queryClient.setQueryData(activeQuery.queryKey, newData);
     const socketID = currentUser && currentUser.id;
     if (!socketID) return;
+    console.log({
+      newData,
+      queryKey: activeQuery.queryKey,
+    })
     sendClientCommand({
       socket: socket,
       socketID: socketID,
       command: {
-        queryKey: activeQuery.queryKey.toString(),
+        queryKey: JSON.stringify(serialize(activeQuery.queryKey).json),
         command: "Data Update",
         newValue: newData,
       },
@@ -201,11 +206,15 @@ const ToggleValueButton = ({
     // queryClient.setQueryData(activeQuery.queryKey, newData);
     const socketID = currentUser && currentUser.id;
     if (!socketID) return;
+    console.log({
+      newData,
+      queryKey: activeQuery.queryKey,
+    })
     sendClientCommand({
       socket: socket,
       socketID: socketID,
       command: {
-        queryKey: activeQuery.queryKey.toString(),
+        queryKey: JSON.stringify(serialize(activeQuery.queryKey).json),
         command: "Data Update",
         newValue: newData,
       },
@@ -327,12 +336,16 @@ export default function Explorer({
     }
     const newData = updateNestedDataByPath(oldData, currentDataPath, newValue);
     const socketID = currentUser && currentUser.id;
+    console.log({
+      newData,
+      queryKey: activeQuery.queryKey,
+    })
     if (!socketID) return;
     sendClientCommand({
       socket: socket,
       socketID: socketID,
       command: {
-        queryKey: activeQuery.queryKey.toString(),
+        queryKey: JSON.stringify(serialize(activeQuery.queryKey).json),
         command: "Data Update",
         newValue: newData,
       },

src/_components/devtools/QueryActions.tsx

@@ -1,5 +1,6 @@
 import { Query, QueryKey } from "@tanstack/react-query";
 import React from "react";
+import { serialize } from "superjson";
 import ActionButton from "./ActionButton";
 import { getQueryStatusLabel } from "../../_util/getQueryStatusLabel";
 import sendClientCommand from "../../_util/sendClientCommand";
@@ -41,7 +42,7 @@ export default function QueryActions({ query, socket, currentUser }: Props) {
       socket: socket,
       socketID: socketID,
       command: {
-        queryKey: query.queryKey.toString(),
+        queryKey: JSON.stringify(serialize(query.queryKey).json),
         command: coomand,
       },
     });

src/_components/devtools/QueryButton.tsx

@@ -2,6 +2,7 @@ import { ExtendedQuery } from "../../_types/QueryExternal";
 import { getQueryStatusLabel } from "../../_util/getQueryStatusLabel";
 import { statusTobgColorClass } from "../../_util/statusTobgColorClass";
 import React from "react";
+import { displayValue } from "./displayValue";
 interface Props {
   query: ExtendedQuery;
   setSelected: React.Dispatch<React.SetStateAction<ExtendedQuery | undefined>>;
@@ -28,7 +29,7 @@ export default function QueryButton({ query, setSelected, selected }: Props) {
         {query.observersCount}
       </div>
       <div className="flex justify-between w-full  ">
-        <span className="py-1 px-2">{`["${query.queryKey}"]`}</span>{" "}
+        <span className="py-1 px-2">{`${displayValue(query.queryKey)}`}</span>{" "}
         {false && ( //query.isDisabled() &&
           <p className="text-xs self-stretch flex items-center p-0 px-2 text-[#1d2939] bg-[#d0d5dd] border-b border-[#d0d5dd]">
             disabled

src/_components/devtools/QueryDetails.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 import QueryDetailsChip from "./QueryDetailsChip";
 import { ExtendedQuery } from "../../_types/QueryExternal";
+import { displayValue } from "./displayValue";
+
 interface Props {
   query: ExtendedQuery | undefined;
 }
@@ -15,7 +17,11 @@ export default function QueryDetails({ query }: Props) {
     <div className=" min-w-[200px] text-xs">
       <h3 className="text-left bg-[#EAECF0]  p-1">Query Details</h3>
       <div className="flex justify-between p-1">
-        <div className="max-w-1/2 overflow-auto flex flex-wrap items-center">{`[ "${query.queryKey}" ]`}</div>
+        <div className="max-w-1/2 overflow-auto flex flex-wrap items-center">
+          <pre>
+            <code>{`${displayValue(query.queryKey, true)}`}</code>
+          </pre>
+        </div>
         <QueryDetailsChip query={query} />
       </div>
       <div className="flex justify-between p-1 ">

src/_components/devtools/displayValue.ts

@@ -0,0 +1,12 @@
+import { serialize } from "superjson";
+
+/**
+ * Displays a string regardless the type of the data
+ * @param {unknown} value Value to be stringified
+ * @param {boolean} beautify Formats json to multiline
+ */
+export const displayValue = (value: unknown, beautify: boolean = false) => {
+  const { json } = serialize(value);
+
+  return JSON.stringify(json, null, beautify ? 2 : undefined);
+};