@tanstack/react-query-devtools 5.0.0-alpha.14 → 5.0.0-alpha.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-query-devtools",
-  "version": "5.0.0-alpha.14",
+  "version": "5.0.0-alpha.18",
   "description": "Developer tools to interact with and visualize the TanStack/react-query cache",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -43,7 +43,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-error-boundary": "^3.1.4",
-    "@tanstack/react-query": "5.0.0-alpha.12"
+    "@tanstack/react-query": "5.0.0-alpha.18"
   },
   "dependencies": {
     "@tanstack/match-sorter-utils": "^8.7.0",
@@ -52,7 +52,7 @@
   "peerDependencies": {
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "@tanstack/react-query": "5.0.0-alpha.12"
+    "@tanstack/react-query": "5.0.0-alpha.18"
   },
   "scripts": {
     "clean": "rimraf ./build",

package/src/CachePanel/CachePanel.tsx

@@ -298,6 +298,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={() => {

package/src/__tests__/devtools.test.tsx

@@ -717,6 +717,52 @@ describe('ReactQueryDevtools', () => {
     expect(filterInput.value).toEqual('posts')
   })
 
+  it('should not show queries after clear', async () => {
+    const { queryClient, queryCache } = createQueryClient()
+
+    function Page() {
+      const query1Result = useQuery({
+        queryKey: ['query-1'],
+        queryFn: async () => {
+          return 'query-1-result'
+        },
+      })
+      const query2Result = useQuery({
+        queryKey: ['query-2'],
+        queryFn: async () => {
+          return 'query-2-result'
+        },
+      })
+      const query3Result = useQuery({
+        queryKey: ['query-3'],
+        queryFn: 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()