@tanstack/react-query 4.10.3 → 4.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-query",
-  "version": "4.10.3",
+  "version": "4.13.0",
   "description": "Hooks for managing, caching and syncing asynchronous and remote data in React",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -35,12 +35,18 @@
   ],
   "devDependencies": {
     "@types/jscodeshift": "^0.11.3",
+    "@types/react": "^18.0.14",
+    "@types/react-dom": "^18.0.5",
     "@types/use-sync-external-store": "^0.0.3",
+    "react": "^18.2.0",
+    "react-17": "npm:react@^17.0.2",
+    "react-dom": "^18.2.0",
+    "react-dom-17": "npm:react-dom@^17.0.2",
     "jscodeshift": "^0.13.1",
     "react-error-boundary": "^3.1.4"
   },
   "dependencies": {
-    "@tanstack/query-core": "4.10.3",
+    "@tanstack/query-core": "4.13.0",
     "use-sync-external-store": "^1.2.0"
   },
   "peerDependencies": {
@@ -60,7 +66,7 @@
     "clean": "rm -rf ./build",
     "test:codemods": "../../node_modules/.bin/jest --config codemods/jest.config.js",
     "test:eslint": "../../node_modules/.bin/eslint --ext .ts,.tsx ./src",
-    "test:jest": "pnpm test:codemods && ../../node_modules/.bin/jest --config jest.config.js",
-    "test:jest:dev": "pnpm test:jest --watch"
+    "test:jest": "pnpm run test:codemods && ../../node_modules/.bin/jest --config ./jest.config.ts",
+    "test:dev": "pnpm run test:jest --watch"
   }
 }

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,
@@ -2269,40 +2275,6 @@ describe('useQuery', () => {
     expect(queryCache.find(key)!.options.queryFn).toBe(queryFn1)
   })
 
-  it('should render correct states even in case of useEffect triggering delays', async () => {
-    const key = queryKey()
-    const states: UseQueryResult<string>[] = []
-
-    const originalUseEffect = React.useEffect
-
-    // Try to simulate useEffect timing delay
-    // @ts-ignore
-    React.useEffect = (...args: any[]) => {
-      originalUseEffect(() => {
-        setTimeout(() => {
-          args[0]()
-        }, 10)
-      }, args[1])
-    }
-
-    function Page() {
-      const state = useQuery(key, () => 'data', { staleTime: Infinity })
-      states.push(state)
-      return null
-    }
-
-    renderWithClient(queryClient, <Page />)
-    queryClient.setQueryData(key, 'data')
-    await sleep(50)
-
-    // @ts-ignore
-    React.useEffect = originalUseEffect
-
-    expect(states.length).toBe(2)
-    expect(states[0]).toMatchObject({ status: 'loading' })
-    expect(states[1]).toMatchObject({ status: 'success' })
-  })
-
   it('should batch re-renders', async () => {
     const key = queryKey()
 
@@ -2911,6 +2883,7 @@ describe('useQuery', () => {
         <div>
           <div>error: {result.error ?? 'null'}</div>
           <div>failureCount: {result.failureCount}</div>
+          <div>failureReason: {result.failureReason}</div>
         </div>
       )
     }
@@ -2929,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 }))
@@ -2959,6 +2933,7 @@ describe('useQuery', () => {
         <div>
           <div>error: {result.error ?? 'null'}</div>
           <div>failureCount: {result.failureCount}</div>
+          <div>failureReason: {result.failureReason}</div>
         </div>
       )
     }
@@ -2980,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 }))
@@ -3203,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>
       )
     }
@@ -3223,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)
   })
