@tanstack/react-query-devtools 4.29.5 → 4.29.7

package/package.json

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

package/src/__tests__/devtools.test.tsx

@@ -1091,4 +1091,56 @@ 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(['key'], () => {
+        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)
+  })
 })

package/src/devtools.tsx

@@ -1035,6 +1035,15 @@ const ActiveQuery = ({
         <Button
           type="button"
           onClick={() => {
+            // Return early if the query is already restoring
+            if (
+              activeQuery.state.fetchStatus === 'fetching' &&
+              typeof activeQuery.state.fetchMeta?.__previousQueryOptions ===
+                'undefined'
+            ) {
+              return
+            }
+
             if (activeQuery.state.data === undefined) {
               restoreQueryAfterLoadingOrError()
             } else {