diff --git a/package.json b/package.json index d489ef8162..4e0c9b36c9 100644 --- a/package.json +++ b/package.json @@ -71,8 +71,8 @@ "eslint-plugin-react-hooks": "^4.3.0", "eslint-plugin-standard": "^4.0.1", "git-log-parser": "^1.2.0", - "jsonfile": "^6.1.0", "jest": "^27.5.1", + "jsonfile": "^6.1.0", "luxon": "^2.3.2", "prettier": "^2.6.2", "react": "^18.2.0", diff --git a/packages/react-query-devtools/package.json b/packages/react-query-devtools/package.json index 38b18c3eee..87b2a3e57c 100644 --- a/packages/react-query-devtools/package.json +++ b/packages/react-query-devtools/package.json @@ -44,7 +44,8 @@ "devDependencies": { "@types/use-sync-external-store": "^0.0.3", "react-error-boundary": "^3.1.4", - "@tanstack/react-query": "workspace:*" + "@tanstack/react-query": "workspace:*", + "superjson": "^1.10.0" }, "dependencies": { "@tanstack/match-sorter-utils": "^8.1.1", diff --git a/packages/react-query-devtools/src/__tests__/Explorer.test.tsx b/packages/react-query-devtools/src/__tests__/Explorer.test.tsx index 9fb7654c16..5cdccec1f6 100644 --- a/packages/react-query-devtools/src/__tests__/Explorer.test.tsx +++ b/packages/react-query-devtools/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"}', + ) }) }) }) diff --git a/packages/react-query-devtools/src/utils.ts b/packages/react-query-devtools/src/utils.ts index d7252036c0..90beb3cab7 100644 --- a/packages/react-query-devtools/src/utils.ts +++ b/packages/react-query-devtools/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) => diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f8de10e64a..f523e25bfe 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -698,6 +698,7 @@ importers: '@tanstack/react-query': workspace:* '@types/use-sync-external-store': ^0.0.3 react-error-boundary: ^3.1.4 + superjson: ^1.10.0 use-sync-external-store: ^1.2.0 dependencies: '@tanstack/match-sorter-utils': 8.1.1 @@ -706,6 +707,7 @@ importers: '@tanstack/react-query': link:../react-query '@types/use-sync-external-store': 0.0.3 react-error-boundary: 3.1.4 + superjson: 1.10.0 packages/react-query-persist-client: specifiers: @@ -6639,7 +6641,7 @@ packages: /axios/0.21.4: resolution: {integrity: sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==} dependencies: - follow-redirects: 1.15.1 + follow-redirects: 1.15.1_debug@4.3.4 transitivePeerDependencies: - debug dev: false @@ -6647,7 +6649,7 @@ packages: /axios/0.24.0: resolution: {integrity: sha512-Q6cWsys88HoPgAaFAVUb0WpPk0O8iTeisR9IMqy9G8AbO4NlpVknrnQS03zzF9PGAWgO3cgletO3VjV/P7VztA==} dependencies: - follow-redirects: 1.15.1 + follow-redirects: 1.15.1_debug@4.3.4 transitivePeerDependencies: - debug dev: true @@ -6655,7 +6657,7 @@ packages: /axios/0.26.1: resolution: {integrity: sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==} dependencies: - follow-redirects: 1.15.1 + follow-redirects: 1.15.1_debug@4.3.4 transitivePeerDependencies: - debug @@ -8090,6 +8092,13 @@ packages: resolution: {integrity: sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==} engines: {node: '>= 0.6'} + /copy-anything/3.0.2: + resolution: {integrity: sha512-CzATjGXzUQ0EvuvgOCI6A4BGOo2bcVx8B+eC2nF862iv9fopnPQwlrbACakNCHRIJbCSBj+J/9JeDf60k64MkA==} + engines: {node: '>=12.13'} + dependencies: + is-what: 4.1.7 + dev: true + /copy-concurrently/1.0.5: resolution: {integrity: sha512-f2domd9fsVDFtaFcbaRZuYXwtdmnzqbADSwhSWYxYB/Q8zsdUUFMXVRwXGDMWmbEzAn1kdRrtI1T/KTFOL4X2A==} dependencies: @@ -10786,7 +10795,7 @@ packages: inherits: 2.0.4 readable-stream: 2.3.7 - /follow-redirects/1.15.1: + /follow-redirects/1.15.1_debug@4.3.4: resolution: {integrity: sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA==} engines: {node: '>=4.0'} peerDependencies: @@ -10794,6 +10803,8 @@ packages: peerDependenciesMeta: debug: optional: true + dependencies: + debug: 4.3.4_supports-color@6.1.0 /follow-redirects/1.5.10: resolution: {integrity: sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==} @@ -11540,7 +11551,7 @@ packages: engines: {node: '>=8.0.0'} dependencies: eventemitter3: 4.0.7 - follow-redirects: 1.15.1 + follow-redirects: 1.15.1_debug@4.3.4 requires-port: 1.0.0 transitivePeerDependencies: - debug @@ -18711,6 +18722,13 @@ packages: resolution: {integrity: sha512-Mu7R0g4ig9TUuGSxJavny5Rv0egCEtpZRNMrZaYS1vxkiIxGiGUwoezU3LazIQ+KE04hTrTfNPgxU5gzi7F5Pw==} dev: false + /superjson/1.10.0: + resolution: {integrity: sha512-ks6I5fm5KXUbDqt4Epe1VwkKDaC9+kIj5HF7yhiHjChFne0EkFqsnTv1mdHE2IT6fq2CzLC3zeA/fw0BRIoNwA==} + engines: {node: '>=10'} + dependencies: + copy-anything: 3.0.2 + dev: true + /supports-color/2.0.0: resolution: {integrity: sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==} engines: {node: '>=0.8.0'}