@tanstack/react-query 5.0.0-beta.9 → 5.0.0-rc.0

package/src/__tests__/useQuery.test.tsx

@@ -7,7 +7,6 @@ import { QueryCache, keepPreviousData, useQuery } from '..'
 import {
   Blink,
   createQueryClient,
-  expectType,
   mockOnlineManagerIsOnline,
   mockVisibilityState,
   queryKey,
@@ -35,29 +34,29 @@ describe('useQuery', () => {
     function Page() {
       // unspecified query function should default to unknown
       const noQueryFn = useQuery({ queryKey: key })
-      expectType<unknown>(noQueryFn.data)
-      expectType<unknown>(noQueryFn.error)
+      expectTypeOf<unknown>(noQueryFn.data)
+      expectTypeOf<unknown>(noQueryFn.error)
 
       // it should infer the result type from the query function
       const fromQueryFn = useQuery({ queryKey: key, queryFn: () => 'test' })
-      expectType<string | undefined>(fromQueryFn.data)
-      expectType<unknown>(fromQueryFn.error)
+      expectTypeOf<string | undefined>(fromQueryFn.data)
+      expectTypeOf<unknown>(fromQueryFn.error)
 
       // it should be possible to specify the result type
       const withResult = useQuery<string>({
         queryKey: key,
         queryFn: () => 'test',
       })
-      expectType<string | undefined>(withResult.data)
-      expectType<unknown | null>(withResult.error)
+      expectTypeOf<string | undefined>(withResult.data)
+      expectTypeOf<unknown | null>(withResult.error)
 
       // it should be possible to specify the error type
       const withError = useQuery<string, Error>({
         queryKey: key,
         queryFn: () => 'test',
       })
-      expectType<string | undefined>(withError.data)
-      expectType<Error | null>(withError.error)
+      expectTypeOf<string | undefined>(withError.data)
+      expectTypeOf<Error | null>(withError.error)
 
       // it should provide the result type in the configuration
       useQuery({
@@ -70,12 +69,12 @@ describe('useQuery', () => {
         queryKey: key,
         queryFn: () => (Math.random() > 0.5 ? 'a' : 'b'),
       })
-      expectType<'a' | 'b' | undefined>(unionTypeSync.data)
+      expectTypeOf<'a' | 'b' | undefined>(unionTypeSync.data)
       const unionTypeAsync = useQuery<'a' | 'b'>({
         queryKey: key,
         queryFn: () => Promise.resolve(Math.random() > 0.5 ? 'a' : 'b'),
       })
-      expectType<'a' | 'b' | undefined>(unionTypeAsync.data)
+      expectTypeOf<'a' | 'b' | undefined>(unionTypeAsync.data)
 
       // should error when the query function result does not match with the specified type
       // @ts-expect-error
@@ -90,15 +89,15 @@ describe('useQuery', () => {
         queryKey: key,
         queryFn: () => queryFn(),
       })
-      expectType<string | undefined>(fromGenericQueryFn.data)
-      expectType<unknown>(fromGenericQueryFn.error)
+      expectTypeOf<string | undefined>(fromGenericQueryFn.data)
+      expectTypeOf<unknown>(fromGenericQueryFn.error)
 
       const fromGenericOptionsQueryFn = useQuery({
         queryKey: key,
         queryFn: () => queryFn(),
       })
-      expectType<string | undefined>(fromGenericOptionsQueryFn.data)
-      expectType<unknown>(fromGenericOptionsQueryFn.error)
+      expectTypeOf<string | undefined>(fromGenericOptionsQueryFn.data)
+      expectTypeOf<unknown>(fromGenericOptionsQueryFn.error)
 
       type MyData = number
       type MyQueryKey = readonly ['my-data', number]
@@ -117,7 +116,7 @@ describe('useQuery', () => {
       const getMyDataStringKey: QueryFunction<MyData, ['1']> = async (
         context,
       ) => {
-        expectType<['1']>(context.queryKey)
+        expectTypeOf<['1']>(context.queryKey)
         return Number(context.queryKey[0]) + 42
       }
 
@@ -156,7 +155,7 @@ describe('useQuery', () => {
           ...options,
         })
       const test = useWrappedQuery([''], async () => '1')
-      expectType<string | undefined>(test.data)
+      expectTypeOf<string | undefined>(test.data)
 
       // handles wrapped queries with custom fetcher passed directly to useQuery
       const useWrappedFuncStyleQuery = <
@@ -173,7 +172,7 @@ describe('useQuery', () => {
         >,
       ) => useQuery({ queryKey: qk, queryFn: fetcher, ...options })
       const testFuncStyle = useWrappedFuncStyleQuery([''], async () => true)
-      expectType<boolean | undefined>(testFuncStyle.data)
+      expectTypeOf<boolean | undefined>(testFuncStyle.data)
     }
   })
 
@@ -206,7 +205,7 @@ describe('useQuery', () => {
 
   it('should return the correct states for a successful query', async () => {
     const key = queryKey()
-    const states: UseQueryResult<string>[] = []
+    const states: Array<UseQueryResult<string>> = []
 
     function Page() {
       const state = useQuery<string, Error>({
@@ -220,19 +219,19 @@ describe('useQuery', () => {
       states.push(state)
 
       if (state.isPending) {
-        expectType<undefined>(state.data)
-        expectType<null>(state.error)
+        expectTypeOf<undefined>(state.data)
+        expectTypeOf<null>(state.error)
         return <span>pending</span>
       }
 
       if (state.isLoadingError) {
-        expectType<undefined>(state.data)
-        expectType<Error>(state.error)
+        expectTypeOf<undefined>(state.data)
+        expectTypeOf<Error>(state.error)
         return <span>{state.error.message}</span>
       }
 
-      expectType<string>(state.data)
-      expectType<Error | null>(state.error)
+      expectTypeOf<string>(state.data)
+      expectTypeOf<Error | null>(state.error)
       return <span>{state.data}</span>
     }
 
@@ -300,7 +299,7 @@ describe('useQuery', () => {
   it('should return the correct states for an unsuccessful query', async () => {
     const key = queryKey()
 
-    const states: UseQueryResult[] = []
+    const states: Array<UseQueryResult> = []
 
     function Page() {
       const state = useQuery({
@@ -549,7 +548,7 @@ describe('useQuery', () => {
 
   it('should be able to watch a query without providing a query function', async () => {
     const key = queryKey()
-    const states: UseQueryResult<string>[] = []
+    const states: Array<UseQueryResult<string>> = []
 
     queryClient.setQueryDefaults(key, { queryFn: () => 'data' })
 
@@ -570,7 +569,7 @@ describe('useQuery', () => {
 
   it('should pick up a query when re-mounting with gcTime 0', async () => {
     const key = queryKey()
-    const states: UseQueryResult<string>[] = []
+    const states: Array<UseQueryResult<string>> = []
 
     function Page() {
       const [toggle, setToggle] = React.useState(false)
@@ -643,7 +642,7 @@ describe('useQuery', () => {
 
   it('should not get into an infinite loop when removing a query with gcTime 0 and rerendering', async () => {
     const key = queryKey()
-    const states: UseQueryResult<string>[] = []
+    const states: Array<UseQueryResult<string>> = []
 
     function Page() {
       const [, rerender] = React.useState({})
@@ -705,7 +704,7 @@ describe('useQuery', () => {
 
   it('should fetch when refetchOnMount is false and nothing has been fetched yet', async () => {
     const key = queryKey()
-    const states: UseQueryResult<string>[] = []
+    const states: Array<UseQueryResult<string>> = []
 
     function Page() {
       const state = useQuery({
@@ -728,7 +727,7 @@ describe('useQuery', () => {
 
   it('should not fetch when refetchOnMount is false and data has been fetched already', async () => {
     const key = queryKey()
-    const states: UseQueryResult<string>[] = []
+    const states: Array<UseQueryResult<string>> = []
 
     queryClient.setQueryData(key, 'prefetched')
 
@@ -752,7 +751,7 @@ describe('useQuery', () => {
 
   it('should be able to select a part of the data with select', async () => {
     const key = queryKey()
-    const states: UseQueryResult<string>[] = []
+    const states: Array<UseQueryResult<string>> = []
 
     function Page() {
       const state = useQuery({
@@ -778,7 +777,7 @@ describe('useQuery', () => {
 
   it('should be able to select a part of the data with select in object syntax', async () => {
     const key = queryKey()
-    const states: UseQueryResult<string>[] = []
+    const states: Array<UseQueryResult<string>> = []
 
     function Page() {
       const state = useQuery({
@@ -804,7 +803,7 @@ describe('useQuery', () => {
 
   it('should throw an error when a selector throws', async () => {
     const key = queryKey()
-    const states: UseQueryResult<string>[] = []
+    const states: Array<UseQueryResult<string>> = []
     const error = new Error('Select Error')
 
     function Page() {
@@ -871,7 +870,7 @@ describe('useQuery', () => {
 
   it('should track properties and only re-render when a tracked property changes', async () => {
     const key = queryKey()
-    const states: UseQueryResult<string>[] = []
+    const states: Array<UseQueryResult<string>> = []
 
     function Page() {
       const state = useQuery({
@@ -913,7 +912,7 @@ describe('useQuery', () => {
   it('should always re-render if we are tracking props but not using any', async () => {
     const key = queryKey()
     let renderCount = 0
-    const states: UseQueryResult<string>[] = []
+    const states: Array<UseQueryResult<string>> = []
 
     function Page() {
       const state = useQuery({ queryKey: key, queryFn: () => 'test' })
@@ -948,7 +947,7 @@ describe('useQuery', () => {
 
   it('should be able to remove a query', async () => {
     const key = queryKey()
-    const states: UseQueryResult<number>[] = []
+    const states: Array<UseQueryResult<number>> = []
     let count = 0
 
     function Page() {
@@ -994,7 +993,7 @@ describe('useQuery', () => {
 
   it('should create a new query when refetching a removed query', async () => {
     const key = queryKey()
-    const states: UseQueryResult<number>[] = []
+    const states: Array<UseQueryResult<number>> = []
     let count = 0
 
     function Page() {
@@ -1055,7 +1054,7 @@ describe('useQuery', () => {
       { id: '2', done: true },
     ]
 
-    const states: UseQueryResult<typeof result1>[] = []
+    const states: Array<UseQueryResult<typeof result1>> = []
 
     let count = 0
 
@@ -1110,7 +1109,7 @@ describe('useQuery', () => {
 
   it('should use query function from hook when the existing query does not have a query function', async () => {
     const key = queryKey()
-    const results: DefinedUseQueryResult<string>[] = []
+    const results: Array<DefinedUseQueryResult<string>> = []
 
     queryClient.setQueryData(key, 'set')
 
@@ -1154,7 +1153,6 @@ describe('useQuery', () => {
 
   it('should update query stale state and refetch when invalidated with invalidateQueries', async () => {
     const key = queryKey()
-    const states: UseQueryResult<number>[] = []
     let count = 0
 
     function Page() {
@@ -1166,11 +1164,8 @@ describe('useQuery', () => {
           return count
         },
         staleTime: Infinity,
-        notifyOnChangeProps: 'all',
       })
 
-      states.push(state)
-
       return (
         <div>
           <button
@@ -1178,52 +1173,29 @@ describe('useQuery', () => {
           >
             invalidate
           </button>
-          data: {state.data}
+          data: {state.data}, isStale: {String(state.isStale)}, isFetching:{' '}
+          {String(state.isFetching)}
         </div>
       )
     }
 
     const rendered = renderWithClient(queryClient, <Page />)
 
-    await waitFor(() => rendered.getByText('data: 1'))
+    await waitFor(() =>
+      rendered.getByText('data: 1, isStale: false, isFetching: false'),
+    )
     fireEvent.click(rendered.getByRole('button', { name: /invalidate/i }))
-    await waitFor(() => rendered.getByText('data: 2'))
-
-    await waitFor(() => expect(states.length).toBe(4))
-
-    expect(states[0]).toMatchObject({
-      data: undefined,
-      isFetching: true,
-      isRefetching: false,
-      isSuccess: false,
-      isStale: true,
-    })
-    expect(states[1]).toMatchObject({
-      data: 1,
-      isFetching: false,
-      isRefetching: false,
-      isSuccess: true,
-      isStale: false,
-    })
-    expect(states[2]).toMatchObject({
-      data: 1,
-      isFetching: true,
-      isRefetching: true,
-      isSuccess: true,
-      isStale: true,
-    })
-    expect(states[3]).toMatchObject({
-      data: 2,
-      isFetching: false,
-      isRefetching: false,
-      isSuccess: true,
-      isStale: false,
-    })
+    await waitFor(() =>
+      rendered.getByText('data: 1, isStale: true, isFetching: true'),
+    )
+    await waitFor(() =>
+      rendered.getByText('data: 2, isStale: false, isFetching: false'),
+    )
   })
 
   it('should not update disabled query when refetched with refetchQueries', async () => {
     const key = queryKey()
-    const states: UseQueryResult<number>[] = []
+    const states: Array<UseQueryResult<number>> = []
     let count = 0
 
     function Page() {
@@ -1263,7 +1235,7 @@ describe('useQuery', () => {
 
   it('should not refetch disabled query when invalidated with invalidateQueries', async () => {
     const key = queryKey()
-    const states: UseQueryResult<number>[] = []
+    const states: Array<UseQueryResult<number>> = []
     let count = 0
 
     function Page() {
@@ -1303,7 +1275,7 @@ describe('useQuery', () => {
 
   it('should not fetch when switching to a disabled query', async () => {
     const key = queryKey()
-    const states: UseQueryResult<number>[] = []
+    const states: Array<UseQueryResult<number>> = []
 
     function Page() {
       const [count, setCount] = React.useState(0)
@@ -1366,7 +1338,7 @@ describe('useQuery', () => {
 
   it('should keep the previous data when placeholderData is set', async () => {
     const key = queryKey()
-    const states: UseQueryResult<number>[] = []
+    const states: Array<UseQueryResult<number>> = []
 
     function Page() {
       const [count, setCount] = React.useState(0)
@@ -1430,7 +1402,7 @@ 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>[] = []
+    const states: Array<UseQueryResult<number>> = []
 
     function Page() {
       const [count, setCount] = React.useState(0)
@@ -1498,9 +1470,9 @@ describe('useQuery', () => {
   })
 
   it('should keep the previous queryKey (from prevQuery) between multiple pending queries when placeholderData is set and select fn transform is used', async () => {
-    const keys: Array<readonly unknown[] | null> = []
+    const keys: Array<ReadonlyArray<unknown> | null> = []
     const key = queryKey()
-    const states: UseQueryResult<number>[] = []
+    const states: Array<UseQueryResult<number>> = []
 
     function Page() {
       const [count, setCount] = React.useState(0)
@@ -1553,7 +1525,7 @@ describe('useQuery', () => {
 
   it('should show placeholderData between multiple pending queries when select fn transform is used', async () => {
     const key = queryKey()
-    const states: UseQueryResult<number>[] = []
+    const states: Array<UseQueryResult<number>> = []
 
     function Page() {
       const [count, setCount] = React.useState(0)
@@ -1637,7 +1609,7 @@ describe('useQuery', () => {
 
   it('should transition to error state when placeholderData is set', async () => {
     const key = queryKey()
-    const states: UseQueryResult<number>[] = []
+    const states: Array<UseQueryResult<number>> = []
 
     function Page({ count }: { count: number }) {
       const state = useQuery<number, Error>({
@@ -1724,7 +1696,7 @@ describe('useQuery', () => {
 
   it('should not show initial data from next query if placeholderData is set', async () => {
     const key = queryKey()
-    const states: DefinedUseQueryResult<number>[] = []
+    const states: Array<DefinedUseQueryResult<number>> = []
 
     function Page() {
       const [count, setCount] = React.useState(0)
@@ -1798,7 +1770,7 @@ describe('useQuery', () => {
 
   it('should keep the previous data on disabled query when placeholderData is set', async () => {
     const key = queryKey()
-    const states: UseQueryResult<number>[] = []
+    const states: Array<UseQueryResult<number>> = []
 
     function Page() {
       const [count, setCount] = React.useState(0)
@@ -1900,7 +1872,7 @@ describe('useQuery', () => {
 
   it('should keep the previous data on disabled query when placeholderData is set and switching query key multiple times', async () => {
     const key = queryKey()
-    const states: UseQueryResult<number>[] = []
+    const states: Array<UseQueryResult<number>> = []
 
     queryClient.setQueryData([key, 10], 10)
 
@@ -1984,7 +1956,7 @@ describe('useQuery', () => {
 
   it('should use the correct query function when components use different configurations', async () => {
     const key = queryKey()
-    const states: UseQueryResult<number>[] = []
+    const states: Array<UseQueryResult<number>> = []
 
     function FirstComponent() {
       const state = useQuery({
@@ -2045,8 +2017,8 @@ describe('useQuery', () => {
 
   it('should be able to set different stale times for a query', async () => {
     const key = queryKey()
-    const states1: UseQueryResult<string>[] = []
-    const states2: UseQueryResult<string>[] = []
+    const states1: Array<UseQueryResult<string>> = []
+    const states2: Array<UseQueryResult<string>> = []
 
     await queryClient.prefetchQuery({
       queryKey: key,
@@ -2146,7 +2118,7 @@ describe('useQuery', () => {
 
   it('should re-render when a query becomes stale', async () => {
     const key = queryKey()
-    const states: UseQueryResult<string>[] = []
+    const states: Array<UseQueryResult<string>> = []
 
     function Page() {
       const state = useQuery({
@@ -2171,7 +2143,7 @@ describe('useQuery', () => {
   describe('notifyOnChangeProps', () => {
     it('should not re-render when it should only re-render only data change and the selected data did not change', async () => {
       const key = queryKey()
-      const states: UseQueryResult<string>[] = []
+      const states: Array<UseQueryResult<string>> = []
 
       function Page() {
         const state = useQuery({
@@ -2212,7 +2184,7 @@ describe('useQuery', () => {
     })
     it('should not re-render when it should only re-render on data changes and the data did not change', async () => {
       const key = queryKey()
-      const states: UseQueryResult<string>[] = []
+      const states: Array<UseQueryResult<string>> = []
 
       function Page() {
         const state = useQuery({
@@ -2270,7 +2242,7 @@ describe('useQuery', () => {
     describe('function', () => {
       it('should not re-render when it should only re-render on data changes and the data did not change', async () => {
         const key = queryKey()
-        const states: UseQueryResult<string>[] = []
+        const states: Array<UseQueryResult<string>> = []
 
         function Page() {
           const state = useQuery({
@@ -2325,7 +2297,7 @@ describe('useQuery', () => {
 
       it('should not re-render when change props are not actively being tracked', async () => {
         const key = queryKey()
-        const states: UseQueryResult<string>[] = []
+        const states: Array<UseQueryResult<string>> = []
 
         function Page() {
           const fetchCounterRef = React.useRef(0)
@@ -2410,6 +2382,9 @@ describe('useQuery', () => {
         )
         fireEvent.click(rendered.getByRole('button', { name: 'refetch' }))
 
+        await waitFor(() => {
+          rendered.getByText('fetch counter: 3')
+        })
         // sleep is required to make sure no additional renders happen after click
         await sleep(20)
 
@@ -2600,7 +2575,7 @@ describe('useQuery', () => {
 
   it('should not refetch query on focus when `enabled` is set to `false`', async () => {
     const key = queryKey()
-    const queryFn = vi.fn<unknown[], string>().mockReturnValue('data')
+    const queryFn = vi.fn<Array<unknown>, string>().mockReturnValue('data')
 
     function Page() {
       const { data = 'default' } = useQuery({
@@ -2629,7 +2604,7 @@ describe('useQuery', () => {
 
   it('should not refetch stale query on focus when `refetchOnWindowFocus` is set to `false`', async () => {
     const key = queryKey()
-    const states: UseQueryResult<number>[] = []
+    const states: Array<UseQueryResult<number>> = []
     let count = 0
 
     function Page() {
@@ -2660,7 +2635,7 @@ describe('useQuery', () => {
 
   it('should not refetch stale query on focus when `refetchOnWindowFocus` is set to a function that returns `false`', async () => {
     const key = queryKey()
-    const states: UseQueryResult<number>[] = []
+    const states: Array<UseQueryResult<number>> = []
     let count = 0
 
     function Page() {
@@ -2691,7 +2666,7 @@ describe('useQuery', () => {
 
   it('should not refetch fresh query on focus when `refetchOnWindowFocus` is set to `true`', async () => {
     const key = queryKey()
-    const states: UseQueryResult<number>[] = []
+    const states: Array<UseQueryResult<number>> = []
     let count = 0
 
     function Page() {
@@ -2722,7 +2697,7 @@ describe('useQuery', () => {
 
   it('should refetch fresh query on focus when `refetchOnWindowFocus` is set to `always`', async () => {
     const key = queryKey()
-    const states: UseQueryResult<number>[] = []
+    const states: Array<UseQueryResult<number>> = []
     let count = 0
 
     function Page() {
@@ -2759,7 +2734,7 @@ describe('useQuery', () => {
 
   it('should calculate focus behaviour for `refetchOnWindowFocus` depending on function', async () => {
     const key = queryKey()
-    const states: UseQueryResult<number>[] = []
+    const states: Array<UseQueryResult<number>> = []
     let count = 0
 
     function Page() {
@@ -2810,7 +2785,7 @@ describe('useQuery', () => {
 
   it('should refetch fresh query when refetchOnMount is set to always', async () => {
     const key = queryKey()
-    const states: UseQueryResult<string>[] = []
+    const states: Array<UseQueryResult<string>> = []
 
     await queryClient.prefetchQuery({
       queryKey: key,
@@ -2847,7 +2822,7 @@ describe('useQuery', () => {
 
   it('should refetch stale query when refetchOnMount is set to true', async () => {
     const key = queryKey()
-    const states: UseQueryResult<string>[] = []
+    const states: Array<UseQueryResult<string>> = []
 
     await queryClient.prefetchQuery({
       queryKey: key,
@@ -2885,6 +2860,9 @@ describe('useQuery', () => {
   })
 
   it('should set status to error if queryFn throws', async () => {
+    const consoleMock = vi
+      .spyOn(console, 'error')
+      .mockImplementation(() => undefined)
     const key = queryKey()
 
     function Page() {
@@ -2908,6 +2886,8 @@ describe('useQuery', () => {
 
     await waitFor(() => rendered.getByText('error'))
     await waitFor(() => rendered.getByText('Error test jaylen'))
+
+    consoleMock.mockRestore()
   })
 
   it('should throw error if queryFn throws and throwOnError is in use', async () => {
@@ -3151,7 +3131,7 @@ describe('useQuery', () => {
 
   it('should always fetch if refetchOnMount is set to always', async () => {
     const key = queryKey()
-    const states: UseQueryResult<string>[] = []
+    const states: Array<UseQueryResult<string>> = []
 
     await queryClient.prefetchQuery({
       queryKey: key,
@@ -3199,7 +3179,7 @@ describe('useQuery', () => {
 
   it('should fetch if initial data is set', async () => {
     const key = queryKey()
-    const states: DefinedUseQueryResult<string>[] = []
+    const states: Array<DefinedUseQueryResult<string>> = []
 
     function Page() {
       const state = useQuery({
@@ -3231,7 +3211,7 @@ describe('useQuery', () => {
 
   it('should not fetch if initial data is set with a stale time', async () => {
     const key = queryKey()
-    const states: DefinedUseQueryResult<string>[] = []
+    const states: Array<DefinedUseQueryResult<string>> = []
 
     function Page() {
       const state = useQuery({
@@ -3263,7 +3243,7 @@ describe('useQuery', () => {
 
   it('should fetch if initial data updated at is older than stale time', async () => {
     const key = queryKey()
-    const states: DefinedUseQueryResult<string>[] = []
+    const states: Array<DefinedUseQueryResult<string>> = []
 
     const oneSecondAgo = Date.now() - 1000
 
@@ -3303,7 +3283,7 @@ describe('useQuery', () => {
 
   it('should fetch if "initial data updated at" is exactly 0', async () => {
     const key = queryKey()
-    const states: DefinedUseQueryResult<string>[] = []
+    const states: Array<DefinedUseQueryResult<string>> = []
 
     function Page() {
       const state = useQuery({
@@ -3336,7 +3316,7 @@ describe('useQuery', () => {
 
   it('should keep initial data when the query key changes', async () => {
     const key = queryKey()
-    const states: DefinedUseQueryResult<{ count: number }>[] = []
+    const states: Array<DefinedUseQueryResult<{ count: number }>> = []
 
     function Page() {
       const [count, setCount] = React.useState(0)
@@ -3371,7 +3351,7 @@ describe('useQuery', () => {
   it('should retry specified number of times', async () => {
     const key = queryKey()
 
-    const queryFn = vi.fn<unknown[], unknown>()
+    const queryFn = vi.fn<Array<unknown>, unknown>()
     queryFn.mockImplementation(() => {
       return Promise.reject(new Error('Error test Barrett'))
     })
@@ -3408,7 +3388,7 @@ describe('useQuery', () => {
   it('should not retry if retry function `false`', async () => {
     const key = queryKey()
 
-    const queryFn = vi.fn<unknown[], unknown>()
+    const queryFn = vi.fn<Array<unknown>, unknown>()
 
     queryFn.mockImplementationOnce(() => {
       return Promise.reject(new Error('Error test Tanner'))
@@ -3454,7 +3434,7 @@ describe('useQuery', () => {
 
     type DelayError = { delay: number }
 
-    const queryFn = vi.fn<unknown[], unknown>()
+    const queryFn = vi.fn<Array<unknown>, unknown>()
     queryFn.mockImplementation(() => {
       return Promise.reject({ delay: 50 })
     })
@@ -3551,7 +3531,7 @@ describe('useQuery', () => {
 
   it('should fetch on mount when a query was already created with setQueryData', async () => {
     const key = queryKey()
-    const states: UseQueryResult<string>[] = []
+    const states: Array<UseQueryResult<string>> = []
 
     queryClient.setQueryData(key, 'prefetched')
 
@@ -3582,7 +3562,7 @@ describe('useQuery', () => {
 
   it('should refetch after focus regain', async () => {
     const key = queryKey()
-    const states: UseQueryResult<string>[] = []
+    const states: Array<UseQueryResult<string>> = []
 
     // make page unfocused
     const visibilityMock = mockVisibilityState('hidden')
@@ -3645,12 +3625,12 @@ describe('useQuery', () => {
   // See https://github.com/tannerlinsley/react-query/issues/195
   it('should refetch if stale after a prefetch', async () => {
     const key = queryKey()
-    const states: UseQueryResult<string>[] = []
+    const states: Array<UseQueryResult<string>> = []
 
-    const queryFn = vi.fn<unknown[], string>()
+    const queryFn = vi.fn<Array<unknown>, string>()
     queryFn.mockImplementation(() => 'data')
 
-    const prefetchQueryFn = vi.fn<unknown[], string>()
+    const prefetchQueryFn = vi.fn<Array<unknown>, string>()
     prefetchQueryFn.mockImplementation(() => 'not yet...')
 
     await queryClient.prefetchQuery({
@@ -3678,10 +3658,10 @@ describe('useQuery', () => {
   it('should not refetch if not stale after a prefetch', async () => {
     const key = queryKey()
 
-    const queryFn = vi.fn<unknown[], string>()
+    const queryFn = vi.fn<Array<unknown>, string>()
     queryFn.mockImplementation(() => 'data')
 
-    const prefetchQueryFn = vi.fn<unknown[], Promise<string>>()
+    const prefetchQueryFn = vi.fn<Array<unknown>, Promise<string>>()
     prefetchQueryFn.mockImplementation(async () => {
       await sleep(10)
       return 'not yet...'
@@ -3833,7 +3813,7 @@ describe('useQuery', () => {
 
   it('should mark query as fetching, when using initialData', async () => {
     const key = queryKey()
-    const results: DefinedUseQueryResult<string>[] = []
+    const results: Array<DefinedUseQueryResult<string>> = []
 
     function Page() {
       const result = useQuery({
@@ -3860,7 +3840,7 @@ describe('useQuery', () => {
 
   it('should initialize state properly, when initialData is falsy', async () => {
     const key = queryKey()
-    const results: DefinedUseQueryResult<number>[] = []
+    const results: Array<DefinedUseQueryResult<number>> = []
 
     function Page() {
       const result = useQuery({
@@ -3937,7 +3917,7 @@ describe('useQuery', () => {
   // // See https://github.com/tannerlinsley/react-query/issues/214
   it('data should persist when enabled is changed to false', async () => {
     const key = queryKey()
-    const results: DefinedUseQueryResult<string>[] = []
+    const results: Array<DefinedUseQueryResult<string>> = []
 
     function Page() {
       const [shouldFetch, setShouldFetch] = React.useState(true)
@@ -3988,7 +3968,7 @@ describe('useQuery', () => {
 
   it('it should support enabled:false in query object syntax', async () => {
     const key = queryKey()
-    const queryFn = vi.fn<unknown[], string>()
+    const queryFn = vi.fn<Array<unknown>, string>()
     queryFn.mockImplementation(() => 'data')
 
     function Page() {
@@ -4082,7 +4062,7 @@ describe('useQuery', () => {
 
   it('should not cause memo churn when data does not change', async () => {
     const key = queryKey()
-    const queryFn = vi.fn<unknown[], string>().mockReturnValue('data')
+    const queryFn = vi.fn<Array<unknown>, string>().mockReturnValue('data')
     const memoFn = vi.fn()
 
     function Page() {
@@ -4157,7 +4137,7 @@ describe('useQuery', () => {
   it('should refetch in an interval depending on function result', async () => {
     const key = queryKey()
     let count = 0
-    const states: UseQueryResult<number>[] = []
+    const states: Array<UseQueryResult<number>> = []
 
     function Page() {
       const queryInfo = useQuery({
@@ -4223,7 +4203,7 @@ describe('useQuery', () => {
 
   it('should not interval fetch with a refetchInterval of 0', async () => {
     const key = queryKey()
-    const states: UseQueryResult<number>[] = []
+    const states: Array<UseQueryResult<number>> = []
 
     function Page() {
       const queryInfo = useQuery({
@@ -4290,7 +4270,7 @@ describe('useQuery', () => {
   it('should refetch if any query instance becomes enabled', async () => {
     const key = queryKey()
 
-    const queryFn = vi.fn<unknown[], string>().mockReturnValue('data')
+    const queryFn = vi.fn<Array<unknown>, string>().mockReturnValue('data')
 
     function Disabled() {
       useQuery({ queryKey: key, queryFn, enabled: false })
@@ -4319,7 +4299,7 @@ describe('useQuery', () => {
   it('should use placeholder data while the query loads', async () => {
     const key1 = queryKey()
 
-    const states: UseQueryResult<string>[] = []
+    const states: Array<UseQueryResult<string>> = []
 
     function Page() {
       const state = useQuery({
@@ -4358,7 +4338,7 @@ describe('useQuery', () => {
   it('should use placeholder data even for disabled queries', async () => {
     const key1 = queryKey()
 
-    const states: { state: UseQueryResult<string>; count: number }[] = []
+    const states: Array<{ state: UseQueryResult<string>; count: number }> = []
 
     function Page() {
       const [count, setCount] = React.useState(0)
@@ -4418,7 +4398,7 @@ describe('useQuery', () => {
   it('placeholder data should run through select', async () => {
     const key1 = queryKey()
 
-    const states: UseQueryResult<string>[] = []
+    const states: Array<UseQueryResult<string>> = []
 
     function Page() {
       const state = useQuery({
@@ -4458,7 +4438,7 @@ describe('useQuery', () => {
   it('placeholder data function result should run through select', async () => {
     const key1 = queryKey()
 
-    const states: UseQueryResult<string>[] = []
+    const states: Array<UseQueryResult<string>> = []
     let placeholderFunctionRunCount = 0
 
     function Page() {
@@ -4684,7 +4664,7 @@ describe('useQuery', () => {
 
   it('should cancel the query if the signal was consumed and there are no more subscriptions', async () => {
     const key = queryKey()
-    const states: UseQueryResult<string>[] = []
+    const states: Array<UseQueryResult<string>> = []
 
     const queryFn: QueryFunction<string, [typeof key, number]> = async (
       ctx,
@@ -4749,7 +4729,7 @@ describe('useQuery', () => {
 
   it('should refetch when quickly switching to a failed query', async () => {
     const key = queryKey()
-    const states: UseQueryResult<string>[] = []
+    const states: Array<UseQueryResult<string>> = []
 
     const queryFn = async () => {
       await sleep(50)
@@ -4800,7 +4780,7 @@ describe('useQuery', () => {
 
   it('should update query state and refetch when reset with resetQueries', async () => {
     const key = queryKey()
-    const states: UseQueryResult<number>[] = []
+    const states: Array<UseQueryResult<number>> = []
     let count = 0
 
     function Page() {
@@ -4870,7 +4850,7 @@ describe('useQuery', () => {
 
   it('should update query state and not refetch when resetting a disabled query with resetQueries', async () => {
     const key = queryKey()
-    const states: UseQueryResult<number>[] = []
+    const states: Array<UseQueryResult<number>> = []
     let count = 0
 
     function Page() {
@@ -4972,7 +4952,7 @@ describe('useQuery', () => {
   })
 
   it('should refetch when changed enabled to true in error state', async () => {
-    const queryFn = vi.fn<unknown[], unknown>()
+    const queryFn = vi.fn<Array<unknown>, unknown>()
     queryFn.mockImplementation(async () => {
       await sleep(10)
       return Promise.reject(new Error('Suspense Error Bingo'))
@@ -5144,7 +5124,7 @@ describe('useQuery', () => {
 
   it('should have no error in pending state when refetching after error occurred', async () => {
     const key = queryKey()
-    const states: UseQueryResult<number>[] = []
+    const states: Array<UseQueryResult<number>> = []
     const error = new Error('oops')
 
     let count = 0
@@ -5954,7 +5934,7 @@ describe('useQuery', () => {
 
   it('it should have status=error on mount when a query has failed', async () => {
     const key = queryKey()
-    const states: UseQueryResult<unknown>[] = []
+    const states: Array<UseQueryResult<unknown>> = []
     const error = new Error('oops')
 
     const queryFn = async (): Promise<unknown> => {
@@ -6225,4 +6205,25 @@ describe('useQuery', () => {
     await waitFor(() => rendered.getByText('Rendered Id: 2'))
     expect(spy).toHaveBeenCalledTimes(1)
   })
+  it('should not cause an infinite render loop when using unstable callback ref', async () => {
+    const key = queryKey()
+
+    function Test() {
+      const [_, setRef] = React.useState<HTMLDivElement | null>()
+
+      const { data } = useQuery({
+        queryKey: [key],
+        queryFn: async () => {
+          await sleep(5)
+          return 'Works'
+        },
+      })
+
+      return <div ref={(value) => setRef(value)}>{data}</div>
+    }
+
+    const rendered = renderWithClient(queryClient, <Test />)
+
+    await waitFor(() => rendered.getByText('Works'))
+  })
 })