@tanstack/react-query 4.12.0 → 4.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-query",
-  "version": "4.12.0",
+  "version": "4.13.0",
   "description": "Hooks for managing, caching and syncing asynchronous and remote data in React",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -46,7 +46,7 @@
     "react-error-boundary": "^3.1.4"
   },
   "dependencies": {
-    "@tanstack/query-core": "4.12.0",
+    "@tanstack/query-core": "4.13.0",
     "use-sync-external-store": "^1.2.0"
   },
   "peerDependencies": {

package/src/__tests__/useInfiniteQuery.test.tsx

@@ -71,6 +71,7 @@ describe('useInfiniteQuery', () => {
       error: null,
       errorUpdatedAt: 0,
       failureCount: 0,
+      failureReason: null,
       errorUpdateCount: 0,
       fetchNextPage: expect.any(Function),
       fetchPreviousPage: expect.any(Function),
@@ -104,6 +105,7 @@ describe('useInfiniteQuery', () => {
       error: null,
       errorUpdatedAt: 0,
       failureCount: 0,
+      failureReason: null,
       errorUpdateCount: 0,
       fetchNextPage: expect.any(Function),
       fetchPreviousPage: expect.any(Function),

package/src/__tests__/useMutation.test.tsx

@@ -147,6 +147,57 @@ describe('useMutation', () => {
     expect(onSettledMock).toHaveBeenCalledWith(3)
   })
 
+  it('should set correct values for `failureReason` and `failureCount` on multiple mutate calls', async () => {
+    let count = 0
+    type Value = { count: number }
+
+    const mutateFn = jest.fn<Promise<Value>, [value: Value]>()
+
+    mutateFn.mockImplementationOnce(() => {
+      return Promise.reject('Error test Jonas')
+    })
+
+    mutateFn.mockImplementation(async (value) => {
+      await sleep(10)
+      return Promise.resolve(value)
+    })
+
+    function Page() {
+      const { mutate, failureCount, failureReason, data, status } = useMutation<
+        Value,
+        string,
+        Value
+      >(mutateFn)
+
+      return (
+        <div>
+          <h1>Data {data?.count}</h1>
+          <h2>Status {status}</h2>
+          <h2>Failed {failureCount} times</h2>
+          <h2>Failed because {failureReason ?? 'null'}</h2>
+          <button onClick={() => mutate({ count: ++count })}>mutate</button>
+        </div>
+      )
+    }
+
+    const rendered = renderWithClient(queryClient, <Page />)
+
+    await waitFor(() => rendered.getByText('Data'))
+
+    fireEvent.click(rendered.getByRole('button', { name: /mutate/i }))
+    await waitFor(() => rendered.getByText('Data'))
+    await waitFor(() => rendered.getByText('Status error'))
+    await waitFor(() => rendered.getByText('Failed 1 times'))
+    await waitFor(() => rendered.getByText('Failed because Error test Jonas'))
+
+    fireEvent.click(rendered.getByRole('button', { name: /mutate/i }))
+    await waitFor(() => rendered.getByText('Status loading'))
+    await waitFor(() => rendered.getByText('Status success'))
+    await waitFor(() => rendered.getByText('Data 2'))
+    await waitFor(() => rendered.getByText('Failed 0 times'))
+    await waitFor(() => rendered.getByText('Failed because null'))
+  })
+
   it('should be able to call `onError` and `onSettled` after each failed mutate', async () => {
     const onErrorMock = jest.fn()
     const onSettledMock = jest.fn()
@@ -581,21 +632,25 @@ describe('useMutation', () => {
       isLoading: false,
       isPaused: false,
       failureCount: 0,
+      failureReason: null,
     })
     expect(states[1]).toMatchObject({
       isLoading: true,
       isPaused: false,
       failureCount: 0,
+      failureReason: null,
     })
     expect(states[2]).toMatchObject({
       isLoading: true,
       isPaused: false,
       failureCount: 1,
+      failureReason: 'oops',
     })
     expect(states[3]).toMatchObject({
       isLoading: true,
       isPaused: true,
       failureCount: 1,
+      failureReason: 'oops',
     })
 
     onlineMock.mockReturnValue(true)
@@ -608,11 +663,13 @@ describe('useMutation', () => {
       isLoading: true,
       isPaused: false,
       failureCount: 1,
+      failureReason: 'oops',
     })
     expect(states[5]).toMatchObject({
       isLoading: false,
       isPaused: false,
-      failureCount: 1,
+      failureCount: 0,
+      failureReason: null,
       data: 'data',
     })
 

package/src/__tests__/useQuery.test.tsx

@@ -233,6 +233,7 @@ describe('useQuery', () => {
       error: null,
       errorUpdatedAt: 0,
       failureCount: 0,
+      failureReason: null,
       errorUpdateCount: 0,
       isError: false,
       isFetched: false,
@@ -260,6 +261,7 @@ describe('useQuery', () => {
       error: null,
       errorUpdatedAt: 0,
       failureCount: 0,
+      failureReason: null,
       errorUpdateCount: 0,
       isError: false,
       isFetched: true,
@@ -303,6 +305,7 @@ describe('useQuery', () => {
         <div>
           <h1>Status: {state.status}</h1>
           <div>Failure Count: {state.failureCount}</div>
+          <div>Failure Reason: {state.failureReason}</div>
         </div>
       )
     }
@@ -317,6 +320,7 @@ describe('useQuery', () => {
       error: null,
       errorUpdatedAt: 0,
       failureCount: 0,
+      failureReason: null,
       errorUpdateCount: 0,
       isError: false,
       isFetched: false,
@@ -344,6 +348,7 @@ describe('useQuery', () => {
       error: null,
       errorUpdatedAt: 0,
       failureCount: 1,
+      failureReason: 'rejected',
       errorUpdateCount: 0,
       isError: false,
       isFetched: false,
@@ -371,6 +376,7 @@ describe('useQuery', () => {
       error: 'rejected',
       errorUpdatedAt: expect.any(Number),
       failureCount: 2,
+      failureReason: 'rejected',
       errorUpdateCount: 1,
       isError: true,
       isFetched: true,
@@ -2877,6 +2883,7 @@ describe('useQuery', () => {
         <div>
           <div>error: {result.error ?? 'null'}</div>
           <div>failureCount: {result.failureCount}</div>
+          <div>failureReason: {result.failureReason}</div>
         </div>
       )
     }
@@ -2895,6 +2902,7 @@ describe('useQuery', () => {
     const rendered = renderWithClient(queryClient, <App />)
 
     await waitFor(() => rendered.getByText('failureCount: 1'))
+    await waitFor(() => rendered.getByText('failureReason: some error'))
     fireEvent.click(rendered.getByRole('button', { name: /hide/i }))
     await waitFor(() => rendered.getByRole('button', { name: /show/i }))
     fireEvent.click(rendered.getByRole('button', { name: /show/i }))
@@ -2925,6 +2933,7 @@ describe('useQuery', () => {
         <div>
           <div>error: {result.error ?? 'null'}</div>
           <div>failureCount: {result.failureCount}</div>
+          <div>failureReason: {result.failureReason}</div>
         </div>
       )
     }
@@ -2946,6 +2955,7 @@ describe('useQuery', () => {
     const rendered = renderWithClient(queryClient, <App />)
 
     await waitFor(() => rendered.getByText('failureCount: 1'))
+    await waitFor(() => rendered.getByText('failureReason: some error'))
     fireEvent.click(rendered.getByRole('button', { name: /hide/i }))
     fireEvent.click(rendered.getByRole('button', { name: /cancel/i }))
     await waitFor(() => rendered.getByRole('button', { name: /show/i }))
@@ -3169,15 +3179,20 @@ describe('useQuery', () => {
     })
 
     function Page() {
-      const { status, failureCount } = useQuery(key, queryFn, {
-        retry: 1,
-        retryDelay: 1,
-      })
+      const { status, failureCount, failureReason } = useQuery<unknown, string>(
+        key,
+        queryFn,
+        {
+          retry: 1,
+          retryDelay: 1,
+        },
+      )
 
       return (
         <div>
           <h1>{status}</h1>
           <h2>Failed {failureCount} times</h2>
+          <h2>Failed because {failureReason}</h2>
         </div>
       )
     }
@@ -3189,6 +3204,7 @@ describe('useQuery', () => {
 
     // query should fail `retry + 1` times, since first time isn't a "retry"
     await waitFor(() => rendered.getByText('Failed 2 times'))
+    await waitFor(() => rendered.getByText('Failed because Error test Barrett'))
 
     expect(queryFn).toHaveBeenCalledTimes(2)
   })
@@ -3207,7 +3223,7 @@ describe('useQuery', () => {
     })
 
     function Page() {
-      const { status, failureCount, error } = useQuery<
+      const { status, failureCount, failureReason, error } = useQuery<
         unknown,
         string,
         [string]
@@ -3220,6 +3236,7 @@ describe('useQuery', () => {
         <div>
           <h1>{status}</h1>
           <h2>Failed {failureCount} times</h2>
+          <h2>Failed because {failureReason}</h2>
           <h2>{error}</h2>
         </div>
       )
@@ -3231,6 +3248,8 @@ describe('useQuery', () => {
     await waitFor(() => rendered.getByText('error'))
 
     await waitFor(() => rendered.getByText('Failed 2 times'))
+    await waitFor(() => rendered.getByText('Failed because NoRetry'))
+
     await waitFor(() => rendered.getByText('NoRetry'))
 
     expect(queryFn).toHaveBeenCalledTimes(2)
@@ -3247,7 +3266,7 @@ describe('useQuery', () => {
     })
 
     function Page() {
-      const { status, failureCount } = useQuery(key, queryFn, {
+      const { status, failureCount, failureReason } = useQuery(key, queryFn, {
         retry: 1,
         retryDelay: (_, error: DelayError) => error.delay,
       })
@@ -3256,6 +3275,7 @@ describe('useQuery', () => {
         <div>
           <h1>{status}</h1>
           <h2>Failed {failureCount} times</h2>
+          <h2>Failed because DelayError: {failureReason?.delay}ms</h2>
         </div>
       )
     }
@@ -3266,6 +3286,7 @@ describe('useQuery', () => {
 
     expect(queryFn).toHaveBeenCalledTimes(1)
 
+    await waitFor(() => rendered.getByText('Failed because DelayError: 50ms'))
     await waitFor(() => rendered.getByText('Failed 2 times'))
 
     expect(queryFn).toHaveBeenCalledTimes(2)
@@ -3281,7 +3302,7 @@ describe('useQuery', () => {
     let count = 0
 
     function Page() {
-      const query = useQuery(
+      const query = useQuery<unknown, string>(
         key,
         () => {
           count++
@@ -3298,6 +3319,7 @@ describe('useQuery', () => {
           <div>error {String(query.error)}</div>
           <div>status {query.status}</div>
           <div>failureCount {query.failureCount}</div>
+          <div>failureReason {query.failureReason}</div>
         </div>
       )
     }
@@ -3306,12 +3328,14 @@ describe('useQuery', () => {
 
     // The query should display the first error result
     await waitFor(() => rendered.getByText('failureCount 1'))
+    await waitFor(() => rendered.getByText('failureReason fetching error 1'))
     await waitFor(() => rendered.getByText('status loading'))
     await waitFor(() => rendered.getByText('error null'))
 
     // Check if the query really paused
     await sleep(10)
     await waitFor(() => rendered.getByText('failureCount 1'))
+    await waitFor(() => rendered.getByText('failureReason fetching error 1'))
 
     act(() => {
       // reset visibilityState to original value
@@ -3321,12 +3345,14 @@ describe('useQuery', () => {
 
     // Wait for the final result
     await waitFor(() => rendered.getByText('failureCount 4'))
+    await waitFor(() => rendered.getByText('failureReason fetching error 4'))
     await waitFor(() => rendered.getByText('status error'))
     await waitFor(() => rendered.getByText('error fetching error 4'))
 
     // Check if the query really stopped
     await sleep(10)
     await waitFor(() => rendered.getByText('failureCount 4'))
+    await waitFor(() => rendered.getByText('failureReason fetching error 4'))
 
     // Check if the error has been logged in the console
     expect(mockLogger.error).toHaveBeenCalledWith('fetching error 4')
@@ -3493,7 +3519,7 @@ describe('useQuery', () => {
     function Page() {
       let counter = 0
 
-      const query = useQuery(
+      const query = useQuery<string, Error>(
         key,
         async () => {
           if (counter < 2) {
@@ -3509,6 +3535,7 @@ describe('useQuery', () => {
       return (
         <div>
           <div>failureCount {query.failureCount}</div>
+          <div>failureReason {query.failureReason?.message ?? 'null'}</div>
         </div>
       )
     }
@@ -3516,7 +3543,9 @@ describe('useQuery', () => {
     const rendered = renderWithClient(queryClient, <Page />)
 
     await waitFor(() => rendered.getByText('failureCount 2'))
+    await waitFor(() => rendered.getByText('failureReason error'))
     await waitFor(() => rendered.getByText('failureCount 0'))
+    await waitFor(() => rendered.getByText('failureReason null'))
   })
 
   // See https://github.com/tannerlinsley/react-query/issues/199
@@ -4909,7 +4938,7 @@ describe('useQuery', () => {
       let count = 0
 
       function Page() {
-        const state = useQuery({
+        const state = useQuery<string, string>({
           queryKey: key,
           queryFn: async () => {
             count++
@@ -4924,6 +4953,7 @@ describe('useQuery', () => {
               status: {state.status}, fetchStatus: {state.fetchStatus},
               failureCount: {state.failureCount}
             </div>
+            <div>failureReason: {state.failureReason ?? 'null'}</div>
             <div>data: {state.data}</div>
             <button
               onClick={() => queryClient.invalidateQueries({ queryKey: key })}
@@ -4946,6 +4976,7 @@ describe('useQuery', () => {
           'status: success, fetchStatus: paused, failureCount: 0',
         ),
       )
+      await waitFor(() => rendered.getByText('failureReason: null'))
 
       onlineMock.mockReturnValue(true)
       window.dispatchEvent(new Event('online'))
@@ -4955,11 +4986,13 @@ describe('useQuery', () => {
           'status: success, fetchStatus: fetching, failureCount: 0',
         ),
       )
+      await waitFor(() => rendered.getByText('failureReason: null'))
       await waitFor(() =>
         rendered.getByText(
           'status: success, fetchStatus: idle, failureCount: 0',
         ),
       )
+      await waitFor(() => rendered.getByText('failureReason: null'))
 
       await waitFor(() => {
         expect(rendered.getByText('data: data2')).toBeInTheDocument()
@@ -5198,7 +5231,7 @@ describe('useQuery', () => {
       let count = 0
 
       function Page() {
-        const state = useQuery({
+        const state = useQuery<unknown, Error>({
           queryKey: key,
           queryFn: async (): Promise<unknown> => {
             count++
@@ -5215,6 +5248,7 @@ describe('useQuery', () => {
               status: {state.status}, fetchStatus: {state.fetchStatus},
               failureCount: {state.failureCount}
             </div>
+            <div>failureReason: {state.failureReason?.message ?? 'null'}</div>
           </div>
         )
       }
@@ -5226,6 +5260,7 @@ describe('useQuery', () => {
           'status: loading, fetchStatus: fetching, failureCount: 1',
         ),
       )
+      await waitFor(() => rendered.getByText('failureReason: failed1'))
 
       const onlineMock = mockNavigatorOnLine(false)
 
@@ -5236,6 +5271,7 @@ describe('useQuery', () => {
           'status: loading, fetchStatus: paused, failureCount: 1',
         ),
       )
+      await waitFor(() => rendered.getByText('failureReason: failed1'))
 
       expect(count).toBe(1)
 
@@ -5245,6 +5281,7 @@ describe('useQuery', () => {
       await waitFor(() =>
         rendered.getByText('status: error, fetchStatus: idle, failureCount: 3'),
       )
+      await waitFor(() => rendered.getByText('failureReason: failed3'))
 
       expect(count).toBe(3)
 
@@ -5539,7 +5576,7 @@ describe('useQuery', () => {
       let count = 0
 
       function Page() {
-        const state = useQuery({
+        const state = useQuery<unknown, Error>({
           queryKey: key,
           queryFn: async (): Promise<unknown> => {
             count++
@@ -5557,6 +5594,7 @@ describe('useQuery', () => {
               status: {state.status}, fetchStatus: {state.fetchStatus},
               failureCount: {state.failureCount}
             </div>
+            <div>failureReason: {state.failureReason?.message ?? 'null'}</div>
           </div>
         )
       }
@@ -5568,6 +5606,7 @@ describe('useQuery', () => {
           'status: loading, fetchStatus: paused, failureCount: 1',
         ),
       )
+      await waitFor(() => rendered.getByText('failureReason: failed1'))
 
       expect(count).toBe(1)
 
@@ -5577,6 +5616,7 @@ describe('useQuery', () => {
       await waitFor(() =>
         rendered.getByText('status: error, fetchStatus: idle, failureCount: 3'),
       )
+      await waitFor(() => rendered.getByText('failureReason: failed3'))
 
       expect(count).toBe(3)