@tanstack/react-query 4.24.9 → 5.0.0-alpha.0

package/src/__tests__/useQuery.test.tsx

@@ -1,11 +1,10 @@
-import { act, fireEvent, waitFor } from '@testing-library/react'
+import { act, fireEvent, render, waitFor } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import * as React from 'react'
 import {
   Blink,
   createQueryClient,
   expectType,
-  mockLogger,
   mockNavigatorOnLine,
   mockVisibilityState,
   queryKey,
@@ -20,7 +19,7 @@ import type {
   UseQueryOptions,
   UseQueryResult,
 } from '..'
-import { QueryCache, useQuery } from '..'
+import { QueryCache, useQuery, keepPreviousData } from '..'
 import { ErrorBoundary } from 'react-error-boundary'
 
 describe('useQuery', () => {
@@ -34,59 +33,68 @@ describe('useQuery', () => {
     // eslint-disable-next-line
     function Page() {
       // unspecified query function should default to unknown
-      const noQueryFn = useQuery(key)
+      const noQueryFn = useQuery({ queryKey: key })
       expectType<unknown>(noQueryFn.data)
       expectType<unknown>(noQueryFn.error)
 
       // it should infer the result type from the query function
-      const fromQueryFn = useQuery(key, () => 'test')
+      const fromQueryFn = useQuery({ queryKey: key, queryFn: () => 'test' })
       expectType<string | undefined>(fromQueryFn.data)
       expectType<unknown>(fromQueryFn.error)
 
       // it should be possible to specify the result type
-      const withResult = useQuery<string>(key, () => 'test')
+      const withResult = useQuery<string>({
+        queryKey: key,
+        queryFn: () => 'test',
+      })
       expectType<string | undefined>(withResult.data)
       expectType<unknown | null>(withResult.error)
 
       // it should be possible to specify the error type
-      const withError = useQuery<string, Error>(key, () => 'test')
+      const withError = useQuery<string, Error>({
+        queryKey: key,
+        queryFn: () => 'test',
+      })
       expectType<string | undefined>(withError.data)
       expectType<Error | null>(withError.error)
 
       // it should provide the result type in the configuration
-      useQuery([key], async () => true, {
+      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(
-        key,
-        () => (Math.random() > 0.5 ? 'a' : 'b'),
-        {
-          onSuccess: (data) => expectType<'a' | 'b'>(data),
-        },
-      )
+      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'>(
-        key,
-        () => Promise.resolve(Math.random() > 0.5 ? 'a' : 'b'),
-        {
-          onSuccess: (data) => expectType<'a' | 'b'>(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)
 
       // should error when the query function result does not match with the specified type
       // @ts-expect-error
-      useQuery<number>(key, () => 'test')
+      useQuery<number>({ queryKey: key, queryFn: () => 'test' })
 
       // it should infer the result type from a generic query function
       function queryFn<T = string>(): Promise<T> {
         return Promise.resolve({} as T)
       }
 
-      const fromGenericQueryFn = useQuery(key, () => queryFn())
+      const fromGenericQueryFn = useQuery({
+        queryKey: key,
+        queryFn: () => queryFn(),
+      })
       expectType<string | undefined>(fromGenericQueryFn.data)
       expectType<unknown>(fromGenericQueryFn.error)
 
@@ -124,9 +132,10 @@ describe('useQuery', () => {
       })
 
       // it should handle query-functions that return Promise<any>
-      useQuery(key, () =>
-        fetch('return Promise<any>').then((resp) => resp.json()),
-      )
+      useQuery({
+        queryKey: key,
+        queryFn: () => fetch('return Promise<any>').then((resp) => resp.json()),
+      })
 
       // handles wrapped queries with custom fetcher passed as inline queryFn
       const useWrappedQuery = <
@@ -145,7 +154,12 @@ describe('useQuery', () => {
           UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
           'queryKey' | 'queryFn' | 'initialData'
         >,
-      ) => useQuery(qk, () => fetcher(qk[1], 'token'), options)
+      ) =>
+        useQuery({
+          queryKey: qk,
+          queryFn: () => fetcher(qk[1], 'token'),
+          ...options,
+        })
       const test = useWrappedQuery([''], async () => '1')
       expectType<string | undefined>(test.data)
 
@@ -162,7 +176,7 @@ describe('useQuery', () => {
           UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
           'queryKey' | 'queryFn' | 'initialData'
         >,
-      ) => useQuery(qk, fetcher, options)
+      ) => useQuery({ queryKey: qk, queryFn: fetcher, ...options })
       const testFuncStyle = useWrappedFuncStyleQuery([''], async () => true)
       expectType<boolean | undefined>(testFuncStyle.data)
     }
@@ -173,9 +187,12 @@ describe('useQuery', () => {
     const key = queryKey()
 
     function Page() {
-      const { data = 'default' } = useQuery(key, async () => {
-        await sleep(10)
-        return 'test'
+      const { data = 'default' } = useQuery({
+        queryKey: key,
+        queryFn: async () => {
+          await sleep(10)
+          return 'test'
+        },
       })
 
       return (
@@ -197,17 +214,20 @@ describe('useQuery', () => {
     const states: UseQueryResult<string>[] = []
 
     function Page() {
-      const state = useQuery<string, Error>(key, async () => {
-        await sleep(10)
-        return 'test'
+      const state = useQuery<string, Error>({
+        queryKey: key,
+        queryFn: async () => {
+          await sleep(10)
+          return 'test'
+        },
       })
 
       states.push(state)
 
-      if (state.isLoading) {
+      if (state.isPending) {
         expectType<undefined>(state.data)
         expectType<null>(state.error)
-        return <span>loading</span>
+        return <span>pending</span>
       }
 
       if (state.isLoadingError) {
@@ -240,18 +260,17 @@ describe('useQuery', () => {
       isFetchedAfterMount: false,
       isFetching: true,
       isPaused: false,
-      isLoading: true,
+      isPending: true,
       isInitialLoading: true,
+      isLoading: true,
       isLoadingError: false,
       isPlaceholderData: false,
-      isPreviousData: false,
       isRefetchError: false,
       isRefetching: false,
       isStale: true,
       isSuccess: false,
       refetch: expect.any(Function),
-      remove: expect.any(Function),
-      status: 'loading',
+      status: 'pending',
       fetchStatus: 'fetching',
     })
 
@@ -268,17 +287,16 @@ describe('useQuery', () => {
       isFetchedAfterMount: true,
       isFetching: false,
       isPaused: false,
-      isLoading: false,
+      isPending: false,
       isInitialLoading: false,
+      isLoading: false,
       isLoadingError: false,
       isPlaceholderData: false,
-      isPreviousData: false,
       isRefetchError: false,
       isRefetching: false,
       isStale: true,
       isSuccess: true,
       refetch: expect.any(Function),
-      remove: expect.any(Function),
       status: 'success',
       fetchStatus: 'idle',
     })
@@ -287,17 +305,16 @@ describe('useQuery', () => {
   it('should return the correct states for an unsuccessful query', async () => {
     const key = queryKey()
 
-    const states: UseQueryResult<undefined, string>[] = []
+    const states: UseQueryResult[] = []
 
     function Page() {
-      const state = useQuery<string[], string, undefined>(
-        key,
-        () => Promise.reject('rejected'),
-        {
-          retry: 1,
-          retryDelay: 1,
-        },
-      )
+      const state = useQuery({
+        queryKey: key,
+        queryFn: () => Promise.reject(new Error('rejected')),
+
+        retry: 1,
+        retryDelay: 1,
+      })
 
       states.push(state)
 
@@ -305,7 +322,7 @@ describe('useQuery', () => {
         <div>
           <h1>Status: {state.status}</h1>
           <div>Failure Count: {state.failureCount}</div>
-          <div>Failure Reason: {state.failureReason}</div>
+          <div>Failure Reason: {state.failureReason?.message}</div>
         </div>
       )
     }
@@ -327,18 +344,17 @@ describe('useQuery', () => {
       isFetchedAfterMount: false,
       isFetching: true,
       isPaused: false,
-      isLoading: true,
+      isPending: true,
       isInitialLoading: true,
+      isLoading: true,
       isLoadingError: false,
       isPlaceholderData: false,
-      isPreviousData: false,
       isRefetchError: false,
       isRefetching: false,
       isStale: true,
       isSuccess: false,
       refetch: expect.any(Function),
-      remove: expect.any(Function),
-      status: 'loading',
+      status: 'pending',
       fetchStatus: 'fetching',
     })
 
@@ -348,52 +364,50 @@ describe('useQuery', () => {
       error: null,
       errorUpdatedAt: 0,
       failureCount: 1,
-      failureReason: 'rejected',
+      failureReason: new Error('rejected'),
       errorUpdateCount: 0,
       isError: false,
       isFetched: false,
       isFetchedAfterMount: false,
       isFetching: true,
       isPaused: false,
-      isLoading: true,
+      isPending: true,
       isInitialLoading: true,
+      isLoading: true,
       isLoadingError: false,
       isPlaceholderData: false,
-      isPreviousData: false,
       isRefetchError: false,
       isRefetching: false,
       isStale: true,
       isSuccess: false,
       refetch: expect.any(Function),
-      remove: expect.any(Function),
-      status: 'loading',
+      status: 'pending',
       fetchStatus: 'fetching',
     })
 
     expect(states[2]).toEqual({
       data: undefined,
       dataUpdatedAt: 0,
-      error: 'rejected',
+      error: new Error('rejected'),
       errorUpdatedAt: expect.any(Number),
       failureCount: 2,
-      failureReason: 'rejected',
+      failureReason: new Error('rejected'),
       errorUpdateCount: 1,
       isError: true,
       isFetched: true,
       isFetchedAfterMount: true,
       isFetching: false,
       isPaused: false,
-      isLoading: false,
+      isPending: false,
       isInitialLoading: false,
+      isLoading: false,
       isLoadingError: true,
       isPlaceholderData: false,
-      isPreviousData: false,
       isRefetchError: false,
       isRefetching: false,
       isStale: true,
       isSuccess: false,
       refetch: expect.any(Function),
-      remove: expect.any(Function),
       status: 'error',
       fetchStatus: 'idle',
     })
@@ -402,10 +416,13 @@ describe('useQuery', () => {
   it('should set isFetchedAfterMount to true after a query has been fetched', async () => {
     const key = queryKey()
 
-    await queryClient.prefetchQuery(key, () => 'prefetched')
+    await queryClient.prefetchQuery({
+      queryKey: key,
+      queryFn: () => 'prefetched',
+    })
 
     function Page() {
-      const result = useQuery(key, () => 'new data')
+      const result = useQuery({ queryKey: key, queryFn: () => 'new data' })
 
       return (
         <>
@@ -437,14 +454,14 @@ describe('useQuery', () => {
     const onSuccess = jest.fn()
 
     function Page() {
-      const state = useQuery(
-        key,
-        async () => {
+      const state = useQuery({
+        queryKey: key,
+        queryFn: async () => {
           await sleep(10)
           return 'data'
         },
-        { onSuccess },
-      )
+        onSuccess,
+      })
       states.push(state)
       return <div>data: {state.data}</div>
     }
@@ -464,15 +481,15 @@ describe('useQuery', () => {
     let count = 0
 
     function Page() {
-      const state = useQuery(
-        key,
-        async () => {
+      const state = useQuery({
+        queryKey: key,
+        queryFn: async () => {
           count++
           await sleep(10)
           return 'data' + count
         },
-        { onSuccess },
-      )
+        onSuccess,
+      })
 
       states.push(state)
 
@@ -490,7 +507,7 @@ describe('useQuery', () => {
     fireEvent.click(rendered.getByRole('button', { name: /refetch/i }))
     await rendered.findByText('data: data2')
 
-    expect(states.length).toBe(3) //loading, success, success after refetch
+    expect(states.length).toBe(3) //pending, success, success after refetch
     expect(count).toBe(2)
     expect(onSuccess).toHaveBeenCalledTimes(2)
   })
@@ -501,7 +518,12 @@ describe('useQuery', () => {
     const onSuccess = jest.fn()
 
     function Page() {
-      const state = useQuery(key, () => 'data', { enabled: false, onSuccess })
+      const state = useQuery({
+        queryKey: key,
+        queryFn: () => 'data',
+        enabled: false,
+        onSuccess,
+      })
 
       states.push(state)
 
@@ -545,14 +567,14 @@ describe('useQuery', () => {
     }
 
     function Component() {
-      const state = useQuery(
-        key,
-        async () => {
+      const state = useQuery({
+        queryKey: key,
+        queryFn: async () => {
           await sleep(10)
           return 'data'
         },
-        { onSuccess },
-      )
+        onSuccess,
+      })
       states.push(state)
       return null
     }
@@ -570,7 +592,9 @@ describe('useQuery', () => {
     const onError = jest.fn()
 
     function Page() {
-      const state = useQuery<unknown>(key, () => Promise.reject('error'), {
+      const state = useQuery<unknown>({
+        queryKey: key,
+        queryFn: () => Promise.reject(new Error('error')),
         retry: false,
         onError,
       })
@@ -583,7 +607,7 @@ describe('useQuery', () => {
     await sleep(10)
     expect(states.length).toBe(2)
     expect(onError).toHaveBeenCalledTimes(1)
-    expect(onError).toHaveBeenCalledWith('error')
+    expect(onError).toHaveBeenCalledWith(new Error('error'))
   })
 
   it('should not call onError when receiving a CancelledError', async () => {
@@ -591,16 +615,15 @@ describe('useQuery', () => {
     const onError = jest.fn()
 
     function Page() {
-      const { status, fetchStatus } = useQuery(
-        key,
-        async () => {
+      const { status, fetchStatus } = useQuery({
+        queryKey: key,
+        queryFn: async () => {
           await sleep(10)
           return 23
         },
-        {
-          onError,
-        },
-      )
+
+        onError,
+      })
       return (
         <span>
           status: {status}, fetchStatus: {fetchStatus}
@@ -610,12 +633,12 @@ describe('useQuery', () => {
 
     const rendered = renderWithClient(queryClient, <Page />)
 
-    rendered.getByText('status: loading, fetchStatus: fetching')
+    rendered.getByText('status: pending, fetchStatus: fetching')
 
-    await queryClient.cancelQueries(key)
+    await queryClient.cancelQueries({ queryKey: key })
     // query cancellation will reset the query to it's initial state
     await waitFor(() =>
-      rendered.getByText('status: loading, fetchStatus: idle'),
+      rendered.getByText('status: pending, fetchStatus: idle'),
     )
     expect(onError).not.toHaveBeenCalled()
   })
@@ -626,7 +649,11 @@ describe('useQuery', () => {
     const onSettled = jest.fn()
 
     function Page() {
-      const state = useQuery(key, () => 'data', { onSettled })
+      const state = useQuery({
+        queryKey: key,
+        queryFn: () => 'data',
+        onSettled,
+      })
       states.push(state)
 
       return <div>data: {state.data}</div>
@@ -645,24 +672,29 @@ describe('useQuery', () => {
 
   it('should call onSettled after a query has been fetched with an error', async () => {
     const key = queryKey()
-    const states: UseQueryResult<string>[] = []
     const onSettled = jest.fn()
+    const error = new Error('error')
 
     function Page() {
-      const state = useQuery(key, () => Promise.reject<unknown>('error'), {
+      const state = useQuery({
+        queryKey: key,
+        queryFn: async () => {
+          await sleep(10)
+          return Promise.reject(error)
+        },
         retry: false,
         onSettled,
       })
-      states.push(state)
-      return null
+      return <div>status: {state.status}</div>
     }
 
-    renderWithClient(queryClient, <Page />)
+    const rendered = renderWithClient(queryClient, <Page />)
 
-    await sleep(10)
-    expect(states.length).toBe(2)
+    await waitFor(() => {
+      rendered.getByText('status: error')
+    })
     expect(onSettled).toHaveBeenCalledTimes(1)
-    expect(onSettled).toHaveBeenCalledWith(undefined, 'error')
+    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 () => {
@@ -670,15 +702,16 @@ describe('useQuery', () => {
     let fetchCount = 0
 
     function Page() {
-      const { refetch } = useQuery(
-        key,
-        async () => {
+      const { refetch } = useQuery({
+        queryKey: key,
+        queryFn: async () => {
           fetchCount++
           await sleep(10)
           return 'data'
         },
-        { enabled: false, initialData: 'initialData' },
-      )
+        enabled: false,
+        initialData: 'initialData',
+      })
 
       React.useEffect(() => {
         setActTimeout(() => {
@@ -704,15 +737,16 @@ describe('useQuery', () => {
     let fetchCount = 0
 
     function Page() {
-      const { refetch } = useQuery(
-        key,
-        async () => {
+      const { refetch } = useQuery({
+        queryKey: key,
+        queryFn: async () => {
           fetchCount++
           await sleep(10)
           return 'data'
         },
-        { enabled: false, initialData: 'initialData' },
-      )
+        enabled: false,
+        initialData: 'initialData',
+      })
 
       React.useEffect(() => {
         setActTimeout(() => {
@@ -738,15 +772,15 @@ describe('useQuery', () => {
     let fetchCount = 0
 
     function Page() {
-      const { refetch } = useQuery(
-        key,
-        async () => {
+      const { refetch } = useQuery({
+        queryKey: key,
+        queryFn: async () => {
           fetchCount++
           await sleep(10)
           return 'data'
         },
-        { enabled: false },
-      )
+        enabled: false,
+      })
 
       React.useEffect(() => {
         setActTimeout(() => {
@@ -774,7 +808,7 @@ describe('useQuery', () => {
     queryClient.setQueryDefaults(key, { queryFn: () => 'data' })
 
     function Page() {
-      const state = useQuery<string>(key)
+      const state = useQuery<string>({ queryKey: key })
       states.push(state)
       return null
     }
@@ -788,7 +822,7 @@ describe('useQuery', () => {
     expect(states[1]).toMatchObject({ data: 'data' })
   })
 
-  it('should pick up a query when re-mounting with cacheTime 0', async () => {
+  it('should pick up a query when re-mounting with gcTime 0', async () => {
     const key = queryKey()
     const states: UseQueryResult<string>[] = []
 
@@ -808,17 +842,16 @@ describe('useQuery', () => {
     }
 
     function Component({ value }: { value: string }) {
-      const state = useQuery(
-        key,
-        async () => {
+      const state = useQuery({
+        queryKey: key,
+        queryFn: async () => {
           await sleep(10)
           return 'data: ' + value
         },
-        {
-          cacheTime: 0,
-          notifyOnChangeProps: 'all',
-        },
-      )
+
+        gcTime: 0,
+        notifyOnChangeProps: 'all',
+      })
       states.push(state)
       return (
         <div>
@@ -838,48 +871,47 @@ describe('useQuery', () => {
     expect(states.length).toBe(4)
     // First load
     expect(states[0]).toMatchObject({
-      isLoading: true,
+      isPending: true,
       isSuccess: false,
       isFetching: true,
     })
     // First success
     expect(states[1]).toMatchObject({
-      isLoading: false,
+      isPending: false,
       isSuccess: true,
       isFetching: false,
     })
     // Switch, goes to fetching
     expect(states[2]).toMatchObject({
-      isLoading: false,
+      isPending: false,
       isSuccess: true,
       isFetching: true,
     })
     // Second success
     expect(states[3]).toMatchObject({
-      isLoading: false,
+      isPending: false,
       isSuccess: true,
       isFetching: false,
     })
   })
 
-  it('should not get into an infinite loop when removing a query with cacheTime 0 and rerendering', async () => {
+  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>[] = []
 
     function Page() {
       const [, rerender] = React.useState({})
 
-      const state = useQuery(
-        key,
-        async () => {
+      const state = useQuery({
+        queryKey: key,
+        queryFn: async () => {
           await sleep(5)
           return 'data'
         },
-        {
-          cacheTime: 0,
-          notifyOnChangeProps: 'all',
-        },
-      )
+
+        gcTime: 0,
+        notifyOnChangeProps: 'all',
+      })
 
       states.push(state)
 
@@ -889,7 +921,7 @@ describe('useQuery', () => {
 
           <button
             onClick={() => {
-              state.remove()
+              queryClient.removeQueries({ queryKey: key })
               rerender({})
             }}
           >
@@ -916,15 +948,15 @@ describe('useQuery', () => {
 
     expect(states.length).toBe(5)
     // First load
-    expect(states[0]).toMatchObject({ isLoading: true, isSuccess: false })
+    expect(states[0]).toMatchObject({ isPending: true, isSuccess: false })
     // First success
-    expect(states[1]).toMatchObject({ isLoading: false, isSuccess: true })
+    expect(states[1]).toMatchObject({ isPending: false, isSuccess: true })
     // Remove
-    expect(states[2]).toMatchObject({ isLoading: true, isSuccess: false })
+    expect(states[2]).toMatchObject({ isPending: true, isSuccess: false })
     // Hook state update
-    expect(states[3]).toMatchObject({ isLoading: true, isSuccess: false })
+    expect(states[3]).toMatchObject({ isPending: true, isSuccess: false })
     // Second success
-    expect(states[4]).toMatchObject({ isLoading: false, isSuccess: true })
+    expect(states[4]).toMatchObject({ isPending: false, isSuccess: true })
   })
 
   it('should fetch when refetchOnMount is false and nothing has been fetched yet', async () => {
@@ -932,7 +964,9 @@ describe('useQuery', () => {
     const states: UseQueryResult<string>[] = []
 
     function Page() {
-      const state = useQuery(key, () => 'test', {
+      const state = useQuery({
+        queryKey: key,
+        queryFn: () => 'test',
         refetchOnMount: false,
       })
       states.push(state)
@@ -955,7 +989,9 @@ describe('useQuery', () => {
     queryClient.setQueryData(key, 'prefetched')
 
     function Page() {
-      const state = useQuery(key, () => 'test', {
+      const state = useQuery({
+        queryKey: key,
+        queryFn: () => 'test',
         refetchOnMount: false,
       })
       states.push(state)
@@ -975,7 +1011,9 @@ describe('useQuery', () => {
     const states: UseQueryResult<string>[] = []
 
     function Page() {
-      const state = useQuery(key, () => ({ name: 'test' }), {
+      const state = useQuery({
+        queryKey: key,
+        queryFn: () => ({ name: 'test' }),
         select: (data) => data.name,
       })
       states.push(state)
@@ -1025,7 +1063,9 @@ describe('useQuery', () => {
     const states: UseQueryResult<string>[] = []
 
     function Page() {
-      const state = useQuery(key, () => ({ name: 'test' }), {
+      const state = useQuery({
+        queryKey: key,
+        queryFn: () => ({ name: 'test' }),
         select: (data) => data.name,
         notifyOnChangeProps: ['data'],
       })
@@ -1066,7 +1106,9 @@ describe('useQuery', () => {
     const error = new Error('Select Error')
 
     function Page() {
-      const state = useQuery(key, () => ({ name: 'test' }), {
+      const state = useQuery({
+        queryKey: key,
+        queryFn: () => ({ name: 'test' }),
         select: () => {
           throw error
         },
@@ -1082,10 +1124,9 @@ describe('useQuery', () => {
       rendered.getByText('error')
     })
 
-    expect(mockLogger.error).toHaveBeenCalledWith(error)
     expect(states.length).toBe(2)
 
-    expect(states[0]).toMatchObject({ status: 'loading', data: undefined })
+    expect(states[0]).toMatchObject({ status: 'pending', data: undefined })
     expect(states[1]).toMatchObject({ status: 'error', error })
   })
 
@@ -1096,16 +1137,15 @@ describe('useQuery', () => {
 
     function Page() {
       const [, rerender] = React.useReducer(() => ({}), {})
-      const state = useQuery<string, Error>(
-        key,
-        () => (runs === 0 ? 'test' : 'test2'),
-        {
-          select: React.useCallback(() => {
-            runs++
-            throw error
-          }, []),
-        },
-      )
+      const state = useQuery<string, Error>({
+        queryKey: key,
+        queryFn: () => (runs === 0 ? 'test' : 'test2'),
+
+        select: React.useCallback(() => {
+          runs++
+          throw error
+        }, []),
+      })
       return (
         <div>
           <div>error: {state.error?.message}</div>
@@ -1132,9 +1172,12 @@ describe('useQuery', () => {
     const states: UseQueryResult<string>[] = []
 
     function Page() {
-      const state = useQuery(key, async () => {
-        await sleep(10)
-        return 'test'
+      const state = useQuery({
+        queryKey: key,
+        queryFn: async () => {
+          await sleep(10)
+          return 'test'
+        },
       })
 
       states.push(state)
@@ -1171,7 +1214,7 @@ describe('useQuery', () => {
     const states: UseQueryResult<string>[] = []
 
     function Page() {
-      const state = useQuery(key, () => 'test')
+      const state = useQuery({ queryKey: key, queryFn: () => 'test' })
 
       states.push(state)
 
@@ -1208,15 +1251,19 @@ describe('useQuery', () => {
 
     function Page() {
       const [, rerender] = React.useState({})
-      const state = useQuery(key, () => ++count, { notifyOnChangeProps: 'all' })
+      const state = useQuery({
+        queryKey: key,
+        queryFn: () => ++count,
+        notifyOnChangeProps: 'all',
+      })
 
       states.push(state)
 
-      const { remove } = state
-
       return (
         <div>
-          <button onClick={() => remove()}>remove</button>
+          <button onClick={() => queryClient.removeQueries({ queryKey: key })}>
+            remove
+          </button>
           <button onClick={() => rerender({})}>rerender</button>
           data: {state.data ?? 'null'}
         </div>
@@ -1234,11 +1281,11 @@ describe('useQuery', () => {
 
     expect(states.length).toBe(4)
     // Initial
-    expect(states[0]).toMatchObject({ status: 'loading', data: undefined })
+    expect(states[0]).toMatchObject({ status: 'pending', data: undefined })
     // Fetched
     expect(states[1]).toMatchObject({ status: 'success', data: 1 })
     // Remove + Hook state update, batched
-    expect(states[2]).toMatchObject({ status: 'loading', data: undefined })
+    expect(states[2]).toMatchObject({ status: 'pending', data: undefined })
     // Fetched
     expect(states[3]).toMatchObject({ status: 'success', data: 2 })
   })
@@ -1249,22 +1296,24 @@ describe('useQuery', () => {
     let count = 0
 
     function Page() {
-      const state = useQuery(
-        key,
-        async () => {
+      const state = useQuery({
+        queryKey: key,
+        queryFn: async () => {
           await sleep(10)
           return ++count
         },
-        { notifyOnChangeProps: 'all' },
-      )
+        notifyOnChangeProps: 'all',
+      })
 
       states.push(state)
 
-      const { remove, refetch } = state
+      const { refetch } = state
 
       return (
         <div>
-          <button onClick={() => remove()}>remove</button>
+          <button onClick={() => queryClient.removeQueries({ queryKey: key })}>
+            remove
+          </button>
           <button onClick={() => refetch()}>refetch</button>
           data: {state.data ?? 'null'}
         </div>
@@ -1309,15 +1358,15 @@ describe('useQuery', () => {
     let count = 0
 
     function Page() {
-      const state = useQuery(
-        key,
-        async () => {
+      const state = useQuery({
+        queryKey: key,
+        queryFn: async () => {
           await sleep(10)
           count++
           return count === 1 ? result1 : result2
         },
-        { notifyOnChangeProps: 'all' },
-      )
+        notifyOnChangeProps: 'all',
+      })
 
       states.push(state)
 
@@ -1364,24 +1413,23 @@ describe('useQuery', () => {
     queryClient.setQueryData(key, 'set')
 
     function Page() {
-      const result = useQuery(
-        key,
-        async () => {
+      const result = useQuery({
+        queryKey: key,
+        queryFn: async () => {
           await sleep(10)
           return 'fetched'
         },
-        {
-          initialData: 'initial',
-          staleTime: Infinity,
-        },
-      )
+
+        initialData: 'initial',
+        staleTime: Infinity,
+      })
 
       results.push(result)
 
       return (
         <div>
           <div>isFetching: {result.isFetching}</div>
-          <button onClick={() => queryClient.refetchQueries(key)}>
+          <button onClick={() => queryClient.refetchQueries({ queryKey: key })}>
             refetch
           </button>
           data: {result.data}
@@ -1408,21 +1456,24 @@ describe('useQuery', () => {
     let count = 0
 
     function Page() {
-      const state = useQuery(
-        key,
-        async () => {
+      const state = useQuery({
+        queryKey: key,
+        queryFn: async () => {
           await sleep(10)
           count++
           return count
         },
-        { staleTime: Infinity, notifyOnChangeProps: 'all' },
-      )
+        staleTime: Infinity,
+        notifyOnChangeProps: 'all',
+      })
 
       states.push(state)
 
       return (
         <div>
-          <button onClick={() => queryClient.invalidateQueries(key)}>
+          <button
+            onClick={() => queryClient.invalidateQueries({ queryKey: key })}
+          >
             invalidate
           </button>
           data: {state.data}
@@ -1474,15 +1525,15 @@ describe('useQuery', () => {
     let count = 0
 
     function Page() {
-      const state = useQuery(
-        key,
-        async () => {
+      const state = useQuery({
+        queryKey: key,
+        queryFn: async () => {
           await sleep(10)
           count++
           return count
         },
-        { enabled: false },
-      )
+        enabled: false,
+      })
 
       states.push(state)
 
@@ -1514,21 +1565,21 @@ describe('useQuery', () => {
     let count = 0
 
     function Page() {
-      const state = useQuery(
-        key,
-        async () => {
+      const state = useQuery({
+        queryKey: key,
+        queryFn: async () => {
           await sleep(10)
           count++
           return count
         },
-        { enabled: false },
-      )
+        enabled: false,
+      })
 
       states.push(state)
 
       React.useEffect(() => {
         setActTimeout(() => {
-          queryClient.invalidateQueries(key)
+          queryClient.invalidateQueries({ queryKey: key })
         }, 20)
       }, [])
 
@@ -1555,14 +1606,14 @@ describe('useQuery', () => {
     function Page() {
       const [count, setCount] = React.useState(0)
 
-      const state = useQuery(
-        [key, count],
-        async () => {
+      const state = useQuery({
+        queryKey: [key, count],
+        queryFn: async () => {
           await sleep(5)
           return count
         },
-        { enabled: count === 0 },
-      )
+        enabled: count === 0,
+      })
 
       states.push(state)
 
@@ -1611,21 +1662,21 @@ describe('useQuery', () => {
     })
   })
 
-  it('should keep the previous data when keepPreviousData is set', async () => {
+  it('should keep the previous data when placeholderData is set', async () => {
     const key = queryKey()
     const states: UseQueryResult<number>[] = []
 
     function Page() {
       const [count, setCount] = React.useState(0)
 
-      const state = useQuery(
-        [key, count],
-        async () => {
+      const state = useQuery({
+        queryKey: [key, count],
+        queryFn: async () => {
           await sleep(10)
           return count
         },
-        { keepPreviousData: true },
-      )
+        placeholderData: keepPreviousData,
+      })
 
       states.push(state)
 
@@ -1650,50 +1701,48 @@ describe('useQuery', () => {
       data: undefined,
       isFetching: true,
       isSuccess: false,
-      isPreviousData: false,
+      isPlaceholderData: false,
     })
     // Fetched
     expect(states[1]).toMatchObject({
       data: 0,
       isFetching: false,
       isSuccess: true,
-      isPreviousData: false,
+      isPlaceholderData: false,
     })
     // Set state
     expect(states[2]).toMatchObject({
       data: 0,
       isFetching: true,
       isSuccess: true,
-      isPreviousData: true,
+      isPlaceholderData: true,
     })
     // New data
     expect(states[3]).toMatchObject({
       data: 1,
       isFetching: false,
       isSuccess: true,
-      isPreviousData: false,
+      isPlaceholderData: false,
     })
   })
 
-  it('should transition to error state when keepPreviousData is set', async () => {
+  it('should transition to error state when placeholderData is set', async () => {
     const key = queryKey()
     const states: UseQueryResult<number>[] = []
 
     function Page({ count }: { count: number }) {
-      const state = useQuery<number, Error>(
-        [key, count],
-        async () => {
+      const state = useQuery<number, Error>({
+        queryKey: [key, count],
+        queryFn: async () => {
           await sleep(10)
           if (count === 2) {
             throw new Error('Error test')
           }
           return Promise.resolve(count)
         },
-        {
-          retry: false,
-          keepPreviousData: true,
-        },
-      )
+        retry: false,
+        placeholderData: keepPreviousData,
+      })
 
       states.push(state)
 
@@ -1701,7 +1750,7 @@ describe('useQuery', () => {
         <div>
           <h1>data: {state.data}</h1>
           <h2>error: {state.error?.message}</h2>
-          <p>previous data: {state.isPreviousData}</p>
+          <p>placeholder data: {state.isPlaceholderData}</p>
         </div>
       )
     }
@@ -1718,9 +1767,9 @@ describe('useQuery', () => {
     expect(states[0]).toMatchObject({
       data: undefined,
       isFetching: true,
-      status: 'loading',
+      status: 'pending',
       error: null,
-      isPreviousData: false,
+      isPlaceholderData: false,
     })
     // Fetched
     expect(states[1]).toMatchObject({
@@ -1728,7 +1777,7 @@ describe('useQuery', () => {
       isFetching: false,
       status: 'success',
       error: null,
-      isPreviousData: false,
+      isPlaceholderData: false,
     })
     // rerender Page 1
     expect(states[2]).toMatchObject({
@@ -1736,7 +1785,7 @@ describe('useQuery', () => {
       isFetching: true,
       status: 'success',
       error: null,
-      isPreviousData: true,
+      isPlaceholderData: true,
     })
     // Hook state update
     expect(states[3]).toMatchObject({
@@ -1744,7 +1793,7 @@ describe('useQuery', () => {
       isFetching: true,
       status: 'success',
       error: null,
-      isPreviousData: true,
+      isPlaceholderData: true,
     })
     // New data
     expect(states[4]).toMatchObject({
@@ -1752,7 +1801,7 @@ describe('useQuery', () => {
       isFetching: false,
       status: 'success',
       error: null,
-      isPreviousData: false,
+      isPlaceholderData: false,
     })
     // rerender Page 2
     expect(states[5]).toMatchObject({
@@ -1760,7 +1809,7 @@ describe('useQuery', () => {
       isFetching: true,
       status: 'success',
       error: null,
-      isPreviousData: true,
+      isPlaceholderData: true,
     })
     // Hook state update again
     expect(states[6]).toMatchObject({
@@ -1768,33 +1817,34 @@ describe('useQuery', () => {
       isFetching: true,
       status: 'success',
       error: null,
-      isPreviousData: true,
+      isPlaceholderData: true,
     })
     // Error
     expect(states[7]).toMatchObject({
       data: undefined,
       isFetching: false,
       status: 'error',
-      isPreviousData: false,
+      isPlaceholderData: false,
     })
     expect(states[7]?.error).toHaveProperty('message', 'Error test')
   })
 
-  it('should not show initial data from next query if keepPreviousData is set', async () => {
+  it('should not show initial data from next query if placeholderData is set', async () => {
     const key = queryKey()
     const states: DefinedUseQueryResult<number>[] = []
 
     function Page() {
       const [count, setCount] = React.useState(0)
 
-      const state = useQuery(
-        [key, count],
-        async () => {
+      const state = useQuery({
+        queryKey: [key, count],
+        queryFn: async () => {
           await sleep(10)
           return count
         },
-        { initialData: 99, keepPreviousData: true },
-      )
+        initialData: 99,
+        placeholderData: keepPreviousData,
+      })
 
       states.push(state)
 
@@ -1828,53 +1878,55 @@ describe('useQuery', () => {
       data: 99,
       isFetching: true,
       isSuccess: true,
-      isPreviousData: false,
+      isPlaceholderData: false,
     })
     // Fetched
     expect(states[1]).toMatchObject({
       data: 0,
       isFetching: false,
       isSuccess: true,
-      isPreviousData: false,
+      isPlaceholderData: false,
     })
     // Set state
     expect(states[2]).toMatchObject({
       data: 99,
       isFetching: true,
       isSuccess: true,
-      isPreviousData: false,
+      isPlaceholderData: false,
     })
     // Hook state update
     expect(states[3]).toMatchObject({
       data: 99,
       isFetching: true,
       isSuccess: true,
-      isPreviousData: false,
+      isPlaceholderData: false,
     })
     // New data
     expect(states[4]).toMatchObject({
       data: 1,
       isFetching: false,
       isSuccess: true,
-      isPreviousData: false,
+      isPlaceholderData: false,
     })
   })
 
-  it('should keep the previous data on disabled query when keepPreviousData is set', async () => {
+  it('should keep the previous data on disabled query when placeholderData is set', async () => {
     const key = queryKey()
     const states: UseQueryResult<number>[] = []
 
     function Page() {
       const [count, setCount] = React.useState(0)
 
-      const state = useQuery(
-        [key, count],
-        async () => {
+      const state = useQuery({
+        queryKey: [key, count],
+        queryFn: async () => {
           await sleep(10)
           return count
         },
-        { enabled: false, keepPreviousData: true, notifyOnChangeProps: 'all' },
-      )
+        enabled: false,
+        placeholderData: keepPreviousData,
+        notifyOnChangeProps: 'all',
+      })
 
       states.push(state)
 
@@ -1921,46 +1973,46 @@ describe('useQuery', () => {
       data: undefined,
       isFetching: false,
       isSuccess: false,
-      isPreviousData: false,
+      isPlaceholderData: false,
     })
     // Fetching query
     expect(states[1]).toMatchObject({
       data: undefined,
       isFetching: true,
       isSuccess: false,
-      isPreviousData: false,
+      isPlaceholderData: false,
     })
     // Fetched query
     expect(states[2]).toMatchObject({
       data: 0,
       isFetching: false,
       isSuccess: true,
-      isPreviousData: false,
+      isPlaceholderData: false,
     })
     // Set state
     expect(states[3]).toMatchObject({
       data: 0,
       isFetching: false,
       isSuccess: true,
-      isPreviousData: true,
+      isPlaceholderData: true,
     })
     // Fetching new query
     expect(states[4]).toMatchObject({
       data: 0,
       isFetching: true,
       isSuccess: true,
-      isPreviousData: true,
+      isPlaceholderData: true,
     })
     // Fetched new query
     expect(states[5]).toMatchObject({
       data: 1,
       isFetching: false,
       isSuccess: true,
-      isPreviousData: false,
+      isPlaceholderData: false,
     })
   })
 
-  it('should keep the previous data on disabled query when keepPreviousData is set and switching query key multiple times', async () => {
+  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>[] = []
 
@@ -1971,14 +2023,16 @@ describe('useQuery', () => {
     function Page() {
       const [count, setCount] = React.useState(10)
 
-      const state = useQuery(
-        [key, count],
-        async () => {
+      const state = useQuery({
+        queryKey: [key, count],
+        queryFn: async () => {
           await sleep(10)
           return count
         },
-        { enabled: false, keepPreviousData: true, notifyOnChangeProps: 'all' },
-      )
+        enabled: false,
+        placeholderData: keepPreviousData,
+        notifyOnChangeProps: 'all',
+      })
 
       states.push(state)
 
@@ -2010,35 +2064,35 @@ describe('useQuery', () => {
       data: 10,
       isFetching: false,
       isSuccess: true,
-      isPreviousData: false,
+      isPlaceholderData: false,
     })
     // Set state
     expect(states[1]).toMatchObject({
       data: 10,
       isFetching: false,
       isSuccess: true,
-      isPreviousData: true,
+      isPlaceholderData: true,
     })
     // State update
     expect(states[2]).toMatchObject({
       data: 10,
       isFetching: false,
       isSuccess: true,
-      isPreviousData: true,
+      isPlaceholderData: true,
     })
     // Refetch
     expect(states[3]).toMatchObject({
       data: 10,
       isFetching: true,
       isSuccess: true,
-      isPreviousData: true,
+      isPlaceholderData: true,
     })
     // Refetch done
     expect(states[4]).toMatchObject({
       data: 12,
       isFetching: false,
       isSuccess: true,
-      isPreviousData: false,
+      isPlaceholderData: false,
     })
   })
 
@@ -2047,14 +2101,14 @@ describe('useQuery', () => {
     const states: UseQueryResult<number>[] = []
 
     function FirstComponent() {
-      const state = useQuery(
-        key,
-        async () => {
+      const state = useQuery({
+        queryKey: key,
+        queryFn: async () => {
           await sleep(10)
           return 1
         },
-        { notifyOnChangeProps: 'all' },
-      )
+        notifyOnChangeProps: 'all',
+      })
       const refetch = state.refetch
 
       states.push(state)
@@ -2068,7 +2122,7 @@ describe('useQuery', () => {
     }
 
     function SecondComponent() {
-      useQuery(key, () => 2, { notifyOnChangeProps: 'all' })
+      useQuery({ queryKey: key, queryFn: () => 2, notifyOnChangeProps: 'all' })
       return null
     }
 
@@ -2108,39 +2162,40 @@ describe('useQuery', () => {
     const states1: UseQueryResult<string>[] = []
     const states2: UseQueryResult<string>[] = []
 
-    await queryClient.prefetchQuery(key, async () => {
-      await sleep(10)
-      return 'prefetch'
+    await queryClient.prefetchQuery({
+      queryKey: key,
+      queryFn: async () => {
+        await sleep(10)
+        return 'prefetch'
+      },
     })
 
     await sleep(20)
 
     function FirstComponent() {
-      const state = useQuery(
-        key,
-        async () => {
+      const state = useQuery({
+        queryKey: key,
+        queryFn: async () => {
           await sleep(10)
           return 'one'
         },
-        {
-          staleTime: 100,
-        },
-      )
+
+        staleTime: 100,
+      })
       states1.push(state)
       return null
     }
 
     function SecondComponent() {
-      const state = useQuery(
-        key,
-        async () => {
+      const state = useQuery({
+        queryKey: key,
+        queryFn: async () => {
           await sleep(10)
           return 'two'
         },
-        {
-          staleTime: 10,
-        },
-      )
+
+        staleTime: 10,
+      })
       states2.push(state)
       return null
     }
@@ -2208,7 +2263,9 @@ describe('useQuery', () => {
     const states: UseQueryResult<string>[] = []
 
     function Page() {
-      const state = useQuery(key, () => 'test', {
+      const state = useQuery({
+        queryKey: key,
+        queryFn: () => 'test',
         staleTime: 50,
       })
       states.push(state)
@@ -2230,16 +2287,15 @@ describe('useQuery', () => {
     const states: UseQueryResult<string>[] = []
 
     function Page() {
-      const state = useQuery(
-        key,
-        async () => {
+      const state = useQuery({
+        queryKey: key,
+        queryFn: async () => {
           await sleep(5)
           return 'test'
         },
-        {
-          notifyOnChangeProps: ['data'],
-        },
-      )
+
+        notifyOnChangeProps: ['data'],
+      })
 
       states.push(state)
 
@@ -2272,7 +2328,7 @@ describe('useQuery', () => {
     expect(states.length).toBe(2)
     expect(states[0]).toMatchObject({
       data: undefined,
-      status: 'loading',
+      status: 'pending',
       isFetching: true,
     })
     expect(states[1]).toMatchObject({
@@ -2288,12 +2344,16 @@ describe('useQuery', () => {
     const key2 = queryKey()
 
     function Page() {
-      const first = useQuery(key1, () => 'data', {
+      const first = useQuery({
+        queryKey: key1,
+        queryFn: () => 'data',
         enabled: false,
         initialData: 'init',
       })
 
-      const second = useQuery(key2, () => 'data', {
+      const second = useQuery({
+        queryKey: key2,
+        queryFn: () => 'data',
         enabled: false,
         initialData: 'init',
       })
@@ -2330,14 +2390,14 @@ describe('useQuery', () => {
     }
 
     function Page() {
-      useQuery(key, queryFn1)
-      useQuery(key, queryFn2)
+      useQuery({ queryKey: key, queryFn: queryFn1 })
+      useQuery({ queryKey: key, queryFn: queryFn2 })
       return null
     }
 
     renderWithClient(queryClient, <Page />)
 
-    expect(queryCache.find(key)!.options.queryFn).toBe(queryFn1)
+    expect(queryCache.find({ queryKey: key })!.options.queryFn).toBe(queryFn1)
   })
 
   it('should batch re-renders', async () => {
@@ -2351,8 +2411,8 @@ describe('useQuery', () => {
     }
 
     function Page() {
-      const query1 = useQuery(key, queryFn)
-      const query2 = useQuery(key, queryFn)
+      const query1 = useQuery({ queryKey: key, queryFn })
+      const query2 = useQuery({ queryKey: key, queryFn })
       renders++
 
       return (
@@ -2385,12 +2445,16 @@ describe('useQuery', () => {
 
     function Page() {
       const [count, setCount] = React.useState(0)
-      useQuery(key, queryFn, {
+      useQuery({
+        queryKey: key,
+        queryFn,
         onSuccess: () => {
           setCount((x) => x + 1)
         },
       })
-      useQuery(key, queryFn, {
+      useQuery({
+        queryKey: key,
+        queryFn,
         onSuccess: () => {
           setCount((x) => x + 1)
         },
@@ -2408,8 +2472,8 @@ describe('useQuery', () => {
 
     await waitFor(() => rendered.getByText('count: 2'))
 
-    // Should be 2 / 3 instead of 5, uSES batches differently
-    expect(renders).toBe(process.env.REACTJS_VERSION === '17' ? 2 : 3)
+    // Should be 3 instead of 5
+    expect(renders).toBe(3)
 
     // Both callbacks should have been executed
     expect(callbackCount).toBe(2)
@@ -2420,7 +2484,7 @@ describe('useQuery', () => {
 
     function Page() {
       const [, setNewState] = React.useState('state')
-      const state = useQuery(key, () => 'data')
+      const state = useQuery({ queryKey: key, queryFn: () => 'data' })
       React.useEffect(() => {
         setActTimeout(() => {
           queryClient.setQueryData(key, 'new')
@@ -2437,15 +2501,17 @@ describe('useQuery', () => {
   })
 
   // See https://github.com/tannerlinsley/react-query/issues/170
-  it('should start with status loading, fetchStatus idle if enabled is false', async () => {
+  it('should start with status pending, fetchStatus idle if enabled is false', async () => {
     const key1 = queryKey()
     const key2 = queryKey()
 
     function Page() {
-      const first = useQuery(key1, () => 'data', {
+      const first = useQuery({
+        queryKey: key1,
+        queryFn: () => 'data',
         enabled: false,
       })
-      const second = useQuery(key2, () => 'data')
+      const second = useQuery({ queryKey: key2, queryFn: () => 'data' })
 
       return (
         <div>
@@ -2463,19 +2529,22 @@ describe('useQuery', () => {
 
     // use "act" to wait for state update and prevent console warning
 
-    rendered.getByText('First Status: loading, idle')
-    await waitFor(() => rendered.getByText('Second Status: loading, fetching'))
+    rendered.getByText('First Status: pending, idle')
+    await waitFor(() => rendered.getByText('Second Status: pending, fetching'))
     await waitFor(() => rendered.getByText('Second Status: success, idle'))
   })
 
   // See https://github.com/tannerlinsley/react-query/issues/144
-  it('should be in "loading" state by default', async () => {
+  it('should be in "pending" state by default', async () => {
     const key = queryKey()
 
     function Page() {
-      const { status } = useQuery(key, async () => {
-        await sleep(10)
-        return 'test'
+      const { status } = useQuery({
+        queryKey: key,
+        queryFn: async () => {
+          await sleep(10)
+          return 'test'
+        },
       })
 
       return <div>status: {status}</div>
@@ -2483,7 +2552,7 @@ describe('useQuery', () => {
 
     const rendered = renderWithClient(queryClient, <Page />)
 
-    rendered.getByText('status: loading')
+    rendered.getByText('status: pending')
   })
 
   // See https://github.com/tannerlinsley/react-query/issues/147
@@ -2499,7 +2568,7 @@ describe('useQuery', () => {
     }
 
     function Page() {
-      const state = useQuery([key, variables], queryFn)
+      const state = useQuery({ queryKey: [key, variables], queryFn })
       states.push(state)
       return <div>{state.status}</div>
     }
@@ -2518,7 +2587,9 @@ describe('useQuery', () => {
     const queryFn = jest.fn<string, unknown[]>().mockReturnValue('data')
 
     function Page() {
-      const { data = 'default' } = useQuery(key, queryFn, {
+      const { data = 'default' } = useQuery({
+        queryKey: key,
+        queryFn,
         enabled: false,
       })
 
@@ -2534,7 +2605,7 @@ describe('useQuery', () => {
     await waitFor(() => rendered.getByText('default'))
 
     act(() => {
-      window.dispatchEvent(new FocusEvent('focus'))
+      window.dispatchEvent(new Event('visibilitychange'))
     })
 
     expect(queryFn).not.toHaveBeenCalled()
@@ -2546,7 +2617,9 @@ describe('useQuery', () => {
     let count = 0
 
     function Page() {
-      const state = useQuery(key, () => count++, {
+      const state = useQuery({
+        queryKey: key,
+        queryFn: () => count++,
         staleTime: 0,
         refetchOnWindowFocus: false,
       })
@@ -2559,7 +2632,7 @@ describe('useQuery', () => {
     await sleep(10)
 
     act(() => {
-      window.dispatchEvent(new FocusEvent('focus'))
+      window.dispatchEvent(new Event('visibilitychange'))
     })
 
     await sleep(10)
@@ -2575,7 +2648,9 @@ describe('useQuery', () => {
     let count = 0
 
     function Page() {
-      const state = useQuery(key, () => count++, {
+      const state = useQuery({
+        queryKey: key,
+        queryFn: () => count++,
         staleTime: 0,
         refetchOnWindowFocus: () => false,
       })
@@ -2588,7 +2663,7 @@ describe('useQuery', () => {
     await sleep(10)
 
     act(() => {
-      window.dispatchEvent(new FocusEvent('focus'))
+      window.dispatchEvent(new Event('visibilitychange'))
     })
 
     await sleep(10)
@@ -2604,7 +2679,9 @@ describe('useQuery', () => {
     let count = 0
 
     function Page() {
-      const state = useQuery(key, () => count++, {
+      const state = useQuery({
+        queryKey: key,
+        queryFn: () => count++,
         staleTime: Infinity,
         refetchOnWindowFocus: true,
       })
@@ -2617,7 +2694,7 @@ describe('useQuery', () => {
     await sleep(10)
 
     act(() => {
-      window.dispatchEvent(new FocusEvent('focus'))
+      window.dispatchEvent(new Event('visibilitychange'))
     })
 
     await sleep(10)
@@ -2633,17 +2710,16 @@ describe('useQuery', () => {
     let count = 0
 
     function Page() {
-      const state = useQuery(
-        key,
-        async () => {
+      const state = useQuery({
+        queryKey: key,
+        queryFn: async () => {
           await sleep(10)
           return count++
         },
-        {
-          staleTime: Infinity,
-          refetchOnWindowFocus: 'always',
-        },
-      )
+
+        staleTime: Infinity,
+        refetchOnWindowFocus: 'always',
+      })
       states.push(state)
       return null
     }
@@ -2653,7 +2729,7 @@ describe('useQuery', () => {
     await sleep(20)
 
     act(() => {
-      window.dispatchEvent(new FocusEvent('focus'))
+      window.dispatchEvent(new Event('visibilitychange'))
     })
 
     await sleep(20)
@@ -2671,18 +2747,17 @@ describe('useQuery', () => {
     let count = 0
 
     function Page() {
-      const state = useQuery(
-        key,
-        async () => {
+      const state = useQuery({
+        queryKey: key,
+        queryFn: async () => {
           await sleep(10)
-          return count++
-        },
-        {
-          staleTime: 0,
-          retry: 0,
-          refetchOnWindowFocus: (query) => (query.state.data || 0) < 1,
+          return count++
         },
-      )
+
+        staleTime: 0,
+        retry: 0,
+        refetchOnWindowFocus: (query) => (query.state.data || 0) < 1,
+      })
       states.push(state)
       return <div>data: {String(state.data)}</div>
     }
@@ -2696,7 +2771,7 @@ describe('useQuery', () => {
     expect(states[1]).toMatchObject({ data: 0, isFetching: false })
 
     act(() => {
-      window.dispatchEvent(new FocusEvent('focus'))
+      window.dispatchEvent(new Event('visibilitychange'))
     })
 
     await rendered.findByText('data: 1')
@@ -2708,7 +2783,7 @@ describe('useQuery', () => {
     expect(states[3]).toMatchObject({ data: 1, isFetching: false })
 
     act(() => {
-      window.dispatchEvent(new FocusEvent('focus'))
+      window.dispatchEvent(new Event('visibilitychange'))
     })
 
     await sleep(20)
@@ -2721,10 +2796,15 @@ describe('useQuery', () => {
     const key = queryKey()
     const states: UseQueryResult<string>[] = []
 
-    await queryClient.prefetchQuery(key, () => 'prefetched')
+    await queryClient.prefetchQuery({
+      queryKey: key,
+      queryFn: () => 'prefetched',
+    })
 
     function Page() {
-      const state = useQuery(key, () => 'data', {
+      const state = useQuery({
+        queryKey: key,
+        queryFn: () => 'data',
         refetchOnMount: 'always',
         staleTime: Infinity,
       })
@@ -2753,12 +2833,17 @@ describe('useQuery', () => {
     const key = queryKey()
     const states: UseQueryResult<string>[] = []
 
-    await queryClient.prefetchQuery(key, () => 'prefetched')
+    await queryClient.prefetchQuery({
+      queryKey: key,
+      queryFn: () => 'prefetched',
+    })
 
     await sleep(10)
 
     function Page() {
-      const state = useQuery(key, () => 'data', {
+      const state = useQuery({
+        queryKey: key,
+        queryFn: () => 'data',
         refetchOnMount: true,
         staleTime: 0,
       })
@@ -2787,18 +2872,18 @@ describe('useQuery', () => {
     const key = queryKey()
 
     function Page() {
-      const { status, error } = useQuery<unknown, string>(
-        key,
-        () => {
-          return Promise.reject('Error test jaylen')
+      const { status, error } = useQuery({
+        queryKey: key,
+        queryFn: () => {
+          return Promise.reject(new Error('Error test jaylen'))
         },
-        { retry: false },
-      )
+        retry: false,
+      })
 
       return (
         <div>
           <h1>{status}</h1>
-          <h2>{error}</h2>
+          <h2>{error?.message}</h2>
         </div>
       )
     }
@@ -2809,15 +2894,19 @@ describe('useQuery', () => {
     await waitFor(() => rendered.getByText('Error test jaylen'))
   })
 
-  it('should throw error if queryFn throws and useErrorBoundary is in use', async () => {
+  it('should throw error if queryFn throws and throwErrors is in use', async () => {
+    const consoleMock = jest
+      .spyOn(console, 'error')
+      .mockImplementation(() => undefined)
     const key = queryKey()
 
     function Page() {
-      const { status, error } = useQuery<unknown, string>(
-        key,
-        () => Promise.reject('Error test jaylen'),
-        { retry: false, useErrorBoundary: true },
-      )
+      const { status, error } = useQuery<unknown, string>({
+        queryKey: key,
+        queryFn: () => Promise.reject(new Error('Error test jaylen')),
+        retry: false,
+        throwErrors: true,
+      })
 
       return (
         <div>
@@ -2835,16 +2924,19 @@ describe('useQuery', () => {
     )
 
     await waitFor(() => rendered.getByText('error boundary'))
+    consoleMock.mockRestore()
   })
 
-  it('should update with data if we observe no properties and useErrorBoundary', async () => {
+  it('should update with data if we observe no properties and throwErrors', async () => {
     const key = queryKey()
 
     let result: UseQueryResult<string> | undefined
 
     function Page() {
-      const query = useQuery(key, () => Promise.resolve('data'), {
-        useErrorBoundary: true,
+      const query = useQuery({
+        queryKey: key,
+        queryFn: () => Promise.resolve('data'),
+        throwErrors: true,
       })
 
       React.useEffect(() => {
@@ -2867,19 +2959,18 @@ describe('useQuery', () => {
     const key = queryKey()
 
     function Page() {
-      const { status, error } = useQuery<unknown, string>(
-        key,
-        () => Promise.reject('Local Error'),
-        {
-          retry: false,
-          useErrorBoundary: (err) => err !== 'Local Error',
-        },
-      )
+      const { status, error } = useQuery({
+        queryKey: key,
+        queryFn: () => Promise.reject(new Error('Local Error')),
+
+        retry: false,
+        throwErrors: (err) => err.message !== 'Local Error',
+      })
 
       return (
         <div>
           <h1>{status}</h1>
-          <h2>{error}</h2>
+          <h2>{error?.message}</h2>
         </div>
       )
     }
@@ -2896,17 +2987,20 @@ describe('useQuery', () => {
   })
 
   it('should throw error instead of setting status when error should be thrown', async () => {
+    const consoleMock = jest
+      .spyOn(console, 'error')
+      .mockImplementation(() => undefined)
+
     const key = queryKey()
 
     function Page() {
-      const { status, error } = useQuery<unknown, Error>(
-        key,
-        () => Promise.reject(new Error('Remote Error')),
-        {
-          retry: false,
-          useErrorBoundary: (err) => err.message !== 'Local Error',
-        },
-      )
+      const { status, error } = useQuery<unknown, Error>({
+        queryKey: key,
+        queryFn: () => Promise.reject(new Error('Remote Error')),
+
+        retry: false,
+        throwErrors: (err) => err.message !== 'Local Error',
+      })
 
       return (
         <div>
@@ -2933,6 +3027,7 @@ describe('useQuery', () => {
 
     await waitFor(() => rendered.getByText('error boundary'))
     await waitFor(() => rendered.getByText('Remote Error'))
+    consoleMock.mockRestore()
   })
 
   it('should continue retries when observers unmount and remount while waiting for a retry (#3031)', async () => {
@@ -2940,24 +3035,23 @@ describe('useQuery', () => {
     let count = 0
 
     function Page() {
-      const result = useQuery<number, string>(
-        key,
-        async () => {
+      const result = useQuery({
+        queryKey: key,
+        queryFn: async () => {
           count++
           await sleep(10)
-          return Promise.reject('some error')
-        },
-        {
-          retry: 2,
-          retryDelay: 100,
+          return Promise.reject(new Error('some error'))
         },
-      )
+
+        retry: 2,
+        retryDelay: 100,
+      })
 
       return (
         <div>
-          <div>error: {result.error ?? 'null'}</div>
+          <div>error: {result.error?.message ?? 'null'}</div>
           <div>failureCount: {result.failureCount}</div>
-          <div>failureReason: {result.failureReason}</div>
+          <div>failureReason: {result.failureReason?.message}</div>
         </div>
       )
     }
@@ -2990,24 +3084,23 @@ describe('useQuery', () => {
     let count = 0
 
     function Page() {
-      const result = useQuery<number, string>(
-        key,
-        async () => {
+      const result = useQuery({
+        queryKey: key,
+        queryFn: async () => {
           count++
           await sleep(10)
-          return Promise.reject('some error')
-        },
-        {
-          retry: 2,
-          retryDelay: 100,
+          return Promise.reject(new Error('some error'))
         },
-      )
+
+        retry: 2,
+        retryDelay: 100,
+      })
 
       return (
         <div>
-          <div>error: {result.error ?? 'null'}</div>
+          <div>error: {result.error?.message ?? 'null'}</div>
           <div>failureCount: {result.failureCount}</div>
-          <div>failureReason: {result.failureReason}</div>
+          <div>failureReason: {result.failureReason?.message}</div>
         </div>
       )
     }
@@ -3044,10 +3137,15 @@ describe('useQuery', () => {
     const key = queryKey()
     const states: UseQueryResult<string>[] = []
 
-    await queryClient.prefetchQuery(key, () => 'prefetched')
+    await queryClient.prefetchQuery({
+      queryKey: key,
+      queryFn: () => 'prefetched',
+    })
 
     function Page() {
-      const state = useQuery(key, () => 'data', {
+      const state = useQuery({
+        queryKey: key,
+        queryFn: () => 'data',
         refetchOnMount: 'always',
         staleTime: 50,
       })
@@ -3088,7 +3186,9 @@ describe('useQuery', () => {
     const states: DefinedUseQueryResult<string>[] = []
 
     function Page() {
-      const state = useQuery(key, () => 'data', {
+      const state = useQuery({
+        queryKey: key,
+        queryFn: () => 'data',
         initialData: 'initial',
       })
       states.push(state)
@@ -3118,7 +3218,9 @@ describe('useQuery', () => {
     const states: DefinedUseQueryResult<string>[] = []
 
     function Page() {
-      const state = useQuery(key, () => 'data', {
+      const state = useQuery({
+        queryKey: key,
+        queryFn: () => 'data',
         staleTime: 50,
         initialData: 'initial',
       })
@@ -3150,7 +3252,9 @@ describe('useQuery', () => {
     const oneSecondAgo = Date.now() - 1000
 
     function Page() {
-      const state = useQuery(key, () => 'data', {
+      const state = useQuery({
+        queryKey: key,
+        queryFn: () => 'data',
         staleTime: 50,
         initialData: 'initial',
         initialDataUpdatedAt: oneSecondAgo,
@@ -3186,7 +3290,9 @@ describe('useQuery', () => {
     const states: DefinedUseQueryResult<string>[] = []
 
     function Page() {
-      const state = useQuery(key, () => 'data', {
+      const state = useQuery({
+        queryKey: key,
+        queryFn: () => 'data',
         staleTime: 10 * 1000, // 10 seconds
         initialData: 'initial',
         initialDataUpdatedAt: 0,
@@ -3218,7 +3324,9 @@ describe('useQuery', () => {
 
     function Page() {
       const [count, setCount] = React.useState(0)
-      const state = useQuery([key, count], () => ({ count: 10 }), {
+      const state = useQuery({
+        queryKey: [key, count],
+        queryFn: () => ({ count: 10 }),
         staleTime: Infinity,
         initialData: () => ({ count }),
       })
@@ -3249,31 +3357,29 @@ describe('useQuery', () => {
 
     const queryFn = jest.fn<unknown, unknown[]>()
     queryFn.mockImplementation(() => {
-      return Promise.reject('Error test Barrett')
+      return Promise.reject(new Error('Error test Barrett'))
     })
 
     function Page() {
-      const { status, failureCount, failureReason } = useQuery<unknown, string>(
-        key,
+      const { status, failureCount, failureReason } = useQuery({
+        queryKey: key,
         queryFn,
-        {
-          retry: 1,
-          retryDelay: 1,
-        },
-      )
+        retry: 1,
+        retryDelay: 1,
+      })
 
       return (
         <div>
           <h1>{status}</h1>
           <h2>Failed {failureCount} times</h2>
-          <h2>Failed because {failureReason}</h2>
+          <h2>Failed because {failureReason?.message}</h2>
         </div>
       )
     }
 
     const rendered = renderWithClient(queryClient, <Page />)
 
-    await waitFor(() => rendered.getByText('loading'))
+    await waitFor(() => rendered.getByText('pending'))
     await waitFor(() => rendered.getByText('error'))
 
     // query should fail `retry + 1` times, since first time isn't a "retry"
@@ -3289,36 +3395,34 @@ describe('useQuery', () => {
     const queryFn = jest.fn<unknown, unknown[]>()
 
     queryFn.mockImplementationOnce(() => {
-      return Promise.reject('Error test Tanner')
+      return Promise.reject(new Error('Error test Tanner'))
     })
 
     queryFn.mockImplementation(() => {
-      return Promise.reject('NoRetry')
+      return Promise.reject(new Error('NoRetry'))
     })
 
     function Page() {
-      const { status, failureCount, failureReason, error } = useQuery<
-        unknown,
-        string,
-        [string]
-      >(key, queryFn, {
+      const { status, failureCount, failureReason, error } = useQuery({
+        queryKey: key,
+        queryFn,
         retryDelay: 1,
-        retry: (_failureCount, err) => err !== 'NoRetry',
+        retry: (_failureCount, err) => err.message !== 'NoRetry',
       })
 
       return (
         <div>
           <h1>{status}</h1>
           <h2>Failed {failureCount} times</h2>
-          <h2>Failed because {failureReason}</h2>
-          <h2>{error}</h2>
+          <h2>Failed because {failureReason?.message}</h2>
+          <h2>{error?.message}</h2>
         </div>
       )
     }
 
     const rendered = renderWithClient(queryClient, <Page />)
 
-    await waitFor(() => rendered.getByText('loading'))
+    await waitFor(() => rendered.getByText('pending'))
     await waitFor(() => rendered.getByText('error'))
 
     await waitFor(() => rendered.getByText('Failed 2 times'))
@@ -3340,7 +3444,9 @@ describe('useQuery', () => {
     })
 
     function Page() {
-      const { status, failureCount, failureReason } = useQuery(key, queryFn, {
+      const { status, failureCount, failureReason } = useQuery({
+        queryKey: key,
+        queryFn,
         retry: 1,
         retryDelay: (_, error: DelayError) => error.delay,
       })
@@ -3376,17 +3482,15 @@ describe('useQuery', () => {
     let count = 0
 
     function Page() {
-      const query = useQuery<unknown, string>(
-        key,
-        () => {
+      const query = useQuery<unknown, string>({
+        queryKey: key,
+        queryFn: () => {
           count++
           return Promise.reject<unknown>(`fetching error ${count}`)
         },
-        {
-          retry: 3,
-          retryDelay: 1,
-        },
-      )
+        retry: 3,
+        retryDelay: 1,
+      })
 
       return (
         <div>
@@ -3403,7 +3507,7 @@ 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('status pending'))
     await waitFor(() => rendered.getByText('error null'))
 
     // Check if the query really paused
@@ -3414,7 +3518,7 @@ describe('useQuery', () => {
     act(() => {
       // reset visibilityState to original value
       visibilityMock.mockRestore()
-      window.dispatchEvent(new FocusEvent('focus'))
+      window.dispatchEvent(new Event('visibilitychange'))
     })
 
     // Wait for the final result
@@ -3427,9 +3531,6 @@ describe('useQuery', () => {
     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')
   })
 
   it('should fetch on mount when a query was already created with setQueryData', async () => {
@@ -3439,7 +3540,7 @@ describe('useQuery', () => {
     queryClient.setQueryData(key, 'prefetched')
 
     function Page() {
-      const state = useQuery(key, () => 'data')
+      const state = useQuery({ queryKey: key, queryFn: () => 'data' })
       states.push(state)
       return null
     }
@@ -3474,9 +3575,12 @@ describe('useQuery', () => {
     queryClient.setQueryData(key, 'prefetched')
 
     function Page() {
-      const state = useQuery(key, async () => {
-        await sleep(10)
-        return 'data'
+      const state = useQuery({
+        queryKey: key,
+        queryFn: async () => {
+          await sleep(10)
+          return 'data'
+        },
       })
       states.push(state)
       return (
@@ -3493,7 +3597,7 @@ describe('useQuery', () => {
     act(() => {
       // reset visibilityState to original value
       visibilityMock.mockRestore()
-      window.dispatchEvent(new FocusEvent('focus'))
+      window.dispatchEvent(new Event('visibilitychange'))
     })
 
     await waitFor(() => expect(states.length).toBe(4))
@@ -3533,14 +3637,16 @@ describe('useQuery', () => {
     const prefetchQueryFn = jest.fn<string, unknown[]>()
     prefetchQueryFn.mockImplementation(() => 'not yet...')
 
-    await queryClient.prefetchQuery(key, prefetchQueryFn, {
+    await queryClient.prefetchQuery({
+      queryKey: key,
+      queryFn: prefetchQueryFn,
       staleTime: 10,
     })
 
     await sleep(11)
 
     function Page() {
-      const state = useQuery(key, queryFn)
+      const state = useQuery({ queryKey: key, queryFn })
       states.push(state)
       return null
     }
@@ -3565,16 +3671,16 @@ describe('useQuery', () => {
       return 'not yet...'
     })
 
-    await queryClient.prefetchQuery(key, prefetchQueryFn, {
+    await queryClient.prefetchQuery({
+      queryKey: key,
+      queryFn: prefetchQueryFn,
       staleTime: 1000,
     })
 
     await sleep(0)
 
     function Page() {
-      useQuery(key, queryFn, {
-        staleTime: 1000,
-      })
+      useQuery({ queryKey: key, queryFn, staleTime: 1000 })
       return null
     }
 
@@ -3593,9 +3699,9 @@ describe('useQuery', () => {
     function Page() {
       let counter = 0
 
-      const query = useQuery<string, Error>(
-        key,
-        async () => {
+      const query = useQuery<string, Error>({
+        queryKey: key,
+        queryFn: async () => {
           if (counter < 2) {
             counter++
             throw new Error('error')
@@ -3603,8 +3709,8 @@ describe('useQuery', () => {
             return 'data'
           }
         },
-        { retryDelay: 10 },
-      )
+        retryDelay: 10,
+      })
 
       return (
         <div>
@@ -3631,23 +3737,23 @@ describe('useQuery', () => {
       const [enabled, setEnabled] = React.useState(false)
       const [isPrefetched, setPrefetched] = React.useState(false)
 
-      const query = useQuery(
-        key,
-        async () => {
+      const query = useQuery({
+        queryKey: key,
+        queryFn: async () => {
           count++
           await sleep(10)
           return count
         },
-        {
-          enabled,
-        },
-      )
+
+        enabled,
+      })
 
       React.useEffect(() => {
         async function prefetch() {
-          await queryClient.prefetchQuery(key, () =>
-            Promise.resolve('prefetched data'),
-          )
+          await queryClient.prefetchQuery({
+            queryKey: key,
+            queryFn: () => Promise.resolve('prefetched data'),
+          })
           act(() => setPrefetched(true))
         }
         prefetch()
@@ -3677,7 +3783,9 @@ describe('useQuery', () => {
     function Page() {
       const [shouldFetch, setShouldFetch] = React.useState(false)
 
-      const query = useQuery(key, () => 'data', {
+      const query = useQuery({
+        queryKey: key,
+        queryFn: () => 'data',
         enabled: shouldFetch,
       })
 
@@ -3711,17 +3819,25 @@ describe('useQuery', () => {
     const results: DefinedUseQueryResult<string>[] = []
 
     function Page() {
-      const result = useQuery(key, () => 'serverData', { initialData: 'data' })
+      const result = useQuery({
+        queryKey: key,
+        queryFn: async () => {
+          await sleep(10)
+          return 'serverData'
+        },
+        initialData: 'initialData',
+      })
       results.push(result)
-      return null
+      return <div>data: {result.data}</div>
     }
 
-    renderWithClient(queryClient, <Page />)
+    const rendered = renderWithClient(queryClient, <Page />)
 
-    await sleep(10)
+    await waitFor(() => rendered.getByText('data: initialData'))
+    await waitFor(() => rendered.getByText('data: serverData'))
 
     expect(results.length).toBe(2)
-    expect(results[0]).toMatchObject({ data: 'data', isFetching: true })
+    expect(results[0]).toMatchObject({ data: 'initialData', isFetching: true })
     expect(results[1]).toMatchObject({ data: 'serverData', isFetching: false })
   })
 
@@ -3730,7 +3846,11 @@ describe('useQuery', () => {
     const results: DefinedUseQueryResult<number>[] = []
 
     function Page() {
-      const result = useQuery(key, () => 1, { initialData: 0 })
+      const result = useQuery({
+        queryKey: key,
+        queryFn: () => 1,
+        initialData: 0,
+      })
       results.push(result)
       return null
     }
@@ -3744,7 +3864,7 @@ describe('useQuery', () => {
     expect(results[1]).toMatchObject({ data: 1, isFetching: false })
   })
 
-  it('should show the correct data when switching keys with initialData, keepPreviousData & staleTime', async () => {
+  it('should show the correct data when switching keys with initialData, placeholderData & staleTime', async () => {
     const key = queryKey()
 
     const ALL_TODOS = [
@@ -3756,21 +3876,19 @@ describe('useQuery', () => {
 
     function Page() {
       const [filter, setFilter] = React.useState('')
-      const { data: todos } = useQuery(
-        [...key, filter],
-        async () => {
+      const { data: todos } = useQuery({
+        queryKey: [...key, filter],
+        queryFn: async () => {
           return ALL_TODOS.filter((todo) =>
             filter ? todo.priority === filter : true,
           )
         },
-        {
-          initialData() {
-            return filter === '' ? initialTodos : undefined
-          },
-          keepPreviousData: true,
-          staleTime: 5000,
+        initialData() {
+          return filter === '' ? initialTodos : undefined
         },
-      )
+        placeholderData: keepPreviousData,
+        staleTime: 5000,
+      })
 
       return (
         <div>
@@ -3807,7 +3925,9 @@ describe('useQuery', () => {
     function Page() {
       const [shouldFetch, setShouldFetch] = React.useState(true)
 
-      const result = useQuery(key, () => 'fetched data', {
+      const result = useQuery({
+        queryKey: key,
+        queryFn: () => 'fetched data',
         enabled: shouldFetch,
         initialData: shouldFetch ? 'initial' : 'initial falsy',
       })
@@ -3866,16 +3986,18 @@ describe('useQuery', () => {
     const rendered = renderWithClient(queryClient, <Page />)
 
     expect(queryFn).not.toHaveBeenCalled()
-    expect(queryCache.find(key)).not.toBeUndefined()
+    expect(queryCache.find({ queryKey: key })).not.toBeUndefined()
     rendered.getByText('fetchStatus: idle')
   })
 
   // See https://github.com/tannerlinsley/react-query/issues/360
-  test('should init to status:loading, fetchStatus:idle when enabled is false', async () => {
+  test('should init to status:pending, fetchStatus:idle when enabled is false', async () => {
     const key = queryKey()
 
     function Page() {
-      const query = useQuery(key, () => 'data', {
+      const query = useQuery({
+        queryKey: key,
+        queryFn: () => 'data',
         enabled: false,
       })
 
@@ -3890,15 +4012,43 @@ describe('useQuery', () => {
 
     const rendered = renderWithClient(queryClient, <Page />)
 
-    await waitFor(() => rendered.getByText('status: loading, idle'))
+    await waitFor(() => rendered.getByText('status: pending, idle'))
+  })
+
+  test('should not schedule garbage collection, if gcTimeout is set to `Infinity`', async () => {
+    const key = queryKey()
+
+    function Page() {
+      const query = useQuery({
+        queryKey: key,
+        queryFn: () => 'fetched data',
+        gcTime: Infinity,
+      })
+      return <div>{query.data}</div>
+    }
+
+    const rendered = renderWithClient(queryClient, <Page />)
+
+    await waitFor(() => rendered.getByText('fetched data'))
+    jest.useFakeTimers({
+      legacyFakeTimers: true,
+    })
+    const setTimeoutSpy = jest.spyOn(globalThis.window, 'setTimeout')
+
+    rendered.unmount()
+
+    expect(setTimeoutSpy).not.toHaveBeenCalled()
+    jest.useRealTimers()
   })
 
-  test('should not schedule garbage collection, if cacheTimeout is set to `Infinity`', async () => {
+  test('should schedule garbage collection, if gcTimeout is not set to infinity', async () => {
     const key = queryKey()
 
     function Page() {
-      const query = useQuery(key, () => 'fetched data', {
-        cacheTime: Infinity,
+      const query = useQuery({
+        queryKey: key,
+        queryFn: () => 'fetched data',
+        gcTime: 1000 * 60 * 10, //10 Minutes
       })
       return <div>{query.data}</div>
     }
@@ -3907,11 +4057,18 @@ describe('useQuery', () => {
 
     await waitFor(() => rendered.getByText('fetched data'))
 
+    jest.useFakeTimers({
+      legacyFakeTimers: true,
+    })
+    const setTimeoutSpy = jest.spyOn(globalThis.window, 'setTimeout')
+
     rendered.unmount()
 
-    const query = queryCache.find(key)
-    // @ts-expect-error
-    expect(query!.cacheTimeout).toBe(undefined)
+    expect(setTimeoutSpy).toHaveBeenLastCalledWith(
+      expect.any(Function),
+      1000 * 60 * 10,
+    )
+    jest.useRealTimers()
   })
 
   it('should not cause memo churn when data does not change', async () => {
@@ -3920,15 +4077,18 @@ describe('useQuery', () => {
     const memoFn = jest.fn()
 
     function Page() {
-      const result = useQuery(key, async () => {
-        await sleep(10)
-        return (
-          queryFn() || {
-            data: {
-              nested: true,
-            },
-          }
-        )
+      const result = useQuery({
+        queryKey: key,
+        queryFn: async () => {
+          await sleep(10)
+          return (
+            queryFn() || {
+              data: {
+                nested: true,
+              },
+            }
+          )
+        },
       })
 
       React.useMemo(() => {
@@ -3947,7 +4107,7 @@ describe('useQuery', () => {
 
     const rendered = renderWithClient(queryClient, <Page />)
 
-    await waitFor(() => rendered.getByText('status loading'))
+    await waitFor(() => rendered.getByText('status pending'))
     await waitFor(() => rendered.getByText('status success'))
     fireEvent.click(rendered.getByText('refetch'))
     await waitFor(() => rendered.getByText('isFetching true'))
@@ -3962,7 +4122,9 @@ describe('useQuery', () => {
 
     function Page() {
       const [int, setInt] = React.useState(200)
-      const { data } = useQuery(key, () => count++, {
+      const { data } = useQuery({
+        queryKey: key,
+        queryFn: () => count++,
         refetchInterval: int,
       })
 
@@ -3989,16 +4151,14 @@ describe('useQuery', () => {
     const states: UseQueryResult<number>[] = []
 
     function Page() {
-      const queryInfo = useQuery(
-        key,
-        async () => {
+      const queryInfo = useQuery({
+        queryKey: key,
+        queryFn: async () => {
           await sleep(10)
           return count++
         },
-        {
-          refetchInterval: (data = 0) => (data < 2 ? 10 : false),
-        },
-      )
+        refetchInterval: (data = 0) => (data < 2 ? 10 : false),
+      })
 
       states.push(queryInfo)
 
@@ -4020,7 +4180,7 @@ describe('useQuery', () => {
 
     expect(states).toMatchObject([
       {
-        status: 'loading',
+        status: 'pending',
         isFetching: true,
         data: undefined,
       },
@@ -4057,7 +4217,9 @@ describe('useQuery', () => {
     const states: UseQueryResult<number>[] = []
 
     function Page() {
-      const queryInfo = useQuery(key, () => 1, {
+      const queryInfo = useQuery({
+        queryKey: key,
+        queryFn: () => 1,
         refetchInterval: 0,
       })
 
@@ -4076,7 +4238,7 @@ describe('useQuery', () => {
 
     expect(states).toMatchObject([
       {
-        status: 'loading',
+        status: 'pending',
         isFetching: true,
         data: undefined,
       },
@@ -4090,7 +4252,10 @@ describe('useQuery', () => {
 
   it('should accept an empty string as query key', async () => {
     function Page() {
-      const result = useQuery([''], (ctx) => ctx.queryKey)
+      const result = useQuery({
+        queryKey: [''],
+        queryFn: (ctx) => ctx.queryKey,
+      })
       return <>{JSON.stringify(result.data)}</>
     }
 
@@ -4101,7 +4266,10 @@ describe('useQuery', () => {
 
   it('should accept an object as query key', async () => {
     function Page() {
-      const result = useQuery([{ a: 'a' }], (ctx) => ctx.queryKey)
+      const result = useQuery({
+        queryKey: [{ a: 'a' }],
+        queryFn: (ctx) => ctx.queryKey,
+      })
       return <>{JSON.stringify(result.data)}</>
     }
 
@@ -4116,13 +4284,13 @@ describe('useQuery', () => {
     const queryFn = jest.fn<string, unknown[]>().mockReturnValue('data')
 
     function Disabled() {
-      useQuery(key, queryFn, { enabled: false })
+      useQuery({ queryKey: key, queryFn, enabled: false })
       return null
     }
 
     function Page() {
       const [enabled, setEnabled] = React.useState(false)
-      const result = useQuery(key, queryFn, { enabled })
+      const result = useQuery({ queryKey: key, queryFn, enabled })
       return (
         <>
           <Disabled />
@@ -4145,7 +4313,9 @@ describe('useQuery', () => {
     const states: UseQueryResult<string>[] = []
 
     function Page() {
-      const state = useQuery(key1, () => 'data', {
+      const state = useQuery({
+        queryKey: key1,
+        queryFn: () => 'data',
         placeholderData: 'placeholder',
       })
 
@@ -4184,7 +4354,9 @@ describe('useQuery', () => {
     function Page() {
       const [count, setCount] = React.useState(0)
 
-      const state = useQuery(key1, () => 'data', {
+      const state = useQuery({
+        queryKey: key1,
+        queryFn: () => 'data',
         placeholderData: 'placeholder',
         enabled: count === 0,
       })
@@ -4240,7 +4412,9 @@ describe('useQuery', () => {
     const states: UseQueryResult<string>[] = []
 
     function Page() {
-      const state = useQuery(key1, () => 1, {
+      const state = useQuery({
+        queryKey: key1,
+        queryFn: () => 1,
         placeholderData: 23,
         select: (data) => String(data * 2),
       })
@@ -4279,7 +4453,9 @@ describe('useQuery', () => {
     let placeholderFunctionRunCount = 0
 
     function Page() {
-      const state = useQuery(key1, () => 1, {
+      const state = useQuery({
+        queryKey: key1,
+        queryFn: () => 1,
         placeholderData: () => {
           placeholderFunctionRunCount++
           return 23
@@ -4331,23 +4507,21 @@ describe('useQuery', () => {
     function Page() {
       const [count, inc] = React.useReducer((prev) => prev + 1, 2)
 
-      const state = useQuery(
-        key1,
-        async () => {
+      const state = useQuery({
+        queryKey: key1,
+        queryFn: async () => {
           await sleep(10)
           return 0
         },
-        {
-          select: React.useCallback(
-            (data: number) => {
-              selectRun++
-              return `selected ${data + count}`
-            },
-            [count],
-          ),
-          placeholderData: 99,
-        },
-      )
+        select: React.useCallback(
+          (data: number) => {
+            selectRun++
+            return `selected ${data + count}`
+          },
+          [count],
+        ),
+        placeholderData: 99,
+      })
 
       return (
         <div>
@@ -4377,22 +4551,21 @@ describe('useQuery', () => {
       const [count, inc] = React.useReducer((prev) => prev + 1, 2)
       const [forceValue, forceUpdate] = React.useReducer((prev) => prev + 1, 1)
 
-      const state = useQuery(
-        key1,
-        async () => {
+      const state = useQuery({
+        queryKey: key1,
+        queryFn: async () => {
           await sleep(10)
           return 0
         },
-        {
-          select: React.useCallback(
-            (data: number) => {
-              return `selected ${data + count}`
-            },
-            [count],
-          ),
-          placeholderData: 99,
-        },
-      )
+
+        select: React.useCallback(
+          (data: number) => {
+            return `selected ${data + count}`
+          },
+          [count],
+        ),
+        placeholderData: 99,
+      })
 
       return (
         <div>
@@ -4427,16 +4600,15 @@ describe('useQuery', () => {
     function Page() {
       const [forceValue, forceUpdate] = React.useReducer((prev) => prev + 1, 1)
 
-      const state = useQuery(
-        key1,
-        async () => {
+      const state = useQuery({
+        queryKey: key1,
+        queryFn: async () => {
           await sleep(10)
           return [1, 2]
         },
-        {
-          select: (res) => res.map((x) => x + 1),
-        },
-      )
+
+        select: (res) => res.map((x) => x + 1),
+      })
 
       React.useEffect(() => {
         if (state.data) {
@@ -4481,7 +4653,7 @@ describe('useQuery', () => {
     }
 
     function Page() {
-      const state = useQuery(key, queryFn)
+      const state = useQuery({ queryKey: key, queryFn })
       return (
         <div>
           <h1>Status: {state.status}</h1>
@@ -4509,13 +4681,14 @@ describe('useQuery', () => {
       ctx,
     ) => {
       const [, limit] = ctx.queryKey
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
       const value = limit % 2 && ctx.signal ? 'abort' : `data ${limit}`
       await sleep(25)
       return value
     }
 
     function Page(props: { limit: number }) {
-      const state = useQuery([key, props.limit], queryFn)
+      const state = useQuery({ queryKey: [key, props.limit], queryFn })
       states[props.limit] = state
       return (
         <div>
@@ -4540,27 +4713,27 @@ describe('useQuery', () => {
 
     await waitFor(() => expect(states).toHaveLength(4))
 
-    expect(queryCache.find([key, 0])?.state).toMatchObject({
+    expect(queryCache.find({ queryKey: [key, 0] })?.state).toMatchObject({
       data: 'data 0',
       status: 'success',
       dataUpdateCount: 1,
     })
 
-    expect(queryCache.find([key, 1])?.state).toMatchObject({
+    expect(queryCache.find({ queryKey: [key, 1] })?.state).toMatchObject({
       data: undefined,
-      status: 'loading',
+      status: 'pending',
       fetchStatus: 'idle',
     })
 
-    expect(queryCache.find([key, 2])?.state).toMatchObject({
+    expect(queryCache.find({ queryKey: [key, 2] })?.state).toMatchObject({
       data: 'data 2',
       status: 'success',
       dataUpdateCount: 1,
     })
 
-    expect(queryCache.find([key, 3])?.state).toMatchObject({
+    expect(queryCache.find({ queryKey: [key, 3] })?.state).toMatchObject({
       data: undefined,
-      status: 'loading',
+      status: 'pending',
       fetchStatus: 'idle',
     })
   })
@@ -4578,7 +4751,7 @@ describe('useQuery', () => {
       const [id, setId] = React.useState(1)
       const [hasChanged, setHasChanged] = React.useState(false)
 
-      const state = useQuery([key, id], queryFn)
+      const state = useQuery({ queryKey: [key, id], queryFn })
 
       states.push(state)
 
@@ -4596,17 +4769,17 @@ describe('useQuery', () => {
     expect(states.length).toBe(4)
     // Load query 1
     expect(states[0]).toMatchObject({
-      status: 'loading',
+      status: 'pending',
       error: null,
     })
     // Load query 2
     expect(states[1]).toMatchObject({
-      status: 'loading',
+      status: 'pending',
       error: null,
     })
     // Load query 1
     expect(states[2]).toMatchObject({
-      status: 'loading',
+      status: 'pending',
       error: null,
     })
     // Loaded query 1
@@ -4622,21 +4795,23 @@ describe('useQuery', () => {
     let count = 0
 
     function Page() {
-      const state = useQuery(
-        key,
-        async () => {
+      const state = useQuery({
+        queryKey: key,
+        queryFn: async () => {
           await sleep(10)
           count++
           return count
         },
-        { staleTime: Infinity },
-      )
+        staleTime: Infinity,
+      })
 
       states.push(state)
 
       return (
         <div>
-          <button onClick={() => queryClient.resetQueries(key)}>reset</button>
+          <button onClick={() => queryClient.resetQueries({ queryKey: key })}>
+            reset
+          </button>
           <div>data: {state.data ?? 'null'}</div>
           <div>isFetching: {state.isFetching}</div>
         </div>
@@ -4656,28 +4831,28 @@ describe('useQuery', () => {
 
     expect(states[0]).toMatchObject({
       data: undefined,
-      isLoading: true,
+      isPending: true,
       isFetching: true,
       isSuccess: false,
       isStale: true,
     })
     expect(states[1]).toMatchObject({
       data: 1,
-      isLoading: false,
+      isPending: false,
       isFetching: false,
       isSuccess: true,
       isStale: false,
     })
     expect(states[2]).toMatchObject({
       data: undefined,
-      isLoading: true,
+      isPending: true,
       isFetching: true,
       isSuccess: false,
       isStale: true,
     })
     expect(states[3]).toMatchObject({
       data: 2,
-      isLoading: false,
+      isPending: false,
       isFetching: false,
       isSuccess: true,
       isStale: false,
@@ -4690,15 +4865,17 @@ describe('useQuery', () => {
     let count = 0
 
     function Page() {
-      const state = useQuery(
-        key,
-        async () => {
+      const state = useQuery({
+        queryKey: key,
+        queryFn: async () => {
           await sleep(10)
           count++
           return count
         },
-        { staleTime: Infinity, enabled: false, notifyOnChangeProps: 'all' },
-      )
+        staleTime: Infinity,
+        enabled: false,
+        notifyOnChangeProps: 'all',
+      })
 
       states.push(state)
 
@@ -4707,7 +4884,9 @@ describe('useQuery', () => {
       return (
         <div>
           <button onClick={() => refetch()}>refetch</button>
-          <button onClick={() => queryClient.resetQueries(key)}>reset</button>
+          <button onClick={() => queryClient.resetQueries({ queryKey: key })}>
+            reset
+          </button>
           <div>data: {state.data ?? 'null'}</div>
         </div>
       )
@@ -4728,28 +4907,28 @@ describe('useQuery', () => {
 
     expect(states[0]).toMatchObject({
       data: undefined,
-      isLoading: true,
+      isPending: true,
       isFetching: false,
       isSuccess: false,
       isStale: true,
     })
     expect(states[1]).toMatchObject({
       data: undefined,
-      isLoading: true,
+      isPending: true,
       isFetching: true,
       isSuccess: false,
       isStale: true,
     })
     expect(states[2]).toMatchObject({
       data: 1,
-      isLoading: false,
+      isPending: false,
       isFetching: false,
       isSuccess: true,
       isStale: false,
     })
     expect(states[3]).toMatchObject({
       data: undefined,
-      isLoading: true,
+      isPending: true,
       isFetching: false,
       isSuccess: false,
       isStale: true,
@@ -4772,7 +4951,7 @@ describe('useQuery', () => {
         renders++
       })
 
-      useQuery(key, () => 'test', { queryKeyHashFn })
+      useQuery({ queryKey: key, queryFn: () => 'test', queryKeyHashFn })
       return null
     }
 
@@ -4791,7 +4970,9 @@ describe('useQuery', () => {
     })
 
     function Page({ enabled }: { enabled: boolean }) {
-      const { error, isLoading } = useQuery(['key'], queryFn, {
+      const { error, isPending } = useQuery({
+        queryKey: ['key'],
+        queryFn,
         enabled,
         retry: false,
         retryOnMount: false,
@@ -4799,8 +4980,8 @@ describe('useQuery', () => {
         refetchOnWindowFocus: false,
       })
 
-      if (isLoading) {
-        return <div>status: loading</div>
+      if (isPending) {
+        return <div>status: pending</div>
       }
       if (error instanceof Error) {
         return <div>error</div>
@@ -4824,7 +5005,7 @@ describe('useQuery', () => {
     const rendered = renderWithClient(queryClient, <App />)
 
     // initial state check
-    rendered.getByText('status: loading')
+    rendered.getByText('status: pending')
 
     // // render error state component
     await waitFor(() => rendered.getByText('error'))
@@ -4842,9 +5023,9 @@ describe('useQuery', () => {
 
   it('should refetch when query key changed when previous status is error', async () => {
     function Page({ id }: { id: number }) {
-      const { error, isLoading } = useQuery(
-        [id],
-        async () => {
+      const { error, isPending } = useQuery({
+        queryKey: [id],
+        queryFn: async () => {
           await sleep(10)
           if (id % 2 === 1) {
             return Promise.reject(new Error('Error'))
@@ -4852,16 +5033,14 @@ describe('useQuery', () => {
             return 'data'
           }
         },
-        {
-          retry: false,
-          retryOnMount: false,
-          refetchOnMount: false,
-          refetchOnWindowFocus: false,
-        },
-      )
+        retry: false,
+        retryOnMount: false,
+        refetchOnMount: false,
+        refetchOnWindowFocus: false,
+      })
 
-      if (isLoading) {
-        return <div>status: loading</div>
+      if (isPending) {
+        return <div>status: pending</div>
       }
       if (error instanceof Error) {
         return <div>error</div>
@@ -4885,7 +5064,7 @@ describe('useQuery', () => {
     const rendered = renderWithClient(queryClient, <App />)
 
     // initial state check
-    rendered.getByText('status: loading')
+    rendered.getByText('status: pending')
 
     // render error state component
     await waitFor(() => rendered.getByText('error'))
@@ -4901,19 +5080,17 @@ describe('useQuery', () => {
 
   it('should refetch when query key changed when switching between erroneous queries', async () => {
     function Page({ id }: { id: boolean }) {
-      const { error, isFetching } = useQuery(
-        [id],
-        async () => {
+      const { error, isFetching } = useQuery({
+        queryKey: [id],
+        queryFn: async () => {
           await sleep(10)
           return Promise.reject<unknown>(new Error('Error'))
         },
-        {
-          retry: false,
-          retryOnMount: false,
-          refetchOnMount: false,
-          refetchOnWindowFocus: false,
-        },
-      )
+        retry: false,
+        retryOnMount: false,
+        refetchOnMount: false,
+        refetchOnWindowFocus: false,
+      })
 
       if (isFetching) {
         return <div>status: fetching</div>
@@ -4956,7 +5133,7 @@ describe('useQuery', () => {
     await waitFor(() => rendered.getByText('error'))
   })
 
-  it('should have no error in loading state when refetching after error occurred', async () => {
+  it('should have no error in pending state when refetching after error occurred', async () => {
     const key = queryKey()
     const states: UseQueryResult<number>[] = []
     const error = new Error('oops')
@@ -4964,9 +5141,9 @@ describe('useQuery', () => {
     let count = 0
 
     function Page() {
-      const state = useQuery(
-        key,
-        async () => {
+      const state = useQuery({
+        queryKey: key,
+        queryFn: async () => {
           await sleep(10)
           if (count === 0) {
             count++
@@ -4974,15 +5151,13 @@ describe('useQuery', () => {
           }
           return 5
         },
-        {
-          retry: false,
-        },
-      )
+        retry: false,
+      })
 
       states.push(state)
 
-      if (state.isLoading) {
-        return <div>status: loading</div>
+      if (state.isPending) {
+        return <div>status: pending</div>
       }
       if (state.error instanceof Error) {
         return (
@@ -5005,7 +5180,7 @@ describe('useQuery', () => {
     await waitFor(() => expect(states.length).toBe(4))
 
     expect(states[0]).toMatchObject({
-      status: 'loading',
+      status: 'pending',
       data: undefined,
       error: null,
     })
@@ -5017,7 +5192,7 @@ describe('useQuery', () => {
     })
 
     expect(states[2]).toMatchObject({
-      status: 'loading',
+      status: 'pending',
       data: undefined,
       error: null,
     })
@@ -5061,7 +5236,7 @@ describe('useQuery', () => {
 
       const rendered = renderWithClient(queryClient, <Page />)
 
-      await waitFor(() => rendered.getByText('status: loading, isPaused: true'))
+      await waitFor(() => rendered.getByText('status: pending, isPaused: true'))
 
       onlineMock.mockReturnValue(true)
       window.dispatchEvent(new Event('online'))
@@ -5186,7 +5361,7 @@ describe('useQuery', () => {
         rendered.getByText('status: success, fetchStatus: paused'),
       )
 
-      window.dispatchEvent(new FocusEvent('focus'))
+      window.dispatchEvent(new Event('visibilitychange'))
       await sleep(15)
 
       await waitFor(() =>
@@ -5230,7 +5405,7 @@ describe('useQuery', () => {
       const rendered = renderWithClient(queryClient, <Page />)
 
       await waitFor(() =>
-        rendered.getByText('status: loading, fetchStatus: paused'),
+        rendered.getByText('status: pending, fetchStatus: paused'),
       )
 
       fireEvent.click(rendered.getByRole('button', { name: /invalidate/i }))
@@ -5239,7 +5414,7 @@ describe('useQuery', () => {
 
       // invalidation should not trigger a refetch
       await waitFor(() =>
-        rendered.getByText('status: loading, fetchStatus: paused'),
+        rendered.getByText('status: pending, fetchStatus: paused'),
       )
 
       expect(count).toBe(0)
@@ -5352,7 +5527,7 @@ describe('useQuery', () => {
 
       // triggers a second pause
       act(() => {
-        window.dispatchEvent(new FocusEvent('focus'))
+        window.dispatchEvent(new Event('visibilitychange'))
       })
 
       onlineMock.mockReturnValue(true)
@@ -5402,7 +5577,7 @@ describe('useQuery', () => {
 
       await waitFor(() =>
         rendered.getByText(
-          'status: loading, fetchStatus: fetching, failureCount: 1',
+          'status: pending, fetchStatus: fetching, failureCount: 1',
         ),
       )
       await waitFor(() => rendered.getByText('failureReason: failed1'))
@@ -5413,7 +5588,7 @@ describe('useQuery', () => {
 
       await waitFor(() =>
         rendered.getByText(
-          'status: loading, fetchStatus: paused, failureCount: 1',
+          'status: pending, fetchStatus: paused, failureCount: 1',
         ),
       )
       await waitFor(() => rendered.getByText('failureReason: failed1'))
@@ -5473,7 +5648,7 @@ describe('useQuery', () => {
       const rendered = renderWithClient(queryClient, <Page />)
 
       await waitFor(() =>
-        rendered.getByText('status: loading, fetchStatus: paused'),
+        rendered.getByText('status: pending, fetchStatus: paused'),
       )
 
       fireEvent.click(rendered.getByRole('button', { name: /hide/i }))
@@ -5530,13 +5705,13 @@ describe('useQuery', () => {
       const rendered = renderWithClient(queryClient, <Page />)
 
       await waitFor(() =>
-        rendered.getByText('status: loading, fetchStatus: paused'),
+        rendered.getByText('status: pending, fetchStatus: paused'),
       )
 
       fireEvent.click(rendered.getByRole('button', { name: /cancel/i }))
 
       await waitFor(() =>
-        rendered.getByText('status: loading, fetchStatus: idle'),
+        rendered.getByText('status: pending, fetchStatus: idle'),
       )
 
       expect(count).toBe(0)
@@ -5547,7 +5722,7 @@ describe('useQuery', () => {
       await sleep(15)
 
       await waitFor(() =>
-        rendered.getByText('status: loading, fetchStatus: idle'),
+        rendered.getByText('status: pending, fetchStatus: idle'),
       )
 
       expect(count).toBe(0)
@@ -5562,10 +5737,10 @@ describe('useQuery', () => {
       function Component() {
         const state = useQuery({
           queryKey: key,
-          queryFn: async ({ signal }) => {
+          queryFn: async ({ signal: _signal }) => {
             count++
             await sleep(10)
-            return `${signal ? 'signal' : 'data'}${count}`
+            return `signal${count}`
           },
         })
 
@@ -5750,7 +5925,7 @@ describe('useQuery', () => {
 
       await waitFor(() =>
         rendered.getByText(
-          'status: loading, fetchStatus: paused, failureCount: 1',
+          'status: pending, fetchStatus: paused, failureCount: 1',
         ),
       )
       await waitFor(() => rendered.getByText('failureReason: failed1'))
@@ -5781,7 +5956,9 @@ describe('useQuery', () => {
     }
 
     function Page() {
-      const state = useQuery(key, queryFn, {
+      const state = useQuery({
+        queryKey: key,
+        queryFn,
         retry: false,
         retryOnMount: false,
       })
@@ -5791,7 +5968,7 @@ describe('useQuery', () => {
       return <></>
     }
 
-    await queryClient.prefetchQuery(key, queryFn)
+    await queryClient.prefetchQuery({ queryKey: key, queryFn })
     renderWithClient(queryClient, <Page />)
 
     await waitFor(() => expect(states).toHaveLength(1))
@@ -5807,7 +5984,11 @@ describe('useQuery', () => {
     const onSuccess = jest.fn()
 
     function Page() {
-      const state = useQuery(key, () => 'data', { onSuccess })
+      const state = useQuery({
+        queryKey: key,
+        queryFn: () => 'data',
+        onSuccess,
+      })
       return (
         <div>
           <div>data: {state.data}</div>
@@ -5832,14 +6013,16 @@ describe('useQuery', () => {
     const key = queryKey()
 
     function Page() {
-      const state = useQuery(key, () => 'data')
+      const state = useQuery({ queryKey: key, queryFn: () => 'data' })
       return (
         <div>
           <div>data: {state.data}</div>
           <div>dataUpdatedAt: {state.dataUpdatedAt}</div>
           <button
             onClick={() =>
-              queryClient.setQueryData(key, 'newData', { updatedAt: 100 })
+              queryClient.setQueryData(key, 'newData', {
+                updatedAt: 100,
+              })
             }
           >
             setQueryData
@@ -5863,15 +6046,13 @@ describe('useQuery', () => {
     const error = new Error('oops')
 
     function Page() {
-      const { refetch, errorUpdateCount } = useQuery(
-        key,
-        async (): Promise<unknown> => {
+      const { refetch, errorUpdateCount } = useQuery({
+        queryKey: key,
+        queryFn: async (): Promise<unknown> => {
           throw error
         },
-        {
-          retry: false,
-        },
-      )
+        retry: false,
+      })
       return (
         <div>
           <button onClick={() => refetch()}>refetch</button>
@@ -5887,4 +6068,27 @@ describe('useQuery', () => {
     fireEvent.click(fetchBtn)
     await waitFor(() => rendered.getByText('data: 3'))
   })
+
+  it('should use provided custom queryClient', async () => {
+    const key = queryKey()
+    const queryFn = async () => {
+      return Promise.resolve('custom client')
+    }
+
+    function Page() {
+      const { data } = useQuery(
+        {
+          queryKey: key,
+          queryFn,
+        },
+        queryClient,
+      )
+
+      return <div>data: {data}</div>
+    }
+
+    const rendered = render(<Page></Page>)
+
+    await waitFor(() => rendered.getByText('data: custom client'))
+  })
 })