From 3569db162d0bdd009c80971b4929da9eed9b5c2c Mon Sep 17 00:00:00 2001
From: mc-petry <mc-petry@reply.io>
Date: Mon, 31 Oct 2022 20:52:31 +0200
Subject: [PATCH] Fix JSON formatting in detailed view.

---
 packages/react-query-devtools/src/devtools.tsx | 3 ++-
 packages/react-query-devtools/src/utils.ts     | 5 +++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/react-query-devtools/src/devtools.tsx b/packages/react-query-devtools/src/devtools.tsx
index a9246fb3a3..af1e28c6a6 100644
--- a/packages/react-query-devtools/src/devtools.tsx
+++ b/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
diff --git a/packages/react-query-devtools/src/utils.ts b/packages/react-query-devtools/src/utils.ts
index 43fe2c26fc..1bcad75982 100644
--- a/packages/react-query-devtools/src/utils.ts
+++ b/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