@@ -3241,7 +3223,7 @@ describe('useQuery', () => {
     })
 
     function Page() {
-      const { status, failureCount, error } = useQuery<
+      const { status, failureCount, failureReason, error } = useQuery<
         unknown,
         string,
         [string]
@@ -3254,6 +3236,7 @@ describe('useQuery', () => {
         <div>
           <h1>{status}</h1>
           <h2>Failed {failureCount} times</h2>
+          <h2>Failed because {failureReason}</h2>
           <h2>{error}</h2>
         </div>
       )
@@ -3265,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)
@@ -3281,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,
       })
@@ -3290,6 +3275,7 @@ describe('useQuery', () => {
         <div>
           <h1>{status}</h1>
           <h2>Failed {failureCount} times</h2>
+          <h2>Failed because DelayError: {failureReason?.delay}ms</h2>
         </div>
       )
     }
@@ -3300,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)
@@ -3315,7 +3302,7 @@ describe('useQuery', () => {
     let count = 0
 
     function Page() {
-      const query = useQuery(
+      const query = useQuery<unknown, string>(
         key,
         () => {
           count++
@@ -3332,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>
       )
     }
@@ -3340,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
@@ -3355,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')
@@ -3527,7 +3519,7 @@ describe('useQuery', () => {
     function Page() {
       let counter = 0
 
-      const query = useQuery(
+      const query = useQuery<string, Error>(
         key,
         async () => {
           if (counter < 2) {
@@ -3543,6 +3535,7 @@ describe('useQuery', () => {
       return (
         <div>
           <div>failureCount {query.failureCount}</div>
+          <div>failureReason {query.failureReason?.message ?? 'null'}</div>
         </div>
       )
     }
@@ -3550,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
@@ -4943,7 +4938,7 @@ describe('useQuery', () => {
       let count = 0
 
       function Page() {
-        const state = useQuery({
+        const state = useQuery<string, string>({
           queryKey: key,
           queryFn: async () => {
             count++
@@ -4958,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 })}
@@ -4980,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'))
@@ -4989,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()
@@ -5232,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++
@@ -5249,6 +5248,7 @@ describe('useQuery', () => {
               status: {state.status}, fetchStatus: {state.fetchStatus},
               failureCount: {state.failureCount}
             </div>
+            <div>failureReason: {state.failureReason?.message ?? 'null'}</div>
           </div>
         )
       }
@@ -5260,6 +5260,7 @@ describe('useQuery', () => {
           'status: loading, fetchStatus: fetching, failureCount: 1',
         ),
       )
+      await waitFor(() => rendered.getByText('failureReason: failed1'))
 
       const onlineMock = mockNavigatorOnLine(false)
 
@@ -5270,6 +5271,7 @@ describe('useQuery', () => {
           'status: loading, fetchStatus: paused, failureCount: 1',
         ),
       )
+      await waitFor(() => rendered.getByText('failureReason: failed1'))
 
       expect(count).toBe(1)
 
@@ -5279,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)
 
@@ -5573,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++
@@ -5591,6 +5594,7 @@ describe('useQuery', () => {
               status: {state.status}, fetchStatus: {state.fetchStatus},
               failureCount: {state.failureCount}
             </div>
+            <div>failureReason: {state.failureReason?.message ?? 'null'}</div>
           </div>
         )
       }
@@ -5602,6 +5606,7 @@ describe('useQuery', () => {
           'status: loading, fetchStatus: paused, failureCount: 1',
         ),
       )
+      await waitFor(() => rendered.getByText('failureReason: failed1'))
 
       expect(count).toBe(1)
 
@@ -5611,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)
 

package/src/__tests__/utils.tsx

@@ -109,11 +109,13 @@ export function executeMutation(
 // so that we can pretend to be in a server environment
 export function setIsServer(isServer: boolean) {
   const original = utils.isServer
-  // @ts-ignore
-  utils.isServer = isServer
+  Object.defineProperty(utils, 'isServer', {
+    get: () => isServer,
+  })
 
   return () => {
-    // @ts-ignore
-    utils.isServer = original
+    Object.defineProperty(utils, 'isServer', {
+      get: () => original,
+    })
   }
 }