fix(react-query-devtools): Fix JSON formatting in detail view. (#4418)

Co-authored-by: Dominik Dorfmeister <office@dorfmeister.cc>

Author: mc-petry

packages/react-query-devtools/src/devtools.tsx

@@ -22,6 +22,7 @@ import {
   getResizeHandleStyle,
   getSidedProp,
   defaultPanelSize,
+  displayValue,
 } from './utils'
 import type { Corner, Side } from './utils'
 import {
@@ -846,7 +847,7 @@ const ActiveQuery = ({
                 overflow: 'auto',
               }}
             >
-              {JSON.stringify(activeQuery.queryKey, null, 2)}
+              {displayValue(activeQuery.queryKey, true)}
             </pre>
           </Code>
           <span

packages/react-query-devtools/src/utils.ts

@@ -117,11 +117,12 @@ export function useIsMounted() {
 /**
  * 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) => {
+export const displayValue = (value: unknown, beautify: boolean = false) => {
   const { json } = SuperJSON.serialize(value)
 
-  return JSON.stringify(json)
+  return JSON.stringify(json, null, beautify ? 2 : undefined)
 }
 
 // Sorting functions