fix(react-query): allow retryOnMount when throwOnError is function (#9336)

packages/react-query/src/__tests__/useQuery.test.tsx

@@ -6027,6 +6027,7 @@ describe('useQuery', () => {
     it('should be able to toggle subscribed', async () => {
       const key = queryKey()
       const queryFn = vi.fn(() => Promise.resolve('data'))
+
       function Page() {
         const [subscribed, setSubscribed] = React.useState(true)
         const { data } = useQuery({
@@ -6069,6 +6070,7 @@ describe('useQuery', () => {
     it('should not be attached to the query when subscribed is false', async () => {
       const key = queryKey()
       const queryFn = vi.fn(() => Promise.resolve('data'))
+
       function Page() {
         const { data } = useQuery({
           queryKey: key,
@@ -6095,6 +6097,7 @@ describe('useQuery', () => {
     it('should not re-render when data is added to the cache when subscribed is false', async () => {
       const key = queryKey()
       let renders = 0
+
       function Page() {
         const { data } = useQuery({
           queryKey: key,
@@ -6297,6 +6300,7 @@ describe('useQuery', () => {
       await sleep(5)
       return { numbers: { current: { id } } }
     }
+
     function Test() {
       const [id, setId] = React.useState(1)
 
@@ -6357,6 +6361,7 @@ describe('useQuery', () => {
       await sleep(5)
       return { numbers: { current: { id } } }
     }
+
     function Test() {
       const [id, setId] = React.useState(1)
 
@@ -6854,10 +6859,12 @@ describe('useQuery', () => {
   it('should console.error when there is no queryFn', () => {
     const consoleErrorMock = vi.spyOn(console, 'error')
     const key = queryKey()
+
     function Example() {
       useQuery({ queryKey: key })
       return <></>
     }
+
     renderWithClient(queryClient, <Example />)
 
     expect(consoleErrorMock).toHaveBeenCalledTimes(1)
@@ -6867,4 +6874,56 @@ describe('useQuery', () => {
 
     consoleErrorMock.mockRestore()
   })
+
+  it('should retry on mount when throwOnError returns false', async () => {
+    const key = queryKey()
+    let fetchCount = 0
+    const queryFn = vi.fn().mockImplementation(() => {
+      fetchCount++
+      console.log(`Fetching... (attempt ${fetchCount})`)
+      return Promise.reject(new Error('Simulated 500 error'))
+    })
+
+    function Component() {
+      const { status, error } = useQuery({
+        queryKey: key,
+        queryFn,
+        throwOnError: () => false,
+        retryOnMount: true,
+        staleTime: Infinity,
+        retry: false,
+      })
+
+      return (
+        <div>
+          <div data-testid="status">{status}</div>
+          {error && <div data-testid="error">{error.message}</div>}
+        </div>
+      )
+    }
+
+    const { unmount, getByTestId } = renderWithClient(
+      queryClient,
+      <Component />,
+    )
+
+    await vi.waitFor(() =>
+      expect(getByTestId('status')).toHaveTextContent('error'),
+    )
+    expect(getByTestId('error')).toHaveTextContent('Simulated 500 error')
+    expect(fetchCount).toBe(1)
+
+    unmount()
+
+    const initialFetchCount = fetchCount
+
+    renderWithClient(queryClient, <Component />)
+
+    await vi.waitFor(() =>
+      expect(getByTestId('status')).toHaveTextContent('error'),
+    )
+
+    expect(fetchCount).toBe(initialFetchCount + 1)
+    expect(queryFn).toHaveBeenCalledTimes(2)
+  })
 })

packages/react-query/src/errorBoundaryUtils.ts

@@ -28,13 +28,16 @@ export const ensurePreventErrorBoundaryRetry = <
 ) => {
   if (
     options.suspense ||
-    options.throwOnError ||
     options.experimental_prefetchInRender
   ) {
     // Prevent retrying failed query if the error boundary has not been reset yet
     if (!errorResetBoundary.isReset()) {
       options.retryOnMount = false
     }
+  } else if (options.throwOnError) {
+    if (!errorResetBoundary.isReset() && typeof options.throwOnError !== 'function') {
+      options.retryOnMount = false
+    }
   }
 }