feat(react-query-devtools): add button to clear cache (#5186)

Co-authored-by: Dominik Dorfmeister <[email protected]>

Author: kandros

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

@@ -661,6 +661,43 @@ describe('ReactQueryDevtools', () => {
     expect(filterInput.value).toEqual('posts')
   })
 
+  it('should not show queries after clear', async () => {
+    const { queryClient, queryCache } = createQueryClient()
+
+    function Page() {
+      const query1Result = useQuery(['query-1'], async () => {
+        return 'query-1-result'
+      })
+      const query2Result = useQuery(['query-2'], async () => {
+        return 'query-2-result'
+      })
+      const query3Result = useQuery(['query-3'], async () => {
+        return 'query-3-result'
+      })
+
+      return (
+        <div>
+          <h1>
+            {query1Result.data} {query2Result.data} {query3Result.data}{' '}
+          </h1>
+        </div>
+      )
+    }
+
+    renderWithClient(queryClient, <Page />)
+
+    fireEvent.click(
+      screen.getByRole('button', { name: /open react query devtools/i }),
+    )
+
+    expect(queryCache.getAll()).toHaveLength(3)
+
+    const clearButton = screen.getByLabelText(/clear/i)
+    fireEvent.click(clearButton)
+
+    expect(queryCache.getAll()).toHaveLength(0)
+  })
+
   it('style should have a nonce', async () => {
     const { queryClient } = createQueryClient()
 

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

@@ -597,6 +597,7 @@ export const ReactQueryDevtoolsPanel = React.forwardRef<
                 <Logo aria-hidden />
                 <ScreenReader text="Close React Query Devtools" />
               </button>
+
               <div
                 style={{
                   display: 'flex',
@@ -673,6 +674,18 @@ export const ReactQueryDevtoolsPanel = React.forwardRef<
                   >
                     {baseSort === 1 ? '⬆ Asc' : '⬇ Desc'}
                   </Button>
+                  <Button
+                    title="Clear cache"
+                    aria-label="Clear cache"
+                    type="button"
+                    onClick={() => queryCache.clear()}
+                    style={{
+                      padding: '.3em .4em',
+                      marginRight: '.5em',
+                    }}
+                  >
+                    Clear
+                  </Button>
                   <Button
                     type="button"
                     onClick={() => {
@@ -1330,5 +1343,7 @@ const QueryRow = React.memo(
   },
 )
 
+QueryRow.displayName = 'QueryRow'
+
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 function noop() {}