fix(devtools): prevent devtools explorer from collapsing when data is…

… being fetched
TanStack · Sep 24, 2022 · 94cb903 · 94cb903
1 parent 650fb99
commit 94cb903
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 17 deletions.
diff --git a/packages/react-query-devtools/src/Explorer.tsx b/packages/react-query-devtools/src/Explorer.tsx
@@ -67,7 +67,7 @@ type Entry = {
 }
 
 type RendererProps = {
-  HandleEntry: HandleEntryComponent
+  handleEntry: (entry: Entry) => JSX.Element
   label?: string
   value: unknown
   subEntries: Entry[]
@@ -101,7 +101,7 @@ export function chunkArray<T>(array: T[], size: number): T[][] {
 type Renderer = (props: RendererProps) => JSX.Element
 
 export const DefaultRenderer: Renderer = ({
-  HandleEntry,
+  handleEntry,
   label,
   value,
   subEntries = [],
@@ -126,11 +126,7 @@ export const DefaultRenderer: Renderer = ({
           </ExpandButton>
           {expanded ? (
             subEntryPages.length === 1 ? (
-              <SubEntries>
-                {subEntries.map((entry) => (
-                  <HandleEntry key={entry.label} entry={entry} />
-                ))}
-              </SubEntries>
+              <SubEntries>{subEntries.map(handleEntry)}</SubEntries>
             ) : (
               <SubEntries>
                 {subEntryPages.map((entries, index) => (
@@ -149,11 +145,7 @@ export const DefaultRenderer: Renderer = ({
                         {index * pageSize + pageSize - 1}]
                       </LabelButton>
                       {expandedPages.includes(index) ? (
-                        <SubEntries>
-                          {entries.map((entry) => (
-                            <HandleEntry key={entry.label} entry={entry} />
-                          ))}
-                        </SubEntries>
+                        <SubEntries>{entries.map(handleEntry)}</SubEntries>
                       ) : null}
                     </Entry>
                   </div>
@@ -171,8 +163,6 @@ export const DefaultRenderer: Renderer = ({
   )
 }
 
-type HandleEntryComponent = (props: { entry: Entry }) => JSX.Element
-
 type ExplorerProps = Partial<RendererProps> & {
   renderer?: Renderer
   defaultExpanded?: true | Record<string, boolean>
@@ -246,8 +236,14 @@ export default function Explorer({
   const subEntryPages = chunkArray(subEntries, pageSize)
 
   return renderer({
-    HandleEntry: ({ entry }) => (
-      <Explorer value={value} renderer={renderer} {...rest} {...entry} />
+    handleEntry: (entry) => (
+      <Explorer
+        key={entry.label}
+        value={value}
+        renderer={renderer}
+        {...rest}
+        {...entry}
+      />
     ),
     type,
     subEntries,

diff --git a/packages/react-query-devtools/src/__tests__/Explorer.test.tsx b/packages/react-query-devtools/src/__tests__/Explorer.test.tsx
@@ -39,7 +39,7 @@ describe('Explorer', () => {
           pageSize={10}
           expanded={false}
           subEntryPages={[[{ label: 'A lovely label' }]]}
-          HandleEntry={() => <></>}
+          handleEntry={() => <></>}
           value={undefined}
           subEntries={[]}
           type="string"