@tanstack/react-query-devtools 5.0.0-alpha.21 → 5.0.0-alpha.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-query-devtools",
-  "version": "5.0.0-alpha.21",
+  "version": "5.0.0-alpha.24",
   "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.21"
+    "@tanstack/react-query": "5.0.0-alpha.24"
   },
   "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.21"
+    "@tanstack/react-query": "5.0.0-alpha.24"
   },
   "scripts": {
     "clean": "rimraf ./build",

package/src/CachePanel/ActiveQuery.tsx

@@ -101,7 +101,7 @@ const ActiveQuery = ({
 
   const restoreQueryAfterLoadingOrError = () => {
     activeQuery.fetch(
-      (activeQuery.state.fetchMeta as any).__previousQueryOptions,
+      (activeQuery.state.fetchMeta as any)?.__previousQueryOptions,
       {
         // Make sure this fetch will cancel the previous one
         cancelRefetch: true,
@@ -252,6 +252,14 @@ const ActiveQuery = ({
         <Button
           type="button"
           onClick={() => {
+            // Return early if the query is already restoring
+            if (
+              activeQuery.state.fetchStatus === 'fetching' &&
+              typeof (activeQuery.state.fetchMeta as any)
+                ?.__previousQueryOptions === 'undefined'
+            ) {
+              return
+            }
             if (activeQuery.state.data === undefined) {
               restoreQueryAfterLoadingOrError()
             } else {

package/src/__tests__/devtools.test.tsx

@@ -1081,4 +1081,59 @@ describe('ReactQueryDevtools', () => {
       expect(screen.getByText('No error, success')).toBeInTheDocument()
     })
   })
+
+  it('should not refetch when already restoring a query', async () => {
+    const { queryClient } = createQueryClient()
+
+    let count = 0
+    let resolvePromise: (value: unknown) => void = () => undefined
+
+    function App() {
+      const { data } = useQuery({
+        queryKey: ['key'],
+        queryFn: () => {
+          count++
+
+          // Resolve the promise immediately when
+          // the query is fetched for the first time
+          if (count === 1) {
+            return Promise.resolve('test')
+          }
+
+          return new Promise((resolve) => {
+            // Do not resolve immediately and store the
+            // resolve function to resolve the promise later
+            resolvePromise = resolve
+          })
+        },
+      })
+
+      return (
+        <div>
+          <h1>{typeof data === 'string' ? data : 'No data'}</h1>
+        </div>
+      )
+    }
+
+    renderWithClient(queryClient, <App />, {
+      initialIsOpen: true,
+    })
+
+    const loadingButton = await screen.findByRole('button', {
+      name: 'Trigger loading',
+    })
+    fireEvent.click(loadingButton)
+
+    await waitFor(() => {
+      expect(screen.getByText('Restore loading')).toBeInTheDocument()
+    })
+
+    // Click the restore loading button twice and only resolve query promise
+    // after the second click.
+    fireEvent.click(screen.getByRole('button', { name: /restore loading/i }))
+    fireEvent.click(screen.getByRole('button', { name: /restore loading/i }))
+    resolvePromise('test')
+
+    expect(count).toBe(2)
+  })
 })