fix(core): change shouldFetchOptionally function to account for query key changes (TanStack#2565)

Author: jbee37142

src/core/queryObserver.ts

@@ -763,7 +763,7 @@ function shouldFetchOptionally(
   return (
     options.enabled !== false &&
     (query !== prevQuery || prevOptions.enabled === false) &&
-    (prevQuery.state.status !== 'error' || prevOptions.enabled === false) &&
+    (query.state.status !== 'error' || prevOptions.enabled === false) &&
     isStale(query, options)
   )
 }

src/react/tests/suspense.test.tsx

@@ -647,4 +647,68 @@ describe("useQuery's in Suspense mode", () => {
     await waitFor(() => rendered.getByText('error boundary'))
     consoleMock.mockRestore()
   })
+
+  it('should error catched in error boundary without infinite loop when query keys changed', async () => {
+    const consoleMock = mockConsoleError()
+
+    let succeed = true
+
+    function Page() {
+      const [key, rerender] = React.useReducer(x => x + 1, 0)
+      const queryKeys = [key, succeed]
+
+      const result = useQuery(
+        queryKeys,
+        async () => {
+          await sleep(10)
+          if (!succeed) {
+            throw new Error('Suspense Error Bingo')
+          } else {
+            return 'data'
+          }
+        },
+        {
+          retry: false,
+          suspense: true,
+        }
+      )
+      return (
+        <div>
+          <span>rendered</span> <span>{result.data}</span>
+          <button aria-label="fail" onClick={rerender}>
+            fail
+          </button>
+        </div>
+      )
+    }
+
+    function App() {
+      const { reset } = useQueryErrorResetBoundary()
+      return (
+        <ErrorBoundary
+          onReset={reset}
+          fallbackRender={() => <div>error boundary</div>}
+        >
+          <React.Suspense fallback="Loading...">
+            <Page />
+          </React.Suspense>
+        </ErrorBoundary>
+      )
+    }
+
+    const rendered = renderWithClient(queryClient, <App />)
+
+    // render suspense fallback (Loading...)
+    await waitFor(() => rendered.getByText('Loading...'))
+    // resolve promise -> render Page (rendered)
+    await waitFor(() => rendered.getByText('rendered'))
+
+    // change promise result to error
+    succeed = false
+    // change query key
+    fireEvent.click(rendered.getByLabelText('fail'))
+    // render error boundary fallback (error boundary)
+    await waitFor(() => rendered.getByText('error boundary'))
+    consoleMock.mockRestore()
+  })
 })

src/react/tests/useQuery.test.tsx

@@ -3944,4 +3944,65 @@ describe('useQuery', () => {
 
     consoleMock.mockRestore()
   })
+
+  it('should refetch when query key changed when previous status is error', async () => {
+    const consoleMock = mockConsoleError()
+    const queryFn = jest.fn()
+
+    function Page({ id }: { id: number }) {
+      queryFn.mockImplementation(async () => {
+        await sleep(10)
+        if (id % 2 === 1) {
+          return Promise.reject(new Error('Suspense Error Bingo'))
+        } else {
+          return 'data'
+        }
+      })
+      const { error, isLoading } = useQuery([id], queryFn, {
+        retry: false,
+        retryOnMount: false,
+        refetchOnMount: false,
+        refetchOnWindowFocus: false,
+      })
+
+      if (isLoading) {
+        return <div>status: loading</div>
+      }
+      if (error instanceof Error) {
+        return <div>error</div>
+      }
+      return <div>rendered</div>
+    }
+
+    function App() {
+      const [id, changeId] = React.useReducer(x => x + 1, 1)
+
+      return (
+        <div>
+          <Page id={id} />
+          <button aria-label="change" onClick={changeId}>
+            change {id}
+          </button>
+        </div>
+      )
+    }
+
+    const rendered = renderWithClient(queryClient, <App />)
+
+    // initial state check
+    rendered.getByText('status: loading')
+
+    // render error state component
+    await waitFor(() => rendered.getByText('error'))
+
+    // change to enabled to false
+    fireEvent.click(rendered.getByLabelText('change'))
+    await waitFor(() => rendered.getByText('rendered'))
+
+    // // change to enabled to true
+    fireEvent.click(rendered.getByLabelText('change'))
+    await waitFor(() => rendered.getByText('error'))
+
+    consoleMock.mockRestore()
+  })
 })