@tanstack/react-query 5.0.0-alpha.2 → 5.0.0-alpha.21

package/src/__tests__/useQuery.test.tsx

@@ -21,6 +21,8 @@ import type {
 } from '..'
 import { QueryCache, useQuery, keepPreviousData } from '..'
 import { ErrorBoundary } from 'react-error-boundary'
+import { vi } from 'vitest'
+import type { Mock } from 'vitest'
 
 describe('useQuery', () => {
   const queryCache = new QueryCache()
@@ -62,23 +64,17 @@ describe('useQuery', () => {
       useQuery({
         queryKey: [key],
         queryFn: async () => true,
-        onSuccess: (data) => expectType<boolean>(data),
-        onSettled: (data) => expectType<boolean | undefined>(data),
       })
 
       // it should be possible to specify a union type as result type
       const unionTypeSync = useQuery({
         queryKey: key,
         queryFn: () => (Math.random() > 0.5 ? 'a' : 'b'),
-
-        onSuccess: (data) => expectType<'a' | 'b'>(data),
       })
       expectType<'a' | 'b' | undefined>(unionTypeSync.data)
       const unionTypeAsync = useQuery<'a' | 'b'>({
         queryKey: key,
         queryFn: () => Promise.resolve(Math.random() > 0.5 ? 'a' : 'b'),
-
-        onSuccess: (data) => expectType<'a' | 'b'>(data),
       })
       expectType<'a' | 'b' | undefined>(unionTypeAsync.data)
 
@@ -448,255 +444,6 @@ describe('useQuery', () => {
     })
   })
 
-  it('should call onSuccess after a query has been fetched', async () => {
-    const key = queryKey()
-    const states: UseQueryResult<string>[] = []
-    const onSuccess = jest.fn()
-
-    function Page() {
-      const state = useQuery({
-        queryKey: key,
-        queryFn: async () => {
-          await sleep(10)
-          return 'data'
-        },
-        onSuccess,
-      })
-      states.push(state)
-      return <div>data: {state.data}</div>
-    }
-
-    const rendered = renderWithClient(queryClient, <Page />)
-
-    await rendered.findByText('data: data')
-    expect(states.length).toBe(2)
-    expect(onSuccess).toHaveBeenCalledTimes(1)
-    expect(onSuccess).toHaveBeenCalledWith('data')
-  })
-
-  it('should call onSuccess after a query has been refetched', async () => {
-    const key = queryKey()
-    const states: UseQueryResult<string>[] = []
-    const onSuccess = jest.fn()
-    let count = 0
-
-    function Page() {
-      const state = useQuery({
-        queryKey: key,
-        queryFn: async () => {
-          count++
-          await sleep(10)
-          return 'data' + count
-        },
-        onSuccess,
-      })
-
-      states.push(state)
-
-      return (
-        <div>
-          <div>data: {state.data}</div>
-          <button onClick={() => state.refetch()}>refetch</button>
-        </div>
-      )
-    }
-
-    const rendered = renderWithClient(queryClient, <Page />)
-
-    await rendered.findByText('data: data1')
-    fireEvent.click(rendered.getByRole('button', { name: /refetch/i }))
-    await rendered.findByText('data: data2')
-
-    expect(states.length).toBe(3) //pending, success, success after refetch
-    expect(count).toBe(2)
-    expect(onSuccess).toHaveBeenCalledTimes(2)
-  })
-
-  it('should call onSuccess after a disabled query has been fetched', async () => {
-    const key = queryKey()
-    const states: UseQueryResult<string>[] = []
-    const onSuccess = jest.fn()
-
-    function Page() {
-      const state = useQuery({
-        queryKey: key,
-        queryFn: () => 'data',
-        enabled: false,
-        onSuccess,
-      })
-
-      states.push(state)
-
-      return (
-        <div>
-          <div>isSuccess: {state.isSuccess ? 'true' : 'false'}</div>
-          <button onClick={() => state.refetch()}>refetch</button>
-        </div>
-      )
-    }
-
-    const rendered = renderWithClient(queryClient, <Page />)
-
-    await waitFor(() => {
-      rendered.getByText('isSuccess: false')
-    })
-
-    fireEvent.click(rendered.getByRole('button', { name: 'refetch' }))
-
-    await waitFor(() => {
-      rendered.getByText('isSuccess: true')
-    })
-
-    expect(onSuccess).toHaveBeenCalledTimes(1)
-    expect(onSuccess).toHaveBeenCalledWith('data')
-  })
-
-  it('should not call onSuccess if a component has unmounted', async () => {
-    const key = queryKey()
-    const states: UseQueryResult<string>[] = []
-    const onSuccess = jest.fn()
-
-    function Page() {
-      const [show, setShow] = React.useState(true)
-
-      React.useEffect(() => {
-        setShow(false)
-      }, [setShow])
-
-      return show ? <Component /> : null
-    }
-
-    function Component() {
-      const state = useQuery({
-        queryKey: key,
-        queryFn: async () => {
-          await sleep(10)
-          return 'data'
-        },
-        onSuccess,
-      })
-      states.push(state)
-      return null
-    }
-
-    renderWithClient(queryClient, <Page />)
-
-    await sleep(50)
-    expect(states.length).toBe(1)
-    expect(onSuccess).toHaveBeenCalledTimes(0)
-  })
-
-  it('should call onError after a query has been fetched with an error', async () => {
-    const key = queryKey()
-    const states: UseQueryResult<unknown>[] = []
-    const onError = jest.fn()
-
-    function Page() {
-      const state = useQuery<unknown>({
-        queryKey: key,
-        queryFn: () => Promise.reject(new Error('error')),
-        retry: false,
-        onError,
-      })
-      states.push(state)
-      return null
-    }
-
-    renderWithClient(queryClient, <Page />)
-
-    await sleep(10)
-    expect(states.length).toBe(2)
-    expect(onError).toHaveBeenCalledTimes(1)
-    expect(onError).toHaveBeenCalledWith(new Error('error'))
-  })
-
-  it('should not call onError when receiving a CancelledError', async () => {
-    const key = queryKey()
-    const onError = jest.fn()
-
-    function Page() {
-      const { status, fetchStatus } = useQuery({
-        queryKey: key,
-        queryFn: async () => {
-          await sleep(10)
-          return 23
-        },
-
-        onError,
-      })
-      return (
-        <span>
-          status: {status}, fetchStatus: {fetchStatus}
-        </span>
-      )
-    }
-
-    const rendered = renderWithClient(queryClient, <Page />)
-
-    rendered.getByText('status: pending, fetchStatus: fetching')
-
-    await queryClient.cancelQueries({ queryKey: key })
-    // query cancellation will reset the query to it's initial state
-    await waitFor(() =>
-      rendered.getByText('status: pending, fetchStatus: idle'),
-    )
-    expect(onError).not.toHaveBeenCalled()
-  })
-
-  it('should call onSettled after a query has been fetched', async () => {
-    const key = queryKey()
-    const states: UseQueryResult<string>[] = []
-    const onSettled = jest.fn()
-
-    function Page() {
-      const state = useQuery({
-        queryKey: key,
-        queryFn: () => 'data',
-        onSettled,
-      })
-      states.push(state)
-
-      return <div>data: {state.data}</div>
-    }
-
-    const rendered = renderWithClient(queryClient, <Page />)
-
-    await waitFor(() => {
-      rendered.getByText('data: data')
-    })
-
-    expect(states.length).toBe(2)
-    expect(onSettled).toHaveBeenCalledTimes(1)
-    expect(onSettled).toHaveBeenCalledWith('data', null)
-  })
-
-  it('should call onSettled after a query has been fetched with an error', async () => {
-    const key = queryKey()
-    const onSettled = jest.fn()
-    const error = new Error('error')
-
-    function Page() {
-      const state = useQuery({
-        queryKey: key,
-        queryFn: async () => {
-          await sleep(10)
-          return Promise.reject(error)
-        },
-        retry: false,
-        onSettled,
-      })
-      return <div>status: {state.status}</div>
-    }
-
-    const rendered = renderWithClient(queryClient, <Page />)
-
-    await waitFor(() => {
-      rendered.getByText('status: error')
-    })
-    expect(onSettled).toHaveBeenCalledTimes(1)
-    expect(onSettled).toHaveBeenCalledWith(undefined, error)
-  })
-
   it('should not cancel an ongoing fetch when refetch is called with cancelRefetch=false if we have data already', async () => {
     const key = queryKey()
     let fetchCount = 0
@@ -1726,6 +1473,159 @@ describe('useQuery', () => {
     })
   })
 
+  it('should keep the previous data when placeholderData is set and select fn transform is used', async () => {
+    const key = queryKey()
+    const states: UseQueryResult<number>[] = []
+
+    function Page() {
+      const [count, setCount] = React.useState(0)
+
+      const state = useQuery({
+        queryKey: [key, count],
+        queryFn: async () => {
+          await sleep(10)
+          return {
+            count,
+          }
+        },
+        select(data) {
+          return data.count
+        },
+        placeholderData: keepPreviousData,
+      })
+
+      states.push(state)
+
+      return (
+        <div>
+          <div>data: {state.data}</div>
+          <button onClick={() => setCount(1)}>setCount</button>
+        </div>
+      )
+    }
+
+    const rendered = renderWithClient(queryClient, <Page />)
+
+    await waitFor(() => rendered.getByText('data: 0'))
+
+    fireEvent.click(rendered.getByRole('button', { name: 'setCount' }))
+
+    await waitFor(() => rendered.getByText('data: 1'))
+
+    // Initial
+    expect(states[0]).toMatchObject({
+      data: undefined,
+      isFetching: true,
+      isSuccess: false,
+      isPlaceholderData: false,
+    })
+    // Fetched
+    expect(states[1]).toMatchObject({
+      data: 0,
+      isFetching: false,
+      isSuccess: true,
+      isPlaceholderData: false,
+    })
+    // Set state
+    expect(states[2]).toMatchObject({
+      data: 0,
+      isFetching: true,
+      isSuccess: true,
+      isPlaceholderData: true,
+    })
+    // New data
+    expect(states[3]).toMatchObject({
+      data: 1,
+      isFetching: false,
+      isSuccess: true,
+      isPlaceholderData: false,
+    })
+  })
+
+  it('should show placeholderData between multiple pending queries when select fn transform is used', async () => {
+    const key = queryKey()
+    const states: UseQueryResult<number>[] = []
+
+    function Page() {
+      const [count, setCount] = React.useState(0)
+
+      const state = useQuery({
+        queryKey: [key, count],
+        queryFn: async () => {
+          await sleep(10)
+          return {
+            count,
+          }
+        },
+        select(data) {
+          return data.count
+        },
+        placeholderData: keepPreviousData,
+      })
+
+      states.push(state)
+
+      return (
+        <div>
+          <div>data: {state.data}</div>
+          <button onClick={() => setCount((prev) => prev + 1)}>setCount</button>
+        </div>
+      )
+    }
+
+    const rendered = renderWithClient(queryClient, <Page />)
+
+    await waitFor(() => rendered.getByText('data: 0'))
+
+    fireEvent.click(rendered.getByRole('button', { name: 'setCount' }))
+    fireEvent.click(rendered.getByRole('button', { name: 'setCount' }))
+    fireEvent.click(rendered.getByRole('button', { name: 'setCount' }))
+
+    await waitFor(() => rendered.getByText('data: 3'))
+    // Initial
+    expect(states[0]).toMatchObject({
+      data: undefined,
+      isFetching: true,
+      isSuccess: false,
+      isPlaceholderData: false,
+    })
+    // Fetched
+    expect(states[1]).toMatchObject({
+      data: 0,
+      isFetching: false,
+      isSuccess: true,
+      isPlaceholderData: false,
+    })
+    // Set state -> count = 1
+    expect(states[2]).toMatchObject({
+      data: 0,
+      isFetching: true,
+      isSuccess: true,
+      isPlaceholderData: true,
+    })
+    // Set state -> count = 2
+    expect(states[3]).toMatchObject({
+      data: 0,
+      isFetching: true,
+      isSuccess: true,
+      isPlaceholderData: true,
+    })
+    // Set state -> count = 3
+    expect(states[4]).toMatchObject({
+      data: 0,
+      isFetching: true,
+      isSuccess: true,
+      isPlaceholderData: true,
+    })
+    // New data
+    expect(states[5]).toMatchObject({
+      data: 3,
+      isFetching: false,
+      isSuccess: true,
+      isPlaceholderData: false,
+    })
+  })
+
   it('should transition to error state when placeholderData is set', async () => {
     const key = queryKey()
     const states: UseQueryResult<number>[] = []
@@ -2432,53 +2332,6 @@ describe('useQuery', () => {
     expect(renders).toBe(2)
   })
 
-  it('should batch re-renders including hook callbacks', async () => {
-    const key = queryKey()
-
-    let renders = 0
-    let callbackCount = 0
-
-    const queryFn = async () => {
-      await sleep(10)
-      return 'data'
-    }
-
-    function Page() {
-      const [count, setCount] = React.useState(0)
-      useQuery({
-        queryKey: key,
-        queryFn,
-        onSuccess: () => {
-          setCount((x) => x + 1)
-        },
-      })
-      useQuery({
-        queryKey: key,
-        queryFn,
-        onSuccess: () => {
-          setCount((x) => x + 1)
-        },
-      })
-
-      React.useEffect(() => {
-        renders++
-        callbackCount = count
-      })
-
-      return <div>count: {count}</div>
-    }
-
-    const rendered = renderWithClient(queryClient, <Page />)
-
-    await waitFor(() => rendered.getByText('count: 2'))
-
-    // Should be 3 instead of 5
-    expect(renders).toBe(3)
-
-    // Both callbacks should have been executed
-    expect(callbackCount).toBe(2)
-  })
-
   it('should render latest data even if react has discarded certain renders', async () => {
     const key = queryKey()
 
@@ -2584,7 +2437,7 @@ describe('useQuery', () => {
 
   it('should not refetch query on focus when `enabled` is set to `false`', async () => {
     const key = queryKey()
-    const queryFn = jest.fn<string, unknown[]>().mockReturnValue('data')
+    const queryFn = vi.fn<unknown[], string>().mockReturnValue('data')
 
     function Page() {
       const { data = 'default' } = useQuery({
@@ -2895,7 +2748,7 @@ describe('useQuery', () => {
   })
 
   it('should throw error if queryFn throws and throwErrors is in use', async () => {
-    const consoleMock = jest
+    const consoleMock = vi
       .spyOn(console, 'error')
       .mockImplementation(() => undefined)
     const key = queryKey()
@@ -2987,7 +2840,7 @@ describe('useQuery', () => {
   })
 
   it('should throw error instead of setting status when error should be thrown', async () => {
-    const consoleMock = jest
+    const consoleMock = vi
       .spyOn(console, 'error')
       .mockImplementation(() => undefined)
 
@@ -3355,7 +3208,7 @@ describe('useQuery', () => {
   it('should retry specified number of times', async () => {
     const key = queryKey()
 
-    const queryFn = jest.fn<unknown, unknown[]>()
+    const queryFn = vi.fn<unknown[], unknown>()
     queryFn.mockImplementation(() => {
       return Promise.reject(new Error('Error test Barrett'))
     })
@@ -3392,7 +3245,7 @@ describe('useQuery', () => {
   it('should not retry if retry function `false`', async () => {
     const key = queryKey()
 
-    const queryFn = jest.fn<unknown, unknown[]>()
+    const queryFn = vi.fn<unknown[], unknown>()
 
     queryFn.mockImplementationOnce(() => {
       return Promise.reject(new Error('Error test Tanner'))
@@ -3438,7 +3291,7 @@ describe('useQuery', () => {
 
     type DelayError = { delay: number }
 
-    const queryFn = jest.fn<unknown, unknown[]>()
+    const queryFn = vi.fn<unknown[], unknown>()
     queryFn.mockImplementation(() => {
       return Promise.reject({ delay: 50 })
     })
@@ -3631,10 +3484,10 @@ describe('useQuery', () => {
     const key = queryKey()
     const states: UseQueryResult<string>[] = []
 
-    const queryFn = jest.fn<string, unknown[]>()
+    const queryFn = vi.fn<unknown[], string>()
     queryFn.mockImplementation(() => 'data')
 
-    const prefetchQueryFn = jest.fn<string, unknown[]>()
+    const prefetchQueryFn = vi.fn<unknown[], string>()
     prefetchQueryFn.mockImplementation(() => 'not yet...')
 
     await queryClient.prefetchQuery({
@@ -3662,10 +3515,10 @@ describe('useQuery', () => {
   it('should not refetch if not stale after a prefetch', async () => {
     const key = queryKey()
 
-    const queryFn = jest.fn<string, unknown[]>()
+    const queryFn = vi.fn<unknown[], string>()
     queryFn.mockImplementation(() => 'data')
 
-    const prefetchQueryFn = jest.fn<Promise<string>, unknown[]>()
+    const prefetchQueryFn = vi.fn<unknown[], Promise<string>>()
     prefetchQueryFn.mockImplementation(async () => {
       await sleep(10)
       return 'not yet...'
@@ -3971,7 +3824,7 @@ describe('useQuery', () => {
 
   it('it should support enabled:false in query object syntax', async () => {
     const key = queryKey()
-    const queryFn = jest.fn<string, unknown[]>()
+    const queryFn = vi.fn<unknown[], string>()
     queryFn.mockImplementation(() => 'data')
 
     function Page() {
@@ -4030,15 +3883,11 @@ describe('useQuery', () => {
     const rendered = renderWithClient(queryClient, <Page />)
 
     await waitFor(() => rendered.getByText('fetched data'))
-    jest.useFakeTimers({
-      legacyFakeTimers: true,
-    })
-    const setTimeoutSpy = jest.spyOn(globalThis.window, 'setTimeout')
+    const setTimeoutSpy = vi.spyOn(globalThis.window, 'setTimeout')
 
     rendered.unmount()
 
     expect(setTimeoutSpy).not.toHaveBeenCalled()
-    jest.useRealTimers()
   })
 
   test('should schedule garbage collection, if gcTimeout is not set to infinity', async () => {
@@ -4057,10 +3906,7 @@ describe('useQuery', () => {
 
     await waitFor(() => rendered.getByText('fetched data'))
 
-    jest.useFakeTimers({
-      legacyFakeTimers: true,
-    })
-    const setTimeoutSpy = jest.spyOn(globalThis.window, 'setTimeout')
+    const setTimeoutSpy = vi.spyOn(globalThis.window, 'setTimeout')
 
     rendered.unmount()
 
@@ -4068,13 +3914,12 @@ describe('useQuery', () => {
       expect.any(Function),
       1000 * 60 * 10,
     )
-    jest.useRealTimers()
   })
 
   it('should not cause memo churn when data does not change', async () => {
     const key = queryKey()
-    const queryFn = jest.fn<string, unknown[]>().mockReturnValue('data')
-    const memoFn = jest.fn()
+    const queryFn = vi.fn<unknown[], string>().mockReturnValue('data')
+    const memoFn = vi.fn()
 
     function Page() {
       const result = useQuery({
@@ -4281,7 +4126,7 @@ describe('useQuery', () => {
   it('should refetch if any query instance becomes enabled', async () => {
     const key = queryKey()
 
-    const queryFn = jest.fn<string, unknown[]>().mockReturnValue('data')
+    const queryFn = vi.fn<unknown[], string>().mockReturnValue('data')
 
     function Disabled() {
       useQuery({ queryKey: key, queryFn, enabled: false })
@@ -4640,11 +4485,11 @@ describe('useQuery', () => {
 
   it('should cancel the query function when there are no more subscriptions', async () => {
     const key = queryKey()
-    let cancelFn: jest.Mock = jest.fn()
+    let cancelFn: Mock = vi.fn()
 
     const queryFn = ({ signal }: { signal?: AbortSignal }) => {
       const promise = new Promise<string>((resolve, reject) => {
-        cancelFn = jest.fn(() => reject('Cancelled'))
+        cancelFn = vi.fn(() => reject('Cancelled'))
         signal?.addEventListener('abort', cancelFn)
         sleep(20).then(() => resolve('OK'))
       })
@@ -4963,7 +4808,7 @@ describe('useQuery', () => {
   })
 
   it('should refetch when changed enabled to true in error state', async () => {
-    const queryFn = jest.fn<unknown, unknown[]>()
+    const queryFn = vi.fn<unknown[], unknown>()
     queryFn.mockImplementation(async () => {
       await sleep(10)
       return Promise.reject(new Error('Suspense Error Bingo'))
@@ -5979,36 +5824,6 @@ describe('useQuery', () => {
     })
   })
 
-  it('setQueryData - should not call onSuccess callback of active observers', async () => {
-    const key = queryKey()
-    const onSuccess = jest.fn()
-
-    function Page() {
-      const state = useQuery({
-        queryKey: key,
-        queryFn: () => 'data',
-        onSuccess,
-      })
-      return (
-        <div>
-          <div>data: {state.data}</div>
-          <button onClick={() => queryClient.setQueryData(key, 'newData')}>
-            setQueryData
-          </button>
-        </div>
-      )
-    }
-
-    const rendered = renderWithClient(queryClient, <Page />)
-
-    await waitFor(() => rendered.getByText('data: data'))
-    fireEvent.click(rendered.getByRole('button', { name: /setQueryData/i }))
-    await waitFor(() => rendered.getByText('data: newData'))
-
-    expect(onSuccess).toHaveBeenCalledTimes(1)
-    expect(onSuccess).toHaveBeenCalledWith('data')
-  })
-
   it('setQueryData - should respect updatedAt', async () => {
     const key = queryKey()