@tanstack/react-query-devtools 4.9.0 → 4.10.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-query-devtools",
-  "version": "4.9.0",
+  "version": "4.10.1",
   "description": "TODO",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -40,16 +40,17 @@
   "devDependencies": {
     "@types/use-sync-external-store": "^0.0.3",
     "react-error-boundary": "^3.1.4",
-    "@tanstack/react-query": "4.9.0"
+    "@tanstack/react-query": "4.10.1"
   },
   "dependencies": {
     "@tanstack/match-sorter-utils": "^8.1.1",
+    "superjson": "^1.10.0",
     "use-sync-external-store": "^1.2.0"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "@tanstack/react-query": "4.9.0"
+    "@tanstack/react-query": "4.10.1"
   },
   "scripts": {
     "clean": "rm -rf ./build",

package/src/__tests__/Explorer.test.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react'
 import { fireEvent, render, screen } from '@testing-library/react'
+import * as React from 'react'
 
 import { chunkArray, DefaultRenderer } from '../Explorer'
 import { displayValue } from '../utils'
@@ -62,7 +62,19 @@ describe('Explorer', () => {
     })
 
     it('when the value is a BigInt', () => {
-      expect(displayValue(BigInt(1))).toBe('"1n"')
+      expect(displayValue(BigInt(1))).toBe('"1"')
+    })
+
+    it('when the value is an Error', () => {
+      expect(displayValue(new Error('err'))).toBe(
+        '{"name":"Error","message":"err"}',
+      )
+    })
+
+    it('when the value is an object', () => {
+      expect(displayValue({ error: new Error('err'), bigint: 1n })).toBe(
+        '{"error":{"name":"Error","message":"err"},"bigint":"1"}',
+      )
     })
   })
 })

package/src/utils.ts

@@ -1,5 +1,6 @@
 import * as React from 'react'
 import type { Query } from '@tanstack/react-query'
+import SuperJSON from 'superjson'
 
 import type { Theme } from './theme'
 import { useTheme } from './theme'
@@ -118,10 +119,9 @@ export function useIsMounted() {
  * @param {unknown} value Value to be stringified
  */
 export const displayValue = (value: unknown) => {
-  const name = Object.getOwnPropertyNames(Object(value))
-  const newValue = typeof value === 'bigint' ? `${value.toString()}n` : value
+  const { json } = SuperJSON.serialize(value)
 
-  return JSON.stringify(newValue, name)
+  return JSON.stringify(json)
 }
 
 const getStatusRank = (q: Query) =>