@tanstack/react-query-devtools 4.27.0 → 4.29.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-query-devtools",
-  "version": "4.27.0",
+  "version": "4.29.0",
   "description": "Developer tools to interact with and visualize the TanStack/react-query cache",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -46,7 +46,7 @@
     "react-dom": "^18.2.0",
     "react-dom-17": "npm:react-dom@^17.0.2",
     "react-error-boundary": "^3.1.4",
-    "@tanstack/react-query": "4.27.0"
+    "@tanstack/react-query": "4.28.0"
   },
   "dependencies": {
     "@tanstack/match-sorter-utils": "^8.7.0",
@@ -56,7 +56,7 @@
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "@tanstack/react-query": "4.27.0"
+    "@tanstack/react-query": "4.28.0"
   },
   "scripts": {
     "clean": "rimraf ./build",

package/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()
 

package/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() {}