fix(devtools): BigInt stringify

change/@graphitation-rempl-apollo-devtools-14a6c9d6-2b2d-408a-aee2-b75704225839.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "convert bigint to string",
+  "packageName": "@graphitation/rempl-apollo-devtools",
+  "email": "pavelglac@gmail.com",
+  "dependentChangeType": "patch"
+}

packages/rempl-apollo-devtools/src/subscriber/apollo-cache/history/DiffViewer.tsx

@@ -9,6 +9,7 @@ import {
   ChevronDown20Regular,
 } from "@fluentui/react-icons";
 import { useDiffViewerStyles } from "./DiffViewer.styles";
+import { formatValue } from "./shared/diffUtils";
 
 interface DiffViewerProps {
   oldValue: unknown;
@@ -360,16 +361,6 @@ const DiffLineComponent: React.FC<DiffLineComponentProps> = ({
   );
 };
 
-function formatValue(value: unknown): string {
-  if (value === undefined) return "undefined";
-  if (value === null) return "null";
-  try {
-    return JSON.stringify(value, null, 2);
-  } catch {
-    return String(value);
-  }
-}
-
 // LCS (Longest Common Subsequence) algorithm for better diff matching
 function computeLCS(
   oldLines: string[],

packages/rempl-apollo-devtools/src/subscriber/apollo-cache/history/components/ArrayIndexItem.tsx

@@ -1,8 +1,9 @@
 import React from "react";
 import { Text, Tooltip } from "@fluentui/react-components";
 import type { IndexItem } from "./arrayDiffUtils";
-import { formatValueForDisplay, formatDataPreview } from "./arrayDiffUtils";
+import { formatDataPreview } from "./arrayDiffUtils";
 import { useArrayDiffViewerStyles } from "../ArrayDiffViewer.styles";
+import { formatValue } from "../shared/diffUtils";
 
 interface ArrayIndexItemProps {
   item: IndexItem;
@@ -97,9 +98,7 @@ export const ArrayIndexItem: React.FC<ArrayIndexItemProps> = ({
         </Tooltip>
       );
     }
-    return isExpanded
-      ? formatValueForDisplay(item.data)
-      : formatDataPreview(item.data);
+    return isExpanded ? formatValue(item.data) : formatDataPreview(item.data);
   };
 
   return (

packages/rempl-apollo-devtools/src/subscriber/apollo-cache/history/components/FieldChangeItem.tsx

@@ -5,6 +5,7 @@ import type { HistoryFieldChange } from "@graphitation/apollo-forest-run";
 import { DifferenceKind } from "@graphitation/apollo-forest-run";
 import { ArrayDiffViewer } from "../ArrayDiffViewer";
 import { useFieldChangesListStyles } from "../FieldChangesList.styles";
+import { formatValue } from "../shared/diffUtils";
 
 interface FieldChangeItemProps {
   change: HistoryFieldChange;
@@ -192,30 +193,3 @@ function formatValuePreview(value: unknown): string {
   }
   return String(value);
 }
-
-function formatValue(value: unknown): string {
-  if (value === undefined) return "(unavailable)";
-  if (value === null) return "null";
-
-  // If it's a string, check if it's JSON
-  if (typeof value === "string") {
-    try {
-      const parsed = JSON.parse(value);
-      // If successfully parsed and it's an object or array, format it
-      if (typeof parsed === "object" && parsed !== null) {
-        return JSON.stringify(parsed, null, 2);
-      }
-    } catch {
-      // Not JSON, return the string as-is
-      return value;
-    }
-    return value;
-  }
-
-  // For objects, arrays, and other types, stringify with formatting
-  try {
-    return JSON.stringify(value, null, 2);
-  } catch {
-    return String(value);
-  }
-}

packages/rempl-apollo-devtools/src/subscriber/apollo-cache/history/components/ListViewMode.tsx

@@ -1,11 +1,9 @@
 import React from "react";
 import { Text, tokens } from "@fluentui/react-components";
 import type { CompositeListLayoutChange as ListItemChange } from "@graphitation/apollo-forest-run";
-import {
-  getListItemChangeDescription,
-  formatValueForDisplay,
-} from "./arrayDiffUtils";
+import { getListItemChangeDescription } from "./arrayDiffUtils";
 import { useArrayDiffViewerStyles } from "../ArrayDiffViewer.styles";
+import { formatValue } from "../shared/diffUtils";
 
 interface ListViewModeProps {
   itemChanges: ListItemChange[];
@@ -32,7 +30,7 @@ export const ListViewMode: React.FC<ListViewModeProps> = ({ itemChanges }) => {
                   fontFamily: tokens.fontFamilyMonospace,
                 }}
               >
-                {formatValueForDisplay(change.data)}
+                {formatValue(change.data)}
               </pre>
             )}
           </div>

packages/rempl-apollo-devtools/src/subscriber/apollo-cache/history/components/OperationMetadata.tsx

@@ -45,7 +45,7 @@ export const OperationMetadata: React.FC<OperationMetadataProps> = ({
           {shouldInlineVariables ? (
             <Text className={classes.inlineVariables}>{variablesString}</Text>
           ) : (
-            <CodeBlock value={variables} language="json" maxHeight="200px" />
+            <CodeBlock value={variables} maxHeight="200px" />
           )}
         </div>
       )}

packages/rempl-apollo-devtools/src/subscriber/apollo-cache/history/components/arrayDiffUtils.ts

@@ -9,16 +9,6 @@ export interface IndexItem {
   newIndex?: number; // for moved items
 }
 
-export const formatValueForDisplay = (value: unknown): string => {
-  if (value === undefined) return "undefined";
-  if (value === null) return "null";
-  try {
-    return JSON.stringify(value, null, 2);
-  } catch {
-    return String(value);
-  }
-};
-
 export const formatDataPreview = (data: unknown): string => {
   if (data === null) return "null";
   if (data === undefined) return "undefined";

packages/rempl-apollo-devtools/src/subscriber/apollo-cache/history/shared/__tests__/diffUtils.test.ts

@@ -0,0 +1,60 @@
+import { formatValue } from "../diffUtils";
+
+describe("formatValue", () => {
+  describe("primitive values", () => {
+    it("should format undefined", () => {
+      expect(formatValue(undefined)).toBe("undefined");
+    });
+
+    it("should format null", () => {
+      expect(formatValue(null)).toBe("null");
+    });
+
+    it("should format strings", () => {
+      expect(formatValue("hello")).toBe('"hello"');
+      expect(formatValue("")).toBe('""');
+      expect(formatValue("multi\nline")).toBe('"multi\\nline"');
+    });
+
+    it("should format numbers", () => {
+      expect(formatValue(42)).toBe("42");
+      expect(formatValue(Infinity)).toBe("null");
+      expect(formatValue(NaN)).toBe("null");
+    });
+
+    it("should format booleans", () => {
+      expect(formatValue(true)).toBe("true");
+      expect(formatValue(false)).toBe("false");
+    });
+  });
+
+  describe("bigint values", () => {
+    it("should format standalone bigint", () => {
+      expect(formatValue(BigInt(123))).toBe('"123n"');
+      expect(formatValue(BigInt(0))).toBe('"0n"');
+    });
+  });
+
+  describe("objects and arrays", () => {
+    it("should format objects", () => {
+      const result = formatValue({
+        user: { name: "John", address: { city: "NYC" } },
+      });
+      expect(result).toBe(
+        '{\n  "user": {\n    "name": "John",\n    "address": {\n      "city": "NYC"\n    }\n  }\n}',
+      );
+    });
+
+    it("should format object with BigInt", () => {
+      const result = formatValue({ id: BigInt(Number.MAX_SAFE_INTEGER) });
+      expect(result).toBe(`{\n  "id": "${Number.MAX_SAFE_INTEGER}n"\n}`);
+    });
+
+    it("should format arrays", () => {
+      const result = formatValue([{ id: 1 }, { id: 2 }]);
+      expect(result).toBe(
+        '[\n  {\n    "id": 1\n  },\n  {\n    "id": 2\n  }\n]',
+      );
+    });
+  });
+});

packages/rempl-apollo-devtools/src/subscriber/apollo-cache/history/shared/components/CodeBlock.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { makeStyles, shorthands, tokens } from "@fluentui/react-components";
+import { formatValue } from "../diffUtils";
 
 const useStyles = makeStyles({
   codeBlock: {
@@ -39,29 +40,12 @@ export interface CodeBlockProps {
 
 export const CodeBlock: React.FC<CodeBlockProps> = ({
   value,
-  language = "json",
   inline = false,
   maxHeight,
   className,
 }) => {
   const classes = useStyles();
 
-  const formatValue = (): string => {
-    if (typeof value === "string") {
-      return value;
-    }
-
-    if (language === "json") {
-      try {
-        return JSON.stringify(value, null, 2);
-      } catch (e) {
-        return String(value);
-      }
-    }
-
-    return String(value);
-  };
-
   const style = maxHeight ? { maxHeight } : undefined;
 
   return (
@@ -71,7 +55,7 @@ export const CodeBlock: React.FC<CodeBlockProps> = ({
       }`}
       style={style}
     >
-      <code>{formatValue()}</code>
+      <code>{formatValue(value)}</code>
     </pre>
   );
 };

packages/rempl-apollo-devtools/src/subscriber/apollo-cache/history/shared/components/JsonViewer.tsx

@@ -1,6 +1,7 @@
-import React, { useMemo } from "react";
+import React from "react";
 import { VirtualizerScrollView } from "@fluentui/react-virtualizer";
 import { tokens } from "@fluentui/react-components";
+import { formatValue } from "../diffUtils";
 
 interface JsonViewerProps {
   data: unknown;
@@ -11,13 +12,7 @@ export const JsonViewer: React.FC<JsonViewerProps> = ({
   data,
   maxHeight = 400,
 }) => {
-  const lines = useMemo(() => {
-    try {
-      return JSON.stringify(data, null, 2).split("\n");
-    } catch {
-      return String(data).split("\n");
-    }
-  }, [data]);
+  const lines = formatValue(data).split("\n");
 
   const itemSize = 20;
   const height = Math.min(lines.length * itemSize, maxHeight);

packages/rempl-apollo-devtools/src/subscriber/apollo-cache/history/shared/diffUtils.ts

@@ -146,8 +146,13 @@ export function computeDiff(oldText: string, newText: string): DiffHunk[] {
 export function formatValue(value: unknown): string {
   if (value === undefined) return "undefined";
   if (value === null) return "null";
+
   try {
-    return JSON.stringify(value, null, 2);
+    return JSON.stringify(
+      value,
+      (_, val) => (typeof val === "bigint" ? val.toString() + "n" : val),
+      2,
+    );
   } catch {
     return String(value);
   }