@tanstack/solid-query 4.24.10 → 5.0.0-alpha.1

package/src/__tests__/createQuery.test.tsx

@@ -17,12 +17,16 @@ import type {
   DefinedCreateQueryResult,
   QueryFunction,
 } from '..'
-import { createQuery, QueryCache, QueryClientProvider } from '..'
+import {
+  createQuery,
+  QueryCache,
+  QueryClientProvider,
+  keepPreviousData,
+} from '..'
 import {
   Blink,
   createQueryClient,
   expectType,
-  mockLogger,
   mockNavigatorOnLine,
   mockVisibilityState,
   queryKey,
@@ -41,70 +45,76 @@ describe('createQuery', () => {
     // eslint-disable-next-line
     function Page() {
       // unspecified query function should default to unknown
-      const noQueryFn = createQuery(key)
+      const noQueryFn = createQuery(() => ({ queryKey: key }))
       expectType<unknown>(noQueryFn.data)
       expectType<unknown>(noQueryFn.error)
 
       // it should infer the result type from the query function
-      const fromQueryFn = createQuery(key, () => 'test')
+      const fromQueryFn = createQuery(() => ({
+        queryKey: key,
+        queryFn: () => 'test',
+      }))
       expectType<string | undefined>(fromQueryFn.data)
       expectType<unknown>(fromQueryFn.error)
 
       // it should be possible to specify the result type
-      const withResult = createQuery<string>(key, () => 'test')
+      const withResult = createQuery<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 = createQuery<string, Error>(key, () => 'test')
+      const withError = createQuery<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
-      createQuery(
-        () => [key()],
-        async () => true,
-        {
-          onSuccess: (data) => expectType<boolean>(data),
-          onSettled: (data) => expectType<boolean | undefined>(data),
-        },
-      )
+      createQuery(() => ({
+        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 = createQuery(
-        key,
-        () => (Math.random() > 0.5 ? 'a' : 'b'),
-        {
-          onSuccess: (data) => expectType<'a' | 'b'>(data),
-        },
-      )
+      const unionTypeSync = createQuery(() => ({
+        queryKey: key,
+        queryFn: () => (Math.random() > 0.5 ? 'a' : 'b'),
+        onSuccess: (data) => expectType<'a' | 'b'>(data),
+      }))
       expectType<'a' | 'b' | undefined>(unionTypeSync.data)
-      const unionTypeAsync = createQuery<'a' | 'b'>(
-        key,
-        () => Promise.resolve(Math.random() > 0.5 ? 'a' : 'b'),
-        {
-          onSuccess: (data) => expectType<'a' | 'b'>(data),
-        },
-      )
+      const unionTypeAsync = createQuery<'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
-      createQuery<number>(key, () => 'test')
+      createQuery<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 = createQuery(key, () => queryFn())
+      const fromGenericQueryFn = createQuery(() => ({
+        queryKey: key,
+        queryFn: () => queryFn(),
+      }))
       expectType<string | undefined>(fromGenericQueryFn.data)
       expectType<unknown>(fromGenericQueryFn.error)
 
-      const fromGenericOptionsQueryFn = createQuery({
+      const fromGenericOptionsQueryFn = createQuery(() => ({
         queryKey: key,
         queryFn: () => queryFn(),
-      })
+      }))
       expectType<string | undefined>(fromGenericOptionsQueryFn.data)
       expectType<unknown>(fromGenericOptionsQueryFn.error)
 
@@ -117,38 +127,39 @@ describe('createQuery', () => {
         return n + 42
       }
 
-      createQuery({
-        queryKey: () => ['my-data', 100] as const,
+      createQuery(() => ({
+        queryKey: ['my-data', 100] as const,
         queryFn: getMyDataArrayKey,
-      })
+      }))
 
-      const getMyDataStringKey: QueryFunction<MyData, readonly ['1']> = async (
+      const getMyDataStringKey: QueryFunction<MyData, ['1']> = async (
         context,
       ) => {
-        expectType<readonly ['1']>(context.queryKey)
+        expectType<['1']>(context.queryKey)
         return Number(context.queryKey[0]) + 42
       }
 
-      createQuery({
-        queryKey: () => ['1'] as const,
+      createQuery(() => ({
+        queryKey: ['1'] as ['1'],
         queryFn: getMyDataStringKey,
-      })
+      }))
 
       // it should handle query-functions that return Promise<any>
-      createQuery(key, () =>
-        fetch('return Promise<any>').then((resp) => resp.json()),
-      )
+      createQuery(() => ({
+        queryKey: key,
+        queryFn: () => fetch('return Promise<any>').then((resp) => resp.json()),
+      }))
 
       // handles wrapped queries with custom fetcher passed as inline queryFn
       const useWrappedQuery = <
-        TQueryKey extends () => [string, Record<string, unknown>?],
+        TQueryKey extends [string, Record<string, unknown>?],
         TQueryFnData,
         TError,
         TData = TQueryFnData,
       >(
         qk: TQueryKey,
         fetcher: (
-          obj: ReturnType<TQueryKey>[1],
+          obj: TQueryKey[1],
           token: string,
           // return type must be wrapped with TQueryFnReturn
         ) => Promise<TQueryFnData>,
@@ -156,16 +167,18 @@ describe('createQuery', () => {
           CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
           'queryKey' | 'queryFn' | 'initialData'
         >,
-      ) => createQuery(qk, () => fetcher(qk()[1], 'token'), options)
-      const test = useWrappedQuery(
-        () => [''],
-        async () => '1',
-      )
+      ) =>
+        createQuery(() => ({
+          queryKey: qk,
+          queryFn: () => fetcher(qk[1], 'token'),
+          ...options,
+        }))
+      const test = useWrappedQuery([''], async () => '1')
       expectType<string | undefined>(test.data)
 
       // handles wrapped queries with custom fetcher passed directly to createQuery
       const useWrappedFuncStyleQuery = <
-        TQueryKey extends () => [string, Record<string, unknown>?],
+        TQueryKey extends [string, Record<string, unknown>?],
         TQueryFnData,
         TError,
         TData = TQueryFnData,
@@ -176,11 +189,8 @@ describe('createQuery', () => {
           CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
           'queryKey' | 'queryFn' | 'initialData'
         >,
-      ) => createQuery(qk, fetcher, options)
-      const testFuncStyle = useWrappedFuncStyleQuery(
-        () => [''],
-        async () => true,
-      )
+      ) => createQuery(() => ({ queryKey: qk, queryFn: fetcher, ...options }))
+      const testFuncStyle = useWrappedFuncStyleQuery([''], async () => true)
       expectType<boolean | undefined>(testFuncStyle.data)
     }
   })
@@ -190,10 +200,13 @@ describe('createQuery', () => {
     const key = queryKey()
 
     function Page() {
-      const state = createQuery(key, async () => {
-        await sleep(10)
-        return 'test'
-      })
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn: async () => {
+          await sleep(10)
+          return 'test'
+        },
+      }))
 
       return (
         <div>
@@ -218,16 +231,19 @@ describe('createQuery', () => {
     const states: CreateQueryResult<string>[] = []
 
     function Page(): JSX.Element {
-      const state = createQuery<string, Error>(key, async () => {
-        await sleep(10)
-        return 'test'
-      })
+      const state = createQuery<string, Error>(() => ({
+        queryKey: key,
+        queryFn: async () => {
+          await sleep(10)
+          return 'test'
+        },
+      }))
 
       createRenderEffect(() => {
         states.push({ ...state })
       })
 
-      if (state.isLoading) {
+      if (state.isPending) {
         expectType<undefined>(state.data)
         expectType<null>(state.error)
       } else if (state.isLoadingError) {
@@ -240,8 +256,8 @@ describe('createQuery', () => {
 
       return (
         <Switch fallback={<span>{state.data}</span>}>
-          <Match when={state.isLoading}>
-            <span>loading</span>
+          <Match when={state.isPending}>
+            <span>pending</span>
           </Match>
           <Match when={state.isLoadingError}>
             <span>{state.error!.message}</span>
@@ -273,18 +289,17 @@ describe('createQuery', () => {
       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',
     })
 
@@ -301,17 +316,16 @@ describe('createQuery', () => {
       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',
     })
@@ -320,17 +334,15 @@ describe('createQuery', () => {
   it('should return the correct states for an unsuccessful query', async () => {
     const key = queryKey()
 
-    const states: CreateQueryResult<undefined, string>[] = []
+    const states: CreateQueryResult<unknown, Error>[] = []
 
     function Page() {
-      const state = createQuery<string[], string, undefined>(
-        key,
-        () => Promise.reject('rejected'),
-        {
-          retry: 1,
-          retryDelay: 1,
-        },
-      )
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn: () => Promise.reject(new Error('rejected')),
+        retry: 1,
+        retryDelay: 1,
+      }))
 
       createRenderEffect(() => {
         states.push({ ...state })
@@ -340,7 +352,7 @@ describe('createQuery', () => {
         <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>
       )
     }
@@ -366,18 +378,17 @@ describe('createQuery', () => {
       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',
     })
 
@@ -387,52 +398,50 @@ describe('createQuery', () => {
       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',
     })
@@ -442,11 +451,16 @@ describe('createQuery', () => {
     const key = queryKey()
     const states: CreateQueryResult<string>[] = []
 
-    // TODO(lukemurray): do we want reactivity on this key?
-    await queryClient.prefetchQuery(key(), () => 'prefetched')
+    await queryClient.prefetchQuery({
+      queryKey: key,
+      queryFn: () => 'prefetched',
+    })
 
     function Page() {
-      const state = createQuery(key, () => 'data')
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn: () => 'data',
+      }))
       createRenderEffect(() => {
         states.push({ ...state })
       })
@@ -480,14 +494,14 @@ describe('createQuery', () => {
     const onSuccess = jest.fn()
 
     function Page() {
-      const state = createQuery(
-        key,
-        async () => {
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn: async () => {
           await sleep(10)
           return 'data'
         },
-        { onSuccess },
-      )
+        onSuccess,
+      }))
       createRenderEffect(() => {
         states.push({ ...state })
       })
@@ -506,65 +520,18 @@ describe('createQuery', () => {
     expect(onSuccess).toHaveBeenCalledWith('data')
   })
 
-  it('should call onSuccess after a query has been refetched', async () => {
-    const key = queryKey()
-    const states: CreateQueryResult<string>[] = []
-    const onSuccess = jest.fn()
-    let count = 0
-
-    function Page() {
-      const state = createQuery(
-        key,
-        async () => {
-          count++
-          await sleep(10)
-          return 'data' + count
-        },
-        { onSuccess },
-      )
-
-      createRenderEffect(
-        on(
-          () => [state.data, state.refetch],
-          () => {
-            states.push(state)
-          },
-        ),
-      )
-
-      return (
-        <div>
-          <div>data: {state.data}</div>
-          <button onClick={() => state.refetch()}>refetch</button>
-        </div>
-      )
-    }
-
-    render(() => (
-      <QueryClientProvider client={queryClient}>
-        <Page />
-      </QueryClientProvider>
-    ))
-
-    await screen.findByText('data: data1')
-    fireEvent.click(screen.getByRole('button', { name: /refetch/i }))
-    await screen.findByText('data: data2')
-
-    expect(states.length).toBe(3) //loading, success, success after refetch
-    expect(count).toBe(2)
-    expect(onSuccess).toHaveBeenCalledTimes(2)
-  })
-
   it('should call onSuccess after a disabled query has been fetched', async () => {
     const key = queryKey()
     const states: CreateQueryResult<string>[] = []
     const onSuccess = jest.fn()
 
     function Page() {
-      const state = createQuery(key, () => 'data', {
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn: () => 'data',
         enabled: false,
         onSuccess,
-      })
+      }))
 
       createRenderEffect(() => {
         states.push({ ...state })
@@ -606,14 +573,14 @@ describe('createQuery', () => {
     }
 
     function Component() {
-      const state = createQuery(
-        key,
-        async () => {
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn: async () => {
           await sleep(10)
           return 'data'
         },
-        { onSuccess },
-      )
+        onSuccess,
+      }))
       createRenderEffect(() => {
         states.push({ ...state })
       })
@@ -637,10 +604,13 @@ describe('createQuery', () => {
     const onError = jest.fn()
 
     function Page() {
-      const state = createQuery<unknown>(key, () => Promise.reject('error'), {
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn: () => Promise.reject(new Error('error')),
         retry: false,
         onError,
-      })
+      }))
+
       createRenderEffect(() => {
         states.push({ ...state })
       })
@@ -657,7 +627,7 @@ describe('createQuery', () => {
     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 () => {
@@ -665,16 +635,14 @@ describe('createQuery', () => {
     const onError = jest.fn()
 
     function Page() {
-      const state = createQuery(
-        key,
-        async () => {
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn: async () => {
           await sleep(10)
           return 23
         },
-        {
-          onError,
-        },
-      )
+        onError,
+      }))
       return (
         <span>
           status: {state.status}, fetchStatus: {state.fetchStatus}
@@ -689,9 +657,9 @@ describe('createQuery', () => {
     ))
 
     await sleep(5)
-    await queryClient.cancelQueries(key())
+    await queryClient.cancelQueries({ queryKey: key })
     // query cancellation will reset the query to it's initial state
-    await waitFor(() => screen.getByText('status: loading, fetchStatus: idle'))
+    await waitFor(() => screen.getByText('status: pending, fetchStatus: idle'))
     expect(onError).not.toHaveBeenCalled()
   })
 
@@ -701,7 +669,12 @@ describe('createQuery', () => {
     const onSettled = jest.fn()
 
     function Page() {
-      const state = createQuery(key, () => 'data', { onSettled })
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn: () => 'data',
+        onSettled,
+      }))
+
       createRenderEffect(() => {
         states.push({ ...state })
       })
@@ -726,10 +699,12 @@ describe('createQuery', () => {
     const onSettled = jest.fn()
 
     function Page() {
-      const state = createQuery(key, () => Promise.reject<unknown>('error'), {
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn: () => Promise.reject<unknown>('error'),
         retry: false,
         onSettled,
-      })
+      }))
       createRenderEffect(() => {
         states.push({ ...state })
       })
@@ -753,15 +728,16 @@ describe('createQuery', () => {
     let fetchCount = 0
 
     function Page() {
-      const state = createQuery(
-        key,
-        async () => {
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn: async () => {
           fetchCount++
           await sleep(10)
           return 'data'
         },
-        { enabled: false, initialData: 'initialData' },
-      )
+        enabled: false,
+        initialData: 'initialData',
+      }))
 
       createEffect(() => {
         setActTimeout(() => {
@@ -791,15 +767,16 @@ describe('createQuery', () => {
     let fetchCount = 0
 
     function Page() {
-      const state = createQuery(
-        key,
-        async () => {
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn: async () => {
           fetchCount++
           await sleep(10)
           return 'data'
         },
-        { enabled: false, initialData: 'initialData' },
-      )
+        enabled: false,
+        initialData: 'initialData',
+      }))
 
       createEffect(() => {
         setActTimeout(() => {
@@ -829,15 +806,15 @@ describe('createQuery', () => {
     let fetchCount = 0
 
     function Page() {
-      const state = createQuery(
-        key,
-        async () => {
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn: async () => {
           fetchCount++
           await sleep(10)
           return 'data'
         },
-        { enabled: false },
-      )
+        enabled: false,
+      }))
 
       createEffect(() => {
         setActTimeout(() => {
@@ -866,11 +843,10 @@ describe('createQuery', () => {
     const key = queryKey()
     const states: CreateQueryResult<string>[] = []
 
-    // TODO(lukemurray): do we want this to be reactive.
-    queryClient.setQueryDefaults(key(), { queryFn: () => 'data' })
+    queryClient.setQueryDefaults(key, { queryFn: () => 'data' })
 
     function Page() {
-      const state = createQuery<string>(key)
+      const state = createQuery<string>(() => ({ queryKey: key }))
       createRenderEffect(() => {
         states.push({ ...state })
       })
@@ -890,7 +866,7 @@ describe('createQuery', () => {
     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: CreateQueryResult<string>[] = []
 
@@ -913,17 +889,14 @@ describe('createQuery', () => {
     }
 
     function Component({ value }: { value: string }) {
-      const state = createQuery(
-        key,
-        async () => {
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn: async () => {
           await sleep(10)
           return 'data: ' + value
         },
-        {
-          cacheTime: 0,
-          notifyOnChangeProps: 'all',
-        },
-      )
+        gcTime: 0,
+      }))
       createRenderEffect(() => {
         states.push({ ...state })
       })
@@ -949,64 +922,43 @@ describe('createQuery', () => {
     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.skip('should not get into an infinite loop when removing a query with cacheTime 0 and rerendering', async () => {
+  it('should fetch when refetchOnMount is false and nothing has been fetched yet', async () => {
     const key = queryKey()
     const states: CreateQueryResult<string>[] = []
 
     function Page() {
-      //@ts-expect-error -- skip this test
-      const [, rerender] = NotReact.useState({})
-
-      const state = createQuery(
-        key,
-        async () => {
-          await sleep(5)
-          return 'data'
-        },
-        {
-          cacheTime: 0,
-          notifyOnChangeProps: 'all',
-        },
-      )
-
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn: () => 'test',
+        refetchOnMount: false,
+      }))
       createRenderEffect(() => {
         states.push({ ...state })
       })
-
-      const { remove } = state
-
-      //@ts-expect-error skip this test
-      NotReact.useEffect(() => {
-        setActTimeout(() => {
-          remove()
-          rerender({})
-        }, 20)
-      }, [remove])
-
       return null
     }
 
@@ -1016,29 +968,25 @@ describe('createQuery', () => {
       </QueryClientProvider>
     ))
 
-    await sleep(100)
+    await sleep(10)
 
-    expect(states.length).toBe(5)
-    // First load
-    expect(states[0]).toMatchObject({ isLoading: true, isSuccess: false })
-    // First success
-    expect(states[1]).toMatchObject({ isLoading: false, isSuccess: true })
-    // Remove
-    expect(states[2]).toMatchObject({ isLoading: true, isSuccess: false })
-    // Hook state update
-    expect(states[3]).toMatchObject({ isLoading: true, isSuccess: false })
-    // Second success
-    expect(states[4]).toMatchObject({ isLoading: false, isSuccess: true })
+    expect(states.length).toBe(2)
+    expect(states[0]).toMatchObject({ data: undefined })
+    expect(states[1]).toMatchObject({ data: 'test' })
   })
 
-  it('should fetch when refetchOnMount is false and nothing has been fetched yet', async () => {
+  it('should not fetch when refetchOnMount is false and data has been fetched already', async () => {
     const key = queryKey()
     const states: CreateQueryResult<string>[] = []
 
+    queryClient.setQueryData(key, 'prefetched')
+
     function Page() {
-      const state = createQuery(key, () => 'test', {
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn: () => 'test',
         refetchOnMount: false,
-      })
+      }))
       createRenderEffect(() => {
         states.push({ ...state })
       })
@@ -1053,21 +1001,20 @@ describe('createQuery', () => {
 
     await sleep(10)
 
-    expect(states.length).toBe(2)
-    expect(states[0]).toMatchObject({ data: undefined })
-    expect(states[1]).toMatchObject({ data: 'test' })
+    expect(states.length).toBe(1)
+    expect(states[0]).toMatchObject({ data: 'prefetched' })
   })
 
-  it('should not fetch when refetchOnMount is false and data has been fetched already', async () => {
+  it('should be able to select a part of the data with select', async () => {
     const key = queryKey()
     const states: CreateQueryResult<string>[] = []
 
-    queryClient.setQueryData(key(), 'prefetched')
-
     function Page() {
-      const state = createQuery(key, () => 'test', {
-        refetchOnMount: false,
-      })
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn: () => ({ name: 'test' }),
+        select: (data) => data.name,
+      }))
       createRenderEffect(() => {
         states.push({ ...state })
       })
@@ -1082,18 +1029,21 @@ describe('createQuery', () => {
 
     await sleep(10)
 
-    expect(states.length).toBe(1)
-    expect(states[0]).toMatchObject({ data: 'prefetched' })
+    expect(states.length).toBe(2)
+    expect(states[0]).toMatchObject({ data: undefined })
+    expect(states[1]).toMatchObject({ data: 'test' })
   })
 
-  it('should be able to select a part of the data with select', async () => {
+  it('should be able to select a part of the data with select in object syntax', async () => {
     const key = queryKey()
     const states: CreateQueryResult<string>[] = []
 
     function Page() {
-      const state = createQuery(key, () => ({ name: 'test' }), {
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn: () => ({ name: 'test' }),
         select: (data) => data.name,
-      })
+      }))
       createRenderEffect(() => {
         states.push({ ...state })
       })
@@ -1118,11 +1068,11 @@ describe('createQuery', () => {
     const states: CreateQueryResult<string>[] = []
 
     function Page() {
-      const state = createQuery({
+      const state = createQuery(() => ({
         queryKey: key,
         queryFn: () => ({ name: 'test' }),
         select: (data) => data.name,
-      })
+      }))
       createRenderEffect(() => {
         states.push({ ...state })
       })
@@ -1147,23 +1097,26 @@ describe('createQuery', () => {
     const states: CreateQueryResult<string>[] = []
 
     function Page() {
-      const state = createQuery(key, () => ({ name: 'test' }), {
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn: async () => {
+          await sleep(10)
+          return { name: 'test' }
+        },
         select: (data) => data.name,
         notifyOnChangeProps: ['data'],
-      })
+      }))
 
       createRenderEffect(() => {
         states.push({ ...state })
       })
 
-      createEffect(() => {
-        const refetch = state.refetch
-        setActTimeout(() => {
-          refetch()
-        }, 5)
-      })
-
-      return null
+      return (
+        <div>
+          data: {state.data}
+          <button onClick={() => state.refetch()}>refetch</button>
+        </div>
+      )
     }
 
     render(() => (
@@ -1172,7 +1125,7 @@ describe('createQuery', () => {
       </QueryClientProvider>
     ))
 
-    await sleep(10)
+    await waitFor(() => screen.getByText('data: test'))
 
     expect(states.length).toBe(2)
     expect(states[0]).toMatchObject({ data: undefined })
@@ -1185,11 +1138,13 @@ describe('createQuery', () => {
     const error = new Error('Select Error')
 
     function Page() {
-      const state = createQuery(key, () => ({ name: 'test' }), {
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn: () => ({ name: 'test' }),
         select: () => {
           throw error
         },
-      })
+      }))
       createRenderEffect(() => {
         states.push({ ...state })
       })
@@ -1204,65 +1159,24 @@ describe('createQuery', () => {
 
     await sleep(10)
 
-    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 })
   })
 
-  it.skip('should not re-run a stable select when it re-renders if selector throws an error', async () => {
-    const key = queryKey()
-    const error = new Error('Select Error')
-    let runs = 0
-
-    function Page() {
-      //@ts-expect-error -- we skip this test, and no such thing as rerender in solid
-      const [, rerender] = NotReact.useReducer(() => ({}), {})
-      const state = createQuery<string, Error>(
-        key,
-        () => (runs === 0 ? 'test' : 'test2'),
-        {
-          select: () => {
-            runs++
-            throw error
-          },
-        },
-      )
-      return (
-        <div>
-          <div>error: {state.error?.message}</div>
-          <button onClick={rerender}>rerender</button>
-          <button onClick={() => state.refetch()}>refetch</button>
-        </div>
-      )
-    }
-
-    render(() => (
-      <QueryClientProvider client={queryClient}>
-        <Page />
-      </QueryClientProvider>
-    ))
-
-    await waitFor(() => screen.getByText('error: Select Error'))
-    expect(runs).toEqual(1)
-    fireEvent.click(screen.getByRole('button', { name: 'rerender' }))
-    await sleep(10)
-    expect(runs).toEqual(1)
-    fireEvent.click(screen.getByRole('button', { name: 'refetch' }))
-    await sleep(10)
-    expect(runs).toEqual(2)
-  })
-
   it('should track properties and only re-render when a tracked property changes', async () => {
     const key = queryKey()
     const states: CreateQueryResult<string>[] = []
 
     function Page() {
-      const state = createQuery(key, async () => {
-        await sleep(10)
-        return 'test'
-      })
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn: async () => {
+          await sleep(10)
+          return 'test'
+        },
+      }))
 
       createRenderEffect(() => {
         states.push({ ...state })
@@ -1291,129 +1205,40 @@ describe('createQuery', () => {
       </QueryClientProvider>
     ))
 
-    await waitFor(() => screen.getByText('test'))
-
-    expect(states.length).toBe(2)
-    expect(states[0]).toMatchObject({ data: undefined })
-    expect(states[1]).toMatchObject({ data: 'test' })
-  })
-
-  it('should always re-render if we are tracking props but not using any', async () => {
-    const key = queryKey()
-    let renderCount = 0
-    const states: CreateQueryResult<string>[] = []
-
-    function Page() {
-      const state = createQuery(key, () => 'test')
-
-      createRenderEffect(() => {
-        states.push({ ...state })
-      })
-
-      createEffect(
-        on(
-          () => ({ ...state }),
-          () => {
-            renderCount++
-          },
-        ),
-      )
-
-      return (
-        <div>
-          <h1>hello</h1>
-        </div>
-      )
-    }
-
-    render(() => (
-      <QueryClientProvider client={queryClient}>
-        <Page />
-      </QueryClientProvider>
-    ))
-
-    await sleep(10)
-    expect(renderCount).toBe(2)
-    expect(states.length).toBe(2)
-    expect(states[0]).toMatchObject({ data: undefined })
-    expect(states[1]).toMatchObject({ data: 'test' })
-  })
-
-  it.skip('should be able to remove a query', async () => {
-    const key = queryKey()
-    const states: CreateQueryResult<number>[] = []
-    let count = 0
-
-    function Page() {
-      //@ts-expect-error -- we skip this test, and no such thing as rerender in solid
-      const [, rerender] = NotReact.useState({})
-      const state = createQuery(key, () => ++count, {
-        notifyOnChangeProps: 'all',
-      })
-
-      createRenderEffect(() => {
-        states.push({ ...state })
-      })
-
-      const { remove } = state
-
-      return (
-        <div>
-          <button onClick={() => remove()}>remove</button>
-          <button onClick={() => rerender({})}>rerender</button>
-          data: {state.data ?? 'null'}
-        </div>
-      )
-    }
-
-    render(() => (
-      <QueryClientProvider client={queryClient}>
-        <Page />
-      </QueryClientProvider>
-    ))
-
-    await waitFor(() => screen.getByText('data: 1'))
-    fireEvent.click(screen.getByRole('button', { name: /remove/i }))
-
-    await sleep(20)
-    fireEvent.click(screen.getByRole('button', { name: /rerender/i }))
-    await waitFor(() => screen.getByText('data: 2'))
+    await waitFor(() => screen.getByText('test'))
 
-    expect(states.length).toBe(4)
-    // Initial
-    expect(states[0]).toMatchObject({ status: 'loading', data: undefined })
-    // Fetched
-    expect(states[1]).toMatchObject({ status: 'success', data: 1 })
-    // Remove + Hook state update, batched
-    expect(states[2]).toMatchObject({ status: 'loading', data: undefined })
-    // Fetched
-    expect(states[3]).toMatchObject({ status: 'success', data: 2 })
+    expect(states.length).toBe(2)
+    expect(states[0]).toMatchObject({ data: undefined })
+    expect(states[1]).toMatchObject({ data: 'test' })
   })
 
-  it('should create a new query when refetching a removed query', async () => {
+  it('should always re-render if we are tracking props but not using any', async () => {
     const key = queryKey()
-    const states: CreateQueryResult<number>[] = []
-    let count = 0
+    let renderCount = 0
+    const states: CreateQueryResult<string>[] = []
 
     function Page() {
-      const state = createQuery(
-        key,
-        async () => {
-          await sleep(10)
-          return ++count
-        },
-        { notifyOnChangeProps: 'all' },
-      )
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn: () => 'test',
+      }))
 
       createRenderEffect(() => {
         states.push({ ...state })
       })
 
+      createEffect(
+        on(
+          () => ({ ...state }),
+          () => {
+            renderCount++
+          },
+        ),
+      )
+
       return (
         <div>
-          <button onClick={() => state.remove()}>remove</button>
-          <button onClick={() => state.refetch()}>refetch</button>
-          data: {state.data ?? 'null'}
+          <h1>hello</h1>
         </div>
       )
     }
@@ -1424,27 +1249,15 @@ describe('createQuery', () => {
       </QueryClientProvider>
     ))
 
-    await waitFor(() => screen.getByText('data: 1'))
-    fireEvent.click(screen.getByRole('button', { name: /remove/i }))
-
-    await sleep(50)
-    fireEvent.click(screen.getByRole('button', { name: /refetch/i }))
-    await waitFor(() => screen.getByText('data: 2'))
-
-    expect(states.length).toBe(4)
-    // Initial
-    expect(states[0]).toMatchObject({ data: undefined, dataUpdatedAt: 0 })
-    // Fetched
-    expect(states[1]).toMatchObject({ data: 1 })
-    // Switch
-    expect(states[2]).toMatchObject({ data: undefined, dataUpdatedAt: 0 })
-    // Fetched
-    expect(states[3]).toMatchObject({ data: 2 })
+    await sleep(10)
+    expect(renderCount).toBe(2)
+    expect(states.length).toBe(2)
+    expect(states[0]).toMatchObject({ data: undefined })
+    expect(states[1]).toMatchObject({ data: 'test' })
   })
 
   it('should share equal data structures between query results', async () => {
     const key = queryKey()
-
     const result1 = [
       { id: '1', done: false },
       { id: '2', done: false },
@@ -1460,15 +1273,15 @@ describe('createQuery', () => {
     let count = 0
 
     function Page() {
-      const state = createQuery(
-        key,
-        async () => {
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn: async () => {
           await sleep(10)
           count++
           return count === 1 ? result1 : result2
         },
-        { notifyOnChangeProps: 'all' },
-      )
+        notifyOnChangeProps: 'all',
+      }))
 
       createRenderEffect(() => {
         states.push({ ...state })
@@ -1518,20 +1331,18 @@ describe('createQuery', () => {
     const key = queryKey()
     const results: CreateQueryResult<string>[] = []
 
-    queryClient.setQueryData(key(), 'set')
+    queryClient.setQueryData(key, 'set')
 
     function Page() {
-      const result = createQuery(
-        key,
-        async () => {
+      const result = createQuery(() => ({
+        queryKey: key,
+        queryFn: async () => {
           await sleep(10)
           return 'fetched'
         },
-        {
-          initialData: 'initial',
-          staleTime: Infinity,
-        },
-      )
+        initialData: 'initial',
+        staleTime: Infinity,
+      }))
 
       createRenderEffect(() => {
         results.push({ ...result })
@@ -1540,7 +1351,7 @@ describe('createQuery', () => {
       return (
         <div>
           <div>isFetching: {result.isFetching}</div>
-          <button onClick={() => queryClient.refetchQueries(key())}>
+          <button onClick={() => queryClient.refetchQueries({ queryKey: key })}>
             refetch
           </button>
           data: {result.data}
@@ -1571,15 +1382,15 @@ describe('createQuery', () => {
     let count = 0
 
     function Page() {
-      const state = createQuery(
-        key,
-        async () => {
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn: async () => {
           await sleep(10)
           count++
           return count
         },
-        { staleTime: Infinity, notifyOnChangeProps: 'all' },
-      )
+        staleTime: Infinity,
+      }))
 
       createEffect(() => {
         states.push({ ...state })
@@ -1587,7 +1398,9 @@ describe('createQuery', () => {
 
       return (
         <div>
-          <button onClick={() => queryClient.invalidateQueries(key())}>
+          <button
+            onClick={() => queryClient.invalidateQueries({ queryKey: key })}
+          >
             invalidate
           </button>
           data: {state.data}
@@ -1643,15 +1456,15 @@ describe('createQuery', () => {
     let count = 0
 
     function Page() {
-      const state = createQuery(
-        key,
-        async () => {
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn: async () => {
           await sleep(10)
           count++
           return count
         },
-        { enabled: false },
-      )
+        enabled: false,
+      }))
 
       createRenderEffect(() => {
         states.push({ ...state })
@@ -1659,7 +1472,7 @@ describe('createQuery', () => {
 
       createEffect(() => {
         setActTimeout(() => {
-          queryClient.refetchQueries({ queryKey: key() })
+          queryClient.refetchQueries({ queryKey: key })
         }, 20)
       })
 
@@ -1689,15 +1502,15 @@ describe('createQuery', () => {
     let count = 0
 
     function Page() {
-      const state = createQuery(
-        key,
-        async () => {
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn: async () => {
           await sleep(10)
           count++
           return count
         },
-        { enabled: false },
-      )
+        enabled: false,
+      }))
 
       createRenderEffect(() => {
         states.push({ ...state })
@@ -1705,7 +1518,7 @@ describe('createQuery', () => {
 
       createEffect(() => {
         setActTimeout(() => {
-          queryClient.invalidateQueries(key())
+          queryClient.invalidateQueries({ queryKey: key })
         }, 20)
       })
 
@@ -1736,18 +1549,14 @@ describe('createQuery', () => {
     function Page() {
       const [count, setCount] = createSignal(0)
 
-      const state = createQuery(
-        () => [key(), count()],
-        async () => {
+      const state = createQuery(() => ({
+        queryKey: [key, count()],
+        queryFn: async () => {
           await sleep(5)
           return count()
         },
-        {
-          get enabled() {
-            return count() === 0
-          },
-        },
-      )
+        enabled: count() === 0,
+      }))
 
       createRenderEffect(() => {
         states.push({ ...state })
@@ -1774,7 +1583,6 @@ describe('createQuery', () => {
 
     // Fetch query
     expect(states[0]).toMatchObject({
-      data: undefined,
       isFetching: true,
       isSuccess: false,
     })
@@ -1786,27 +1594,26 @@ describe('createQuery', () => {
     })
     // Switch to disabled query
     expect(states[2]).toMatchObject({
-      data: undefined,
       isFetching: false,
       isSuccess: false,
     })
   })
 
-  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: CreateQueryResult<number>[] = []
 
     function Page() {
       const [count, setCount] = createSignal(0)
 
-      const state = createQuery(
-        () => [key(), count()],
-        async () => {
+      const state = createQuery(() => ({
+        queryKey: [key, count()],
+        queryFn: async () => {
           await sleep(10)
           return count()
         },
-        { keepPreviousData: true },
-      )
+        placeholderData: keepPreviousData,
+      }))
 
       createRenderEffect(() => {
         states.push({ ...state })
@@ -1834,160 +1641,47 @@ describe('createQuery', () => {
       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,
-    })
-  })
-
-  // this test relies on rerenders which don't exist in solid
-  it.skip('should transition to error state when keepPreviousData is set', async () => {
-    const key = queryKey()
-    const states: CreateQueryResult<number>[] = []
-
-    function Page(props: { count: number }) {
-      const state = createQuery<number, Error>(
-        () => [key(), props.count],
-        async () => {
-          await sleep(10)
-          if (props.count === 2) {
-            throw new Error('Error test')
-          }
-          return Promise.resolve(props.count)
-        },
-        {
-          retry: false,
-          keepPreviousData: true,
-        },
-      )
-
-      createRenderEffect(() => {
-        states.push({ ...state })
-      })
-
-      return (
-        <div>
-          <h1>data: {state.data}</h1>
-          <h2>error: {state.error?.message}</h2>
-          <p>previous data: {state.isPreviousData}</p>
-        </div>
-      )
-    }
-
-    render(() => (
-      <QueryClientProvider client={queryClient}>
-        <Page count={0} />
-      </QueryClientProvider>
-    ))
-    await waitFor(() => screen.getByText('data: 0'))
-    // @ts-expect-error we skip this test and rerenders don't exist in solid
-    act(() => screen.rerender(<Page count={1} />))
-    await waitFor(() => screen.getByText('data: 1'))
-    // @ts-expect-error we skip this test and rerenders don't exist in solid
-    act(() => screen.rerender(<Page count={2} />))
-    await waitFor(() => screen.getByText('error: Error test'))
-
-    await waitFor(() => expect(states.length).toBe(8))
-    // Initial
-    expect(states[0]).toMatchObject({
-      data: undefined,
-      isFetching: true,
-      status: 'loading',
-      error: null,
-      isPreviousData: false,
-    })
-    // Fetched
-    expect(states[1]).toMatchObject({
-      data: 0,
-      isFetching: false,
-      status: 'success',
-      error: null,
-      isPreviousData: false,
-    })
-    // rerender Page 1
-    expect(states[2]).toMatchObject({
-      data: 0,
-      isFetching: true,
-      status: 'success',
-      error: null,
-      isPreviousData: true,
-    })
-    // Hook state update
-    expect(states[3]).toMatchObject({
-      data: 0,
-      isFetching: true,
-      status: 'success',
-      error: null,
-      isPreviousData: true,
-    })
-    // New data
-    expect(states[4]).toMatchObject({
-      data: 1,
-      isFetching: false,
-      status: 'success',
-      error: null,
-      isPreviousData: false,
-    })
-    // rerender Page 2
-    expect(states[5]).toMatchObject({
-      data: 1,
-      isFetching: true,
-      status: 'success',
-      error: null,
-      isPreviousData: true,
-    })
-    // Hook state update again
-    expect(states[6]).toMatchObject({
-      data: 1,
-      isFetching: true,
-      status: 'success',
-      error: null,
-      isPreviousData: 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: DefinedCreateQueryResult<number>[] = []
 
     function Page() {
       const [count, setCount] = createSignal(0)
 
-      const state = createQuery(
-        () => [key(), count()],
-        async () => {
+      const state = createQuery(() => ({
+        queryKey: [key, count()],
+        queryFn: async () => {
           await sleep(10)
           return count()
         },
-        { initialData: 99, keepPreviousData: true },
-      )
+        initialData: 99,
+        placeholderData: keepPreviousData,
+      }))
 
       createRenderEffect(() => {
         states.push({ ...state })
@@ -2027,46 +1721,48 @@ describe('createQuery', () => {
       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,
     })
     // New data
     expect(states[3]).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 to identity function', async () => {
     const key = queryKey()
     const states: CreateQueryResult<number>[] = []
 
     function Page() {
       const [count, setCount] = createSignal(0)
 
-      const state = createQuery(
-        () => [key(), count()],
-        async () => {
+      const state = createQuery(() => ({
+        queryKey: [key, count()],
+        queryFn: async () => {
           await sleep(10)
           return count()
         },
-        { enabled: false, keepPreviousData: true, notifyOnChangeProps: 'all' },
-      )
+        enabled: false,
+        placeholderData: keepPreviousData,
+        notifyOnChangeProps: 'all',
+      }))
 
       createRenderEffect(() => {
         states.push({ ...state })
@@ -2103,64 +1799,66 @@ describe('createQuery', () => {
       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: CreateQueryResult<number>[] = []
 
-    queryClient.setQueryData([key(), 10], 10)
+    queryClient.setQueryData([key, 10], 10)
 
     await sleep(10)
 
     function Page() {
       const [count, setCount] = createSignal(10)
 
-      const state = createQuery(
-        () => [key(), count()],
-        async () => {
+      const state = createQuery(() => ({
+        queryKey: [key, count()],
+        queryFn: async () => {
           await sleep(10)
           return count()
         },
-        { enabled: false, keepPreviousData: true, notifyOnChangeProps: 'all' },
-      )
+        enabled: false,
+        placeholderData: keepPreviousData,
+        notifyOnChangeProps: 'all',
+      }))
 
       createRenderEffect(() => {
         states.push({ ...state })
@@ -2197,28 +1895,28 @@ describe('createQuery', () => {
       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,
     })
     // Refetch
     expect(states[2]).toMatchObject({
       data: 10,
       isFetching: true,
       isSuccess: true,
-      isPreviousData: true,
+      isPlaceholderData: true,
     })
     // Refetch done
     expect(states[3]).toMatchObject({
       data: 12,
       isFetching: false,
       isSuccess: true,
-      isPreviousData: false,
+      isPlaceholderData: false,
     })
   })
 
@@ -2227,14 +1925,13 @@ describe('createQuery', () => {
     const states: CreateQueryResult<number>[] = []
 
     function FirstComponent() {
-      const state = createQuery(
-        key,
-        async () => {
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn: async () => {
           await sleep(10)
           return 1
         },
-        { notifyOnChangeProps: 'all' },
-      )
+      }))
 
       createRenderEffect(() => {
         states.push({ ...state })
@@ -2249,7 +1946,10 @@ describe('createQuery', () => {
     }
 
     function SecondComponent() {
-      createQuery(key, () => 2, { notifyOnChangeProps: 'all' })
+      createQuery(() => ({
+        queryKey: key,
+        queryFn: () => 2,
+      }))
       return null
     }
 
@@ -2293,24 +1993,25 @@ describe('createQuery', () => {
     const states1: CreateQueryResult<string>[] = []
     const states2: CreateQueryResult<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 = createQuery(
-        key,
-        async () => {
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn: async () => {
           await sleep(10)
           return 'one'
         },
-        {
-          staleTime: 100,
-        },
-      )
+        staleTime: 100,
+      }))
       createRenderEffect(() => {
         states1.push({ ...state })
       })
@@ -2318,16 +2019,14 @@ describe('createQuery', () => {
     }
 
     function SecondComponent() {
-      const state = createQuery(
-        key,
-        async () => {
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn: async () => {
           await sleep(10)
           return 'two'
         },
-        {
-          staleTime: 10,
-        },
-      )
+        staleTime: 10,
+      }))
       createRenderEffect(() => {
         states2.push({ ...state })
       })
@@ -2401,9 +2100,11 @@ describe('createQuery', () => {
     const states: CreateQueryResult<string>[] = []
 
     function Page() {
-      const state = createQuery(key, () => 'test', {
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn: () => 'test',
         staleTime: 50,
-      })
+      }))
       createRenderEffect(() => {
         states.push({ ...state })
       })
@@ -2429,16 +2130,14 @@ describe('createQuery', () => {
     const states: CreateQueryResult<string>[] = []
 
     function Page() {
-      const state = createQuery(
-        key,
-        async () => {
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn: async () => {
           await sleep(5)
           return 'test'
         },
-        {
-          notifyOnChangeProps: ['data'],
-        },
-      )
+        notifyOnChangeProps: ['data'],
+      }))
 
       createRenderEffect(() => {
         states.push({ ...state })
@@ -2464,7 +2163,7 @@ describe('createQuery', () => {
     expect(states.length).toBe(2)
     expect(states[0]).toMatchObject({
       data: undefined,
-      status: 'loading',
+      status: 'pending',
       isFetching: true,
     })
     expect(states[1]).toMatchObject({
@@ -2480,15 +2179,19 @@ describe('createQuery', () => {
     const key2 = queryKey()
 
     function Page() {
-      const first = createQuery(key1, () => 'data', {
+      const first = createQuery(() => ({
+        queryKey: key1,
+        queryFn: () => 'data',
         enabled: false,
         initialData: 'init',
-      })
+      }))
 
-      const second = createQuery(key2, () => 'data', {
+      const second = createQuery(() => ({
+        queryKey: key2,
+        queryFn: () => 'data',
         enabled: false,
         initialData: 'init',
-      })
+      }))
 
       return (
         <div>
@@ -2526,8 +2229,8 @@ describe('createQuery', () => {
     }
 
     function Page() {
-      createQuery(key, queryFn1)
-      createQuery(key, queryFn2)
+      createQuery(() => ({ queryKey: key, queryFn: queryFn1 }))
+      createQuery(() => ({ queryKey: key, queryFn: queryFn2 }))
       return null
     }
 
@@ -2537,7 +2240,7 @@ describe('createQuery', () => {
       </QueryClientProvider>
     ))
 
-    expect(queryCache.find(key())!.options.queryFn).toBe(queryFn1)
+    expect(queryCache.find({ queryKey: key })!.options.queryFn).toBe(queryFn1)
   })
 
   it('should batch re-renders', async () => {
@@ -2551,8 +2254,8 @@ describe('createQuery', () => {
     }
 
     function Page() {
-      createQuery(key, queryFn)
-      createQuery(key, queryFn)
+      createQuery(() => ({ queryKey: key, queryFn }))
+      createQuery(() => ({ queryKey: key, queryFn }))
       renders++
       return null
     }
@@ -2583,16 +2286,20 @@ describe('createQuery', () => {
 
     function Page() {
       const [count, setCount] = createSignal(0)
-      createQuery(key, queryFn, {
+      createQuery(() => ({
+        queryKey: key,
+        queryFn,
         onSuccess: () => {
           setCount((x) => x + 1)
         },
-      })
-      createQuery(key, queryFn, {
+      }))
+      createQuery(() => ({
+        queryKey: key,
+        queryFn,
         onSuccess: () => {
           setCount((x) => x + 1)
         },
-      })
+      }))
 
       createEffect(() => {
         renders++
@@ -2621,10 +2328,13 @@ describe('createQuery', () => {
 
     function Page() {
       const [, setNewState] = createSignal('state')
-      const state = createQuery(key, () => 'data')
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn: () => 'data',
+      }))
       createEffect(() => {
         setActTimeout(() => {
-          queryClient.setQueryData(key(), 'new')
+          queryClient.setQueryData(key, 'new')
           // Update with same state to make react discard the next render
           setNewState('state')
         }, 10)
@@ -2642,15 +2352,20 @@ describe('createQuery', () => {
   })
 
   // 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 = createQuery(key1, () => 'data', {
+      const first = createQuery(() => ({
+        queryKey: key1,
+        queryFn: () => 'data',
         enabled: false,
-      })
-      const second = createQuery(key2, () => 'data')
+      }))
+      const second = createQuery(() => ({
+        queryKey: key2,
+        queryFn: () => 'data',
+      }))
 
       return (
         <div>
@@ -2672,20 +2387,23 @@ describe('createQuery', () => {
 
     // use "act" to wait for state update and prevent console warning
 
-    screen.getByText('First Status: loading, idle')
-    await waitFor(() => screen.getByText('Second Status: loading, fetching'))
+    screen.getByText('First Status: pending, idle')
+    await waitFor(() => screen.getByText('Second Status: pending, fetching'))
     await waitFor(() => screen.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 } = createQuery(key, async () => {
-        await sleep(10)
-        return 'test'
-      })
+      const { status } = createQuery(() => ({
+        queryKey: key,
+        queryFn: async () => {
+          await sleep(10)
+          return 'test'
+        },
+      }))
 
       return <div>status: {status}</div>
     }
@@ -2696,26 +2414,25 @@ describe('createQuery', () => {
       </QueryClientProvider>
     ))
 
-    screen.getByText('status: loading')
+    screen.getByText('status: pending')
   })
 
   // See https://github.com/tannerlinsley/react-query/issues/147
   it('should not pass stringified variables to query function', async () => {
     const key = queryKey()
     const variables = { number: 5, boolean: false, object: {}, array: [] }
-    type CustomQueryKey = readonly [ReturnType<typeof key>, typeof variables]
-    const states: CreateQueryResult<CustomQueryKey>[] = []
-
-    // TODO(lukemurray): extract the query function to a variable queryFn
+    type CustomQueryKey = readonly [typeof key, typeof variables]
+    const states: CreateQueryResult<CustomQueryKey, unknown>[] = []
 
     function Page() {
-      const state = createQuery(
-        () => [key(), variables] as const,
-        async (ctx) => {
+      const state = createQuery(() => ({
+        queryKey: [key, variables] as const,
+        queryFn: async (ctx) => {
           await sleep(10)
           return ctx.queryKey
         },
-      )
+      }))
+
       createRenderEffect(() => {
         states.push({ ...state })
       })
@@ -2730,7 +2447,7 @@ describe('createQuery', () => {
 
     await sleep(20)
 
-    expect(states[1]?.data).toEqual([key(), variables])
+    expect(states[1]?.data).toEqual([key, variables])
   })
 
   it('should not refetch query on focus when `enabled` is set to `false`', async () => {
@@ -2738,9 +2455,11 @@ describe('createQuery', () => {
     const queryFn = jest.fn<string, unknown[]>().mockReturnValue('data')
 
     function Page() {
-      const { data = 'default' } = createQuery(key, queryFn, {
+      const { data = 'default' } = createQuery(() => ({
+        queryKey: key,
+        queryFn,
         enabled: false,
-      })
+      }))
 
       return (
         <div>
@@ -2757,7 +2476,7 @@ describe('createQuery', () => {
 
     await waitFor(() => screen.getByText('default'))
 
-    window.dispatchEvent(new FocusEvent('focus'))
+    window.dispatchEvent(new Event('visibilitychange'))
 
     expect(queryFn).not.toHaveBeenCalled()
   })
@@ -2768,10 +2487,12 @@ describe('createQuery', () => {
     let count = 0
 
     function Page() {
-      const state = createQuery(key, () => count++, {
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn: () => count++,
         staleTime: 0,
         refetchOnWindowFocus: false,
-      })
+      }))
       createRenderEffect(() => {
         states.push({ ...state })
       })
@@ -2786,7 +2507,7 @@ describe('createQuery', () => {
 
     await sleep(10)
 
-    window.dispatchEvent(new FocusEvent('focus'))
+    window.dispatchEvent(new Event('visibilitychange'))
 
     await sleep(10)
 
@@ -2801,10 +2522,12 @@ describe('createQuery', () => {
     let count = 0
 
     function Page() {
-      const state = createQuery(key, () => count++, {
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn: () => count++,
         staleTime: 0,
         refetchOnWindowFocus: () => false,
-      })
+      }))
       createRenderEffect(() => {
         states.push({ ...state })
       })
@@ -2819,7 +2542,7 @@ describe('createQuery', () => {
 
     await sleep(10)
 
-    window.dispatchEvent(new FocusEvent('focus'))
+    window.dispatchEvent(new Event('visibilitychange'))
 
     await sleep(10)
 
@@ -2834,10 +2557,12 @@ describe('createQuery', () => {
     let count = 0
 
     function Page() {
-      const state = createQuery(key, () => count++, {
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn: () => count++,
         staleTime: Infinity,
         refetchOnWindowFocus: true,
-      })
+      }))
       createRenderEffect(() => {
         states.push({ ...state })
       })
@@ -2852,7 +2577,7 @@ describe('createQuery', () => {
 
     await sleep(10)
 
-    window.dispatchEvent(new FocusEvent('focus'))
+    window.dispatchEvent(new Event('visibilitychange'))
 
     await sleep(10)
 
@@ -2867,17 +2592,15 @@ describe('createQuery', () => {
     let count = 0
 
     function Page() {
-      const state = createQuery(
-        key,
-        async () => {
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn: async () => {
           await sleep(10)
           return count++
         },
-        {
-          staleTime: Infinity,
-          refetchOnWindowFocus: 'always',
-        },
-      )
+        staleTime: Infinity,
+        refetchOnWindowFocus: 'always',
+      }))
       createRenderEffect(() => {
         states.push({ ...state })
       })
@@ -2892,7 +2615,7 @@ describe('createQuery', () => {
 
     await sleep(20)
 
-    window.dispatchEvent(new FocusEvent('focus'))
+    window.dispatchEvent(new Event('visibilitychange'))
 
     await sleep(20)
 
@@ -2909,18 +2632,16 @@ describe('createQuery', () => {
     let count = 0
 
     function Page() {
-      const state = createQuery(
-        key,
-        async () => {
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn: async () => {
           await sleep(10)
           return count++
         },
-        {
-          staleTime: 0,
-          retry: 0,
-          refetchOnWindowFocus: (query) => (query.state.data || 0) < 1,
-        },
-      )
+        staleTime: 0,
+        retry: 0,
+        refetchOnWindowFocus: (query) => (query.state.data || 0) < 1,
+      }))
       createRenderEffect(() => {
         states.push({ ...state })
       })
@@ -2939,7 +2660,7 @@ describe('createQuery', () => {
     expect(states[0]).toMatchObject({ data: undefined, isFetching: true })
     expect(states[1]).toMatchObject({ data: 0, isFetching: false })
 
-    window.dispatchEvent(new FocusEvent('focus'))
+    window.dispatchEvent(new Event('visibilitychange'))
 
     await screen.findByText('data: 1')
 
@@ -2959,13 +2680,18 @@ describe('createQuery', () => {
     const key = queryKey()
     const states: CreateQueryResult<string>[] = []
 
-    await queryClient.prefetchQuery(key(), () => 'prefetched')
+    await queryClient.prefetchQuery({
+      queryKey: key,
+      queryFn: () => 'prefetched',
+    })
 
     function Page() {
-      const state = createQuery(key, () => 'data', {
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn: () => 'data',
         refetchOnMount: 'always',
         staleTime: Infinity,
-      })
+      }))
       createRenderEffect(() => {
         states.push({ ...state })
       })
@@ -2997,15 +2723,20 @@ describe('createQuery', () => {
     const key = queryKey()
     const states: CreateQueryResult<string>[] = []
 
-    await queryClient.prefetchQuery(key(), () => 'prefetched')
+    await queryClient.prefetchQuery({
+      queryKey: key,
+      queryFn: () => 'prefetched',
+    })
 
     await sleep(10)
 
     function Page() {
-      const state = createQuery(key, () => 'data', {
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn: () => 'data',
         refetchOnMount: true,
         staleTime: 0,
-      })
+      }))
       createRenderEffect(() => {
         states.push({ ...state })
       })
@@ -3037,18 +2768,18 @@ describe('createQuery', () => {
     const key = queryKey()
 
     function Page() {
-      const state = createQuery<unknown, string>(
-        key,
-        () => {
-          return Promise.reject('Error test jaylen')
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn: () => {
+          return Promise.reject(new Error('Error test jaylen'))
         },
-        { retry: false },
-      )
+        retry: false,
+      }))
 
       return (
         <div>
           <h1>{state.status}</h1>
-          <h2>{state.error}</h2>
+          <h2>{state.error?.message}</h2>
         </div>
       )
     }
@@ -3063,20 +2794,21 @@ describe('createQuery', () => {
     await waitFor(() => screen.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 key = queryKey()
 
     function Page() {
-      const state = createQuery<unknown, string>(
-        key,
-        () => Promise.reject('Error test jaylen'),
-        { retry: false, useErrorBoundary: true },
-      )
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn: () => Promise.reject(new Error('Error test jaylen')),
+        retry: false,
+        throwErrors: true,
+      }))
 
       return (
         <div>
           <h1>{state.status}</h1>
-          <h2>{state.error}</h2>
+          <h2>{state.error?.message}</h2>
         </div>
       )
     }
@@ -3092,15 +2824,17 @@ describe('createQuery', () => {
     await waitFor(() => screen.getByText('error boundary'))
   })
 
-  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: CreateQueryResult<string> | undefined
 
     function Page() {
-      const query = createQuery(key, () => Promise.resolve('data'), {
-        useErrorBoundary: true,
-      })
+      const query = createQuery(() => ({
+        queryKey: key,
+        queryFn: () => Promise.resolve('data'),
+        throwErrors: true,
+      }))
 
       createEffect(() => {
         result = query
@@ -3124,19 +2858,17 @@ describe('createQuery', () => {
     const key = queryKey()
 
     function Page() {
-      const state = createQuery<unknown, string>(
-        key,
-        () => Promise.reject('Local Error'),
-        {
-          retry: false,
-          useErrorBoundary: (err) => err !== 'Local Error',
-        },
-      )
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn: () => Promise.reject(new Error('Local Error')),
+        retry: false,
+        throwErrors: (err) => err.message !== 'Local Error',
+      }))
 
       return (
         <div>
           <h1>{state.status}</h1>
-          <h2>{state.error}</h2>
+          <h2>{state.error?.message}</h2>
         </div>
       )
     }
@@ -3157,14 +2889,12 @@ describe('createQuery', () => {
     const key = queryKey()
 
     function Page() {
-      const state = createQuery<unknown, Error>(
-        key,
-        () => Promise.reject(new Error('Remote Error')),
-        {
-          retry: false,
-          useErrorBoundary: (err) => err.message !== 'Local Error',
-        },
-      )
+      const state = createQuery<unknown, Error>(() => ({
+        queryKey: key,
+        queryFn: () => Promise.reject(new Error('Remote Error')),
+        retry: false,
+        throwErrors: (err) => err.message !== 'Local Error',
+      }))
 
       return (
         <div>
@@ -3199,24 +2929,23 @@ describe('createQuery', () => {
     let count = 0
 
     function Page() {
-      const result = createQuery<number, string>(
-        key,
-        async () => {
+      const result = createQuery(() => ({
+        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>
       )
     }
@@ -3255,24 +2984,22 @@ describe('createQuery', () => {
     let count = 0
 
     function Page() {
-      const result = createQuery<number, string>(
-        key,
-        async () => {
+      const result = createQuery(() => ({
+        queryKey: key,
+        queryFn: async () => {
           count++
           await sleep(10)
-          return Promise.reject('some error')
+          return Promise.reject(new Error('some error'))
         },
-        {
-          retry: 2,
-          retryDelay: 100,
-        },
-      )
+        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>
       )
     }
@@ -3285,9 +3012,7 @@ describe('createQuery', () => {
       return (
         <div>
           <button onClick={toggle}>{show() ? 'hide' : 'show'}</button>
-          <button
-            onClick={() => queryClient.cancelQueries({ queryKey: key() })}
-          >
+          <button onClick={() => queryClient.cancelQueries({ queryKey: key })}>
             cancel
           </button>
           {show() && <Page />}
@@ -3317,13 +3042,18 @@ describe('createQuery', () => {
     const key = queryKey()
     const states: CreateQueryResult<string>[] = []
 
-    await queryClient.prefetchQuery(key(), () => 'prefetched')
+    await queryClient.prefetchQuery({
+      queryKey: key,
+      queryFn: () => 'prefetched',
+    })
 
     function Page() {
-      const state = createQuery(key, () => 'data', {
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn: () => 'data',
         refetchOnMount: 'always',
         staleTime: 50,
-      })
+      }))
       createRenderEffect(() => {
         states.push({ ...state })
       })
@@ -3367,9 +3097,11 @@ describe('createQuery', () => {
     const states: DefinedCreateQueryResult<string>[] = []
 
     function Page() {
-      const state = createQuery(key, () => 'data', {
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn: () => 'data',
         initialData: 'initial',
-      })
+      }))
       createRenderEffect(() => {
         states.push({ ...state })
       })
@@ -3403,10 +3135,12 @@ describe('createQuery', () => {
     const states: DefinedCreateQueryResult<string>[] = []
 
     function Page() {
-      const state = createQuery(key, () => 'data', {
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn: () => 'data',
         staleTime: 50,
         initialData: 'initial',
-      })
+      }))
       createRenderEffect(() => {
         states.push({ ...state })
       })
@@ -3441,11 +3175,13 @@ describe('createQuery', () => {
     const oneSecondAgo = Date.now() - 1000
 
     function Page() {
-      const state = createQuery(key, () => 'data', {
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn: () => 'data',
         staleTime: 50,
         initialData: 'initial',
         initialDataUpdatedAt: oneSecondAgo,
-      })
+      }))
       createRenderEffect(() => {
         states.push({ ...state })
       })
@@ -3483,11 +3219,13 @@ describe('createQuery', () => {
     const states: DefinedCreateQueryResult<string>[] = []
 
     function Page() {
-      const state = createQuery(key, () => 'data', {
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn: () => 'data',
         staleTime: 10 * 1000, // 10 seconds
         initialData: 'initial',
         initialDataUpdatedAt: 0,
-      })
+      }))
       createRenderEffect(() => {
         states.push({ ...state })
       })
@@ -3521,14 +3259,12 @@ describe('createQuery', () => {
 
     function Page() {
       const [count, setCount] = createSignal(0)
-      const state = createQuery(
-        () => [key(), count()],
-        () => ({ count: 10 }),
-        {
-          staleTime: Infinity,
-          initialData: () => ({ count: count() }),
-        },
-      )
+      const state = createQuery(() => ({
+        queryKey: [key, count()],
+        queryFn: () => ({ count: 10 }),
+        staleTime: Infinity,
+        initialData: () => ({ count: count() }),
+      }))
       createRenderEffect(() => {
         states.push({ ...state })
       })
@@ -3562,20 +3298,22 @@ describe('createQuery', () => {
 
     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 state = createQuery<unknown, string>(key, queryFn, {
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn,
         retry: 1,
         retryDelay: 1,
-      })
+      }))
 
       return (
         <div>
           <h1>{state.status}</h1>
           <h2>Failed {state.failureCount} times</h2>
-          <h2>Failed because {state.failureReason}</h2>
+          <h2>Failed because {state.failureReason?.message}</h2>
         </div>
       )
     }
@@ -3586,7 +3324,7 @@ describe('createQuery', () => {
       </QueryClientProvider>
     ))
 
-    await waitFor(() => screen.getByText('loading'))
+    await waitFor(() => screen.getByText('pending'))
     await waitFor(() => screen.getByText('error'))
 
     // query should fail `retry + 1` times, since first time isn't a "retry"
@@ -3602,25 +3340,27 @@ describe('createQuery', () => {
     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 state = createQuery<unknown, string, [string]>(key, queryFn, {
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn,
         retryDelay: 1,
-        retry: (_failureCount, err) => err !== 'NoRetry',
-      })
+        retry: (_failureCount, err) => err.message !== 'NoRetry',
+      }))
 
       return (
         <div>
           <h1>{state.status}</h1>
           <h2>Failed {state.failureCount} times</h2>
-          <h2>Failed because {state.failureReason}</h2>
-          <h2>{state.error}</h2>
+          <h2>Failed because {state.failureReason?.message}</h2>
+          <h2>{state.error?.message}</h2>
         </div>
       )
     }
@@ -3631,7 +3371,7 @@ describe('createQuery', () => {
       </QueryClientProvider>
     ))
 
-    await waitFor(() => screen.getByText('loading'))
+    await waitFor(() => screen.getByText('pending'))
     await waitFor(() => screen.getByText('error'))
     await waitFor(() => screen.getByText('Failed 2 times'))
     await waitFor(() => screen.getByText('Failed because NoRetry'))
@@ -3651,10 +3391,12 @@ describe('createQuery', () => {
     })
 
     function Page() {
-      const state = createQuery<unknown, DelayError>(key, queryFn, {
+      const state = createQuery<unknown, DelayError>(() => ({
+        queryKey: key,
+        queryFn,
         retry: 1,
         retryDelay: (_, error: DelayError) => error.delay,
-      })
+      }))
 
       return (
         <div>
@@ -3691,17 +3433,15 @@ describe('createQuery', () => {
     let count = 0
 
     function Page() {
-      const query = createQuery<unknown, string>(
-        key,
-        () => {
+      const query = createQuery<unknown, string>(() => ({
+        queryKey: key,
+        queryFn: () => {
           count++
           return Promise.reject<unknown>(`fetching error ${count}`)
         },
-        {
-          retry: 3,
-          retryDelay: 1,
-        },
-      )
+        retry: 3,
+        retryDelay: 1,
+      }))
 
       return (
         <div>
@@ -3722,7 +3462,7 @@ describe('createQuery', () => {
     // The query should display the first error result
     await waitFor(() => screen.getByText('failureCount 1'))
     await waitFor(() => screen.getByText('failureReason fetching error 1'))
-    await waitFor(() => screen.getByText('status loading'))
+    await waitFor(() => screen.getByText('status pending'))
     await waitFor(() => screen.getByText('error null'))
 
     // Check if the query really paused
@@ -3731,7 +3471,7 @@ describe('createQuery', () => {
     await waitFor(() => screen.getByText('failureReason fetching error 1'))
 
     visibilityMock.mockRestore()
-    window.dispatchEvent(new FocusEvent('focus'))
+    window.dispatchEvent(new Event('visibilitychange'))
 
     // Wait for the final result
     await waitFor(() => screen.getByText('failureCount 4'))
@@ -3743,19 +3483,19 @@ describe('createQuery', () => {
     await sleep(10)
     await waitFor(() => screen.getByText('failureCount 4'))
     await waitFor(() => screen.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 () => {
     const key = queryKey()
     const states: CreateQueryResult<string>[] = []
 
-    queryClient.setQueryData(key(), 'prefetched')
+    queryClient.setQueryData(key, 'prefetched')
 
     function Page() {
-      const state = createQuery(key, () => 'data')
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn: () => 'data',
+      }))
       createRenderEffect(() => {
         states.push({ ...state })
       })
@@ -3793,13 +3533,16 @@ describe('createQuery', () => {
     const visibilityMock = mockVisibilityState('hidden')
 
     // set data in cache to check if the hook query fn is actually called
-    queryClient.setQueryData(key(), 'prefetched')
+    queryClient.setQueryData(key, 'prefetched')
 
     function Page() {
-      const state = createQuery(key, async () => {
-        await sleep(10)
-        return 'data'
-      })
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn: async () => {
+          await sleep(10)
+          return 'data'
+        },
+      }))
       createRenderEffect(() => {
         states.push({ ...state })
       })
@@ -3820,7 +3563,7 @@ describe('createQuery', () => {
 
     // reset visibilityState to original value
     visibilityMock.mockRestore()
-    window.dispatchEvent(new FocusEvent('focus'))
+    window.dispatchEvent(new Event('visibilitychange'))
 
     await waitFor(() => expect(states.length).toBe(4))
 
@@ -3859,14 +3602,16 @@ describe('createQuery', () => {
     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 = createQuery(key, queryFn)
+      const state = createQuery(() => ({ queryKey: key, queryFn }))
       createRenderEffect(() => {
         states.push({ ...state })
       })
@@ -3897,16 +3642,16 @@ describe('createQuery', () => {
       return 'not yet...'
     })
 
-    await queryClient.prefetchQuery(key(), prefetchQueryFn, {
+    await queryClient.prefetchQuery({
+      queryKey: key,
+      queryFn: prefetchQueryFn,
       staleTime: 1000,
     })
 
     await sleep(0)
 
     function Page() {
-      createQuery(key, queryFn, {
-        staleTime: 1000,
-      })
+      createQuery(() => ({ queryKey: key, queryFn, staleTime: 1000 }))
       return null
     }
 
@@ -3929,9 +3674,9 @@ describe('createQuery', () => {
     function Page() {
       let counter = 0
 
-      const query = createQuery<unknown, Error>(
-        key,
-        async () => {
+      const query = createQuery<unknown, Error>(() => ({
+        queryKey: key,
+        queryFn: async () => {
           if (counter < 2) {
             counter++
             throw new Error('error')
@@ -3939,8 +3684,8 @@ describe('createQuery', () => {
             return 'data'
           }
         },
-        { retryDelay: 10 },
-      )
+        retryDelay: 10,
+      }))
 
       return (
         <div>
@@ -3971,25 +3716,22 @@ describe('createQuery', () => {
       const [enabled, setEnabled] = createSignal(false)
       const [isPrefetched, setPrefetched] = createSignal(false)
 
-      const query = createQuery(
-        key,
-        async () => {
+      const query = createQuery(() => ({
+        queryKey: key,
+        queryFn: async () => {
           count++
           await sleep(10)
           return count
         },
-        {
-          get enabled() {
-            return enabled()
-          },
-        },
-      )
+        enabled: enabled(),
+      }))
 
       createEffect(() => {
         async function prefetch() {
-          await queryClient.prefetchQuery(key(), () =>
-            Promise.resolve('prefetched data'),
-          )
+          await queryClient.prefetchQuery({
+            queryKey: key,
+            queryFn: () => Promise.resolve('prefetched data'),
+          })
           setPrefetched(true)
         }
         prefetch()
@@ -4023,11 +3765,11 @@ describe('createQuery', () => {
     function Page() {
       const [shouldFetch, setShouldFetch] = createSignal(false)
 
-      const query = createQuery(key, () => 'data', {
-        get enabled() {
-          return shouldFetch()
-        },
-      })
+      const query = createQuery(() => ({
+        queryKey: key,
+        queryFn: () => 'data',
+        enabled: shouldFetch(),
+      }))
 
       return (
         <div>
@@ -4063,15 +3805,20 @@ describe('createQuery', () => {
     const results: DefinedCreateQueryResult<string>[] = []
 
     function Page() {
-      const result = createQuery(key, () => 'serverData', {
-        initialData: 'data',
-      })
+      const result = createQuery(() => ({
+        queryKey: key,
+        queryFn: async () => {
+          await sleep(10)
+          return 'serverData'
+        },
+        initialData: 'initialData',
+      }))
 
       createRenderEffect(() => {
         results.push({ ...result })
       })
 
-      return null
+      return <div>data: {result.data}</div>
     }
 
     render(() => (
@@ -4080,10 +3827,11 @@ describe('createQuery', () => {
       </QueryClientProvider>
     ))
 
-    await sleep(10)
+    await waitFor(() => screen.getByText('data: initialData'))
+    await waitFor(() => screen.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 })
   })
 
@@ -4092,7 +3840,11 @@ describe('createQuery', () => {
     const results: DefinedCreateQueryResult<number>[] = []
 
     function Page() {
-      const result = createQuery(key, () => 1, { initialData: 0 })
+      const result = createQuery(() => ({
+        queryKey: key,
+        queryFn: () => 1,
+        initialData: 0,
+      }))
 
       createRenderEffect(() => {
         results.push({ ...result })
@@ -4122,14 +3874,12 @@ describe('createQuery', () => {
     function Page() {
       const [shouldFetch, setShouldFetch] = createSignal(true)
 
-      const result = createQuery(key, () => 'fetched data', {
-        get enabled() {
-          return shouldFetch()
-        },
-        get initialData() {
-          return shouldFetch() ? 'initial' : 'initial falsy'
-        },
-      })
+      const result = createQuery(() => ({
+        queryKey: key,
+        queryFn: () => 'fetched data',
+        enabled: shouldFetch(),
+        initialData: shouldFetch() ? 'initial' : 'initial falsy',
+      }))
 
       createRenderEffect(() => {
         results.push({ ...result })
@@ -4163,11 +3913,12 @@ describe('createQuery', () => {
     queryFn.mockImplementation(() => 'data')
 
     function Page() {
-      const { fetchStatus } = createQuery({
+      const { fetchStatus } = createQuery(() => ({
         queryKey: key,
         queryFn,
         enabled: false,
-      })
+      }))
+
       return <div>fetchStatus: {fetchStatus}</div>
     }
 
@@ -4178,18 +3929,20 @@ describe('createQuery', () => {
     ))
 
     expect(queryFn).not.toHaveBeenCalled()
-    expect(queryCache.find(key())).not.toBeUndefined()
+    expect(queryCache.find({ queryKey: key })).not.toBeUndefined()
     screen.getByText('fetchStatus: idle')
   })
 
   // See https://github.com/tannerlinsley/react-query/issues/360
-  it('should init to status:loading, fetchStatus:idle when enabled is false', async () => {
+  it('should init to status:pending, fetchStatus:idle when enabled is false', async () => {
     const key = queryKey()
 
     function Page() {
-      const query = createQuery(key, () => 'data', {
+      const query = createQuery(() => ({
+        queryKey: key,
+        queryFn: () => 'data',
         enabled: false,
-      })
+      }))
 
       return (
         <div>
@@ -4206,16 +3959,44 @@ describe('createQuery', () => {
       </QueryClientProvider>
     ))
 
-    await waitFor(() => screen.getByText('status: loading, idle'))
+    await waitFor(() => screen.getByText('status: pending, idle'))
   })
 
-  it('should not schedule garbage collection, if cacheTimeout is set to `Infinity`', async () => {
+  it('should not schedule garbage collection, if gcTimeout is set to `Infinity`', async () => {
     const key = queryKey()
 
     function Page() {
-      const query = createQuery(key, () => 'fetched data', {
-        cacheTime: Infinity,
-      })
+      const query = createQuery(() => ({
+        queryKey: key,
+        queryFn: () => 'fetched data',
+        gcTime: Infinity,
+      }))
+      return <div>{query.data}</div>
+    }
+
+    const result = render(() => (
+      <QueryClientProvider client={queryClient}>
+        <Page />
+      </QueryClientProvider>
+    ))
+
+    await waitFor(() => screen.getByText('fetched data'))
+    const setTimeoutSpy = jest.spyOn(window, 'setTimeout')
+
+    result.unmount()
+
+    expect(setTimeoutSpy).not.toHaveBeenCalled()
+  })
+
+  it('should schedule garbage collection, if gcTimeout is not set to `Infinity`', async () => {
+    const key = queryKey()
+
+    function Page() {
+      const query = createQuery(() => ({
+        queryKey: key,
+        queryFn: () => 'fetched data',
+        gcTime: 1000 * 60 * 10, //10 Minutes
+      }))
       return <div>{query.data}</div>
     }
 
@@ -4226,12 +4007,14 @@ describe('createQuery', () => {
     ))
 
     await waitFor(() => screen.getByText('fetched data'))
+    const setTimeoutSpy = jest.spyOn(window, 'setTimeout')
 
     result.unmount()
 
-    const query = queryCache.find(key())
-    // @ts-expect-error
-    expect(query!.cacheTimeout).toBe(undefined)
+    expect(setTimeoutSpy).toHaveBeenLastCalledWith(
+      expect.any(Function),
+      1000 * 60 * 10,
+    )
   })
 
   it('should not cause memo churn when data does not change', async () => {
@@ -4240,16 +4023,19 @@ describe('createQuery', () => {
     const memoFn = jest.fn()
 
     function Page() {
-      const result = createQuery(key, async () => {
-        await sleep(10)
-        return (
-          queryFn() || {
-            data: {
-              nested: true,
-            },
-          }
-        )
-      })
+      const result = createQuery(() => ({
+        queryKey: key,
+        queryFn: async () => {
+          await sleep(10)
+          return (
+            queryFn() || {
+              data: {
+                nested: true,
+              },
+            }
+          )
+        },
+      }))
 
       createMemo(() => {
         memoFn()
@@ -4271,7 +4057,7 @@ describe('createQuery', () => {
       </QueryClientProvider>
     ))
 
-    await waitFor(() => screen.getByText('status loading'))
+    await waitFor(() => screen.getByText('status pending'))
     await waitFor(() => screen.getByText('status success'))
     fireEvent.click(screen.getByText('refetch'))
     await waitFor(() => screen.getByText('isFetching true'))
@@ -4286,11 +4072,11 @@ describe('createQuery', () => {
 
     function Page() {
       const [int, setInt] = createSignal(200)
-      const state = createQuery(key, () => count++, {
-        get refetchInterval() {
-          return int()
-        },
-      })
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn: () => count++,
+        refetchInterval: int(),
+      }))
 
       createEffect(() => {
         if (state.data === 2) {
@@ -4319,16 +4105,14 @@ describe('createQuery', () => {
     const states: CreateQueryResult<number>[] = []
 
     function Page() {
-      const state = createQuery(
-        key,
-        async () => {
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn: async () => {
           await sleep(10)
           return count++
         },
-        {
-          refetchInterval: (data = 0) => (data < 2 ? 10 : false),
-        },
-      )
+        refetchInterval: (data = 0) => (data < 2 ? 10 : false),
+      }))
 
       createRenderEffect(() => {
         states.push({ ...state })
@@ -4356,7 +4140,7 @@ describe('createQuery', () => {
 
     expect(states).toMatchObject([
       {
-        status: 'loading',
+        status: 'pending',
         isFetching: true,
         data: undefined,
       },
@@ -4393,9 +4177,11 @@ describe('createQuery', () => {
     const states: CreateQueryResult<number>[] = []
 
     function Page() {
-      const state = createQuery(key, () => 1, {
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn: () => 1,
         refetchInterval: 0,
-      })
+      }))
 
       createRenderEffect(() => {
         states.push({ ...state })
@@ -4418,7 +4204,7 @@ describe('createQuery', () => {
 
     expect(states).toMatchObject([
       {
-        status: 'loading',
+        status: 'pending',
         isFetching: true,
         data: undefined,
       },
@@ -4432,10 +4218,10 @@ describe('createQuery', () => {
 
   it('should accept an empty string as query key', async () => {
     function Page() {
-      const result = createQuery(
-        () => [''],
-        (ctx) => ctx.queryKey,
-      )
+      const result = createQuery(() => ({
+        queryKey: [''],
+        queryFn: (ctx) => ctx.queryKey,
+      }))
       return <>{JSON.stringify(result.data)}</>
     }
 
@@ -4450,10 +4236,10 @@ describe('createQuery', () => {
 
   it('should accept an object as query key', async () => {
     function Page() {
-      const result = createQuery(
-        () => [{ a: 'a' }],
-        (ctx) => ctx.queryKey,
-      )
+      const result = createQuery(() => ({
+        queryKey: [{ a: 'a' }],
+        queryFn: (ctx) => ctx.queryKey,
+      }))
       return <>{JSON.stringify(result.data)}</>
     }
 
@@ -4472,17 +4258,17 @@ describe('createQuery', () => {
     const queryFn = jest.fn<string, unknown[]>().mockReturnValue('data')
 
     function Disabled() {
-      createQuery(key, queryFn, { enabled: false })
+      createQuery(() => ({ queryKey: key, queryFn, enabled: false }))
       return null
     }
 
     function Page() {
       const [enabled, setEnabled] = createSignal(false)
-      const result = createQuery(key, queryFn, {
-        get enabled() {
-          return enabled()
-        },
-      })
+      const result = createQuery(() => ({
+        queryKey: key,
+        queryFn,
+        enabled: enabled(),
+      }))
       return (
         <>
           <Disabled />
@@ -4509,9 +4295,11 @@ describe('createQuery', () => {
     const states: CreateQueryResult<string>[] = []
 
     function Page() {
-      const state = createQuery(key1, () => 'data', {
+      const state = createQuery(() => ({
+        queryKey: key1,
+        queryFn: () => 'data',
         placeholderData: 'placeholder',
-      })
+      }))
 
       createRenderEffect(() => {
         states.push({ ...state })
@@ -4554,12 +4342,12 @@ describe('createQuery', () => {
     function Page() {
       const [count, setCount] = createSignal(0)
 
-      const state = createQuery(key1, () => 'data', {
+      const state = createQuery(() => ({
+        queryKey: key1,
+        queryFn: () => 'data',
         placeholderData: 'placeholder',
-        get enabled() {
-          return count() === 0
-        },
-      })
+        enabled: count() === 0,
+      }))
 
       createRenderEffect(() => {
         states.push({ state: { ...state }, count: count() })
@@ -4618,10 +4406,12 @@ describe('createQuery', () => {
     const states: CreateQueryResult<string>[] = []
 
     function Page() {
-      const state = createQuery(key1, () => 1, {
+      const state = createQuery(() => ({
+        queryKey: key1,
+        queryFn: () => 1,
         placeholderData: 23,
         select: (data) => String(data * 2),
-      })
+      }))
 
       createRenderEffect(() => {
         states.push({ ...state })
@@ -4663,13 +4453,15 @@ describe('createQuery', () => {
     let placeholderFunctionRunCount = 0
 
     function Page() {
-      const state = createQuery(key1, () => 1, {
+      const state = createQuery(() => ({
+        queryKey: key1,
+        queryFn: () => 1,
         placeholderData: () => {
           placeholderFunctionRunCount++
           return 23
         },
         select: (data) => String(data * 2),
-      })
+      }))
 
       createRenderEffect(() => {
         states.push({ ...state })
@@ -4706,60 +4498,6 @@ describe('createQuery', () => {
     expect(placeholderFunctionRunCount).toEqual(1)
   })
 
-  // React Specific implementation. Not really needed since solid functions are stable
-  it.skip('select should only run when dependencies change if memoized', async () => {
-    const key1 = queryKey()
-
-    let selectRun = 0
-
-    function Page() {
-      //@ts-expect-error skip this test
-      const [count, inc] = NotReact.useReducer((prev) => prev + 1, 2)
-
-      const state = createQuery(
-        key1,
-        async () => {
-          await sleep(10)
-          return 0
-        },
-        {
-          //@ts-expect-error skip this test
-          select: NotReact.useCallback(
-            (data: number) => {
-              selectRun++
-              return `selected ${data + count}`
-            },
-            [count],
-          ),
-          placeholderData: 99,
-        },
-      )
-
-      return (
-        <div>
-          <h2>Data: {state.data}</h2>
-          <button onClick={inc}>inc: {count}</button>
-        </div>
-      )
-    }
-
-    render(() => (
-      <QueryClientProvider client={queryClient}>
-        <Page />
-      </QueryClientProvider>
-    ))
-    await waitFor(() => screen.getByText('Data: selected 101')) // 99 + 2
-    expect(selectRun).toBe(1)
-
-    await waitFor(() => screen.getByText('Data: selected 2')) // 0 + 2
-    expect(selectRun).toBe(2)
-
-    fireEvent.click(screen.getByRole('button', { name: /inc/i }))
-
-    await waitFor(() => screen.getByText('Data: selected 3')) // 0 + 3
-    expect(selectRun).toBe(3)
-  })
-
   it('select should always return the correct state', async () => {
     const key1 = queryKey()
 
@@ -4775,20 +4513,18 @@ describe('createQuery', () => {
         setForceValue((prev) => prev + 1)
       }
 
-      const state = createQuery(
-        key1,
-        async () => {
+      const state = createQuery(() => ({
+        queryKey: key1,
+        queryFn: async () => {
           await sleep(10)
           return 0
         },
-        {
-          get select() {
-            const currentCount = count()
-            return (data: number) => `selected ${data + currentCount}`
-          },
-          placeholderData: 99,
+        get select() {
+          const currentCount = count()
+          return (data: number) => `selected ${data + currentCount}`
         },
-      )
+        placeholderData: 99,
+      }))
 
       return (
         <div>
@@ -4827,16 +4563,14 @@ describe('createQuery', () => {
     function Page() {
       const [forceValue, setForceValue] = createSignal(1)
 
-      const state = createQuery(
-        key1,
-        async () => {
+      const state = createQuery(() => ({
+        queryKey: key1,
+        queryFn: async () => {
           await sleep(10)
           return [1, 2]
         },
-        {
-          select: (res) => res.map((x) => x + 1),
-        },
-      )
+        select: (res) => res.map((x) => x + 1),
+      }))
 
       createEffect(() => {
         if (state.data) {
@@ -4889,7 +4623,7 @@ describe('createQuery', () => {
     }
 
     function Page() {
-      const state = createQuery(key, queryFn)
+      const state = createQuery(() => ({ queryKey: key, queryFn }))
       return (
         <div>
           <h1>Status: {state.status}</h1>
@@ -4916,16 +4650,20 @@ describe('createQuery', () => {
 
     const queryFn: QueryFunction<
       string,
-      readonly [ReturnType<typeof key>, number]
+      readonly [typeof key, number]
     > = async (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 = createQuery(() => [key(), props.limit] as const, queryFn)
+      const state = createQuery(() => ({
+        queryKey: [key, props.limit] as const,
+        queryFn,
+      }))
       states[props.limit] = state
       return (
         <div>
@@ -4951,27 +4689,27 @@ describe('createQuery', () => {
 
     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',
     })
   })
@@ -4989,7 +4727,7 @@ describe('createQuery', () => {
       const [id, setId] = createSignal(1)
       const [hasChanged, setHasChanged] = createSignal(false)
 
-      const state = createQuery(() => [key(), id()], queryFn)
+      const state = createQuery(() => ({ queryKey: [key, id()], queryFn }))
 
       createRenderEffect(() => {
         states.push({ ...state })
@@ -5015,7 +4753,7 @@ describe('createQuery', () => {
     expect(states.length).toBe(2)
     // Load query 1
     expect(states[0]).toMatchObject({
-      status: 'loading',
+      status: 'pending',
       error: null,
     })
     // No rerenders - No state updates
@@ -5032,15 +4770,15 @@ describe('createQuery', () => {
     let count = 0
 
     function Page() {
-      const state = createQuery(
-        key,
-        async () => {
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn: async () => {
           await sleep(10)
           count++
           return count
         },
-        { staleTime: Infinity },
-      )
+        staleTime: Infinity,
+      }))
 
       createRenderEffect(() => {
         states.push({ ...state })
@@ -5048,7 +4786,9 @@ describe('createQuery', () => {
 
       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>
@@ -5071,29 +4811,27 @@ describe('createQuery', () => {
     expect(count).toBe(2)
 
     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,
@@ -5106,15 +4844,17 @@ describe('createQuery', () => {
     let count = 0
 
     function Page() {
-      const state = createQuery(
-        key,
-        async () => {
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn: async () => {
           await sleep(10)
           count++
           return count
         },
-        { staleTime: Infinity, enabled: false, notifyOnChangeProps: 'all' },
-      )
+        staleTime: Infinity,
+        enabled: false,
+        notifyOnChangeProps: 'all',
+      }))
 
       createRenderEffect(() => {
         states.push({ ...state })
@@ -5125,7 +4865,9 @@ describe('createQuery', () => {
       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>
       )
@@ -5149,29 +4891,26 @@ describe('createQuery', () => {
     expect(count).toBe(1)
 
     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,
@@ -5190,7 +4929,12 @@ describe('createQuery', () => {
     }
 
     function Page() {
-      const state = createQuery(key, () => 'test', { queryKeyHashFn })
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn: () => 'test',
+        queryKeyHashFn,
+      }))
+
       createEffect(
         on(
           () => state.status,
@@ -5221,20 +4965,20 @@ describe('createQuery', () => {
     })
 
     function Page(props: { enabled: boolean }) {
-      const state = createQuery(() => ['key'], queryFn, {
-        get enabled() {
-          return props.enabled
-        },
+      const state = createQuery(() => ({
+        queryKey: ['key'],
+        queryFn,
+        enabled: props.enabled,
         retry: false,
         retryOnMount: false,
         refetchOnMount: false,
         refetchOnWindowFocus: false,
-      })
+      }))
 
       return (
         <Switch fallback={<div>rendered</div>}>
-          <Match when={state.isLoading}>
-            <div>status: loading</div>
+          <Match when={state.isPending}>
+            <div>status: pending</div>
           </Match>
           <Match when={state.error instanceof Error}>
             <div>error</div>
@@ -5264,7 +5008,7 @@ describe('createQuery', () => {
     ))
 
     // initial state check
-    screen.getByText('status: loading')
+    screen.getByText('status: pending')
 
     // // render error state component
     await waitFor(() => screen.getByText('error'))
@@ -5282,9 +5026,9 @@ describe('createQuery', () => {
 
   it('should refetch when query key changed when previous status is error', async () => {
     function Page(props: { id: number }) {
-      const state = createQuery(
-        () => [props.id],
-        async () => {
+      const state = createQuery(() => ({
+        queryKey: [props.id],
+        queryFn: async () => {
           await sleep(10)
           if (props.id % 2 === 1) {
             return Promise.reject(new Error('Error'))
@@ -5292,18 +5036,16 @@ describe('createQuery', () => {
             return 'data'
           }
         },
-        {
-          retry: false,
-          retryOnMount: false,
-          refetchOnMount: false,
-          refetchOnWindowFocus: false,
-        },
-      )
+        retry: false,
+        retryOnMount: false,
+        refetchOnMount: false,
+        refetchOnWindowFocus: false,
+      }))
 
       return (
         <Switch fallback={<div>rendered</div>}>
-          <Match when={state.isLoading}>
-            <div>status: loading</div>
+          <Match when={state.isPending}>
+            <div>status: pending</div>
           </Match>
           <Match when={state.error instanceof Error}>
             <div>error</div>
@@ -5333,7 +5075,7 @@ describe('createQuery', () => {
     ))
 
     // initial state check
-    screen.getByText('status: loading')
+    screen.getByText('status: pending')
 
     // render error state component
     await waitFor(() => screen.getByText('error'))
@@ -5349,19 +5091,17 @@ describe('createQuery', () => {
 
   it('should refetch when query key changed when switching between erroneous queries', async () => {
     function Page(props: { id: boolean }) {
-      const state = createQuery(
-        () => [props.id],
-        async () => {
+      const state = createQuery(() => ({
+        queryKey: [props.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,
+      }))
       return (
         <Switch fallback={<div>rendered</div>}>
           <Match when={state.isFetching}>
@@ -5411,7 +5151,7 @@ describe('createQuery', () => {
     await waitFor(() => screen.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: CreateQueryResult<number>[] = []
     const error = new Error('oops')
@@ -5419,9 +5159,9 @@ describe('createQuery', () => {
     let count = 0
 
     function Page() {
-      const state = createQuery(
-        key,
-        async () => {
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn: async () => {
           await sleep(10)
           if (count === 0) {
             count++
@@ -5429,10 +5169,8 @@ describe('createQuery', () => {
           }
           return 5
         },
-        {
-          retry: false,
-        },
-      )
+        retry: false,
+      }))
 
       createRenderEffect(() => {
         states.push({ ...state })
@@ -5440,8 +5178,8 @@ describe('createQuery', () => {
 
       return (
         <Switch fallback={<div>data: {state.data}</div>}>
-          <Match when={state.isLoading}>
-            <div>status: loading</div>
+          <Match when={state.isPending}>
+            <div>status: pending</div>
           </Match>
           <Match when={state.error instanceof Error}>
             <div>
@@ -5467,7 +5205,7 @@ describe('createQuery', () => {
     await waitFor(() => expect(states.length).toBe(4))
 
     expect(states[0]).toMatchObject({
-      status: 'loading',
+      status: 'pending',
       data: undefined,
       error: null,
     })
@@ -5479,7 +5217,7 @@ describe('createQuery', () => {
     })
 
     expect(states[2]).toMatchObject({
-      status: 'loading',
+      status: 'pending',
       data: undefined,
       error: null,
     })
@@ -5499,13 +5237,13 @@ describe('createQuery', () => {
       const states: Array<any> = []
 
       function Page() {
-        const state = createQuery({
+        const state = createQuery(() => ({
           queryKey: key,
           queryFn: async () => {
             await sleep(10)
             return 'data'
           },
-        })
+        }))
 
         createEffect(() => {
           states.push(state.fetchStatus)
@@ -5527,7 +5265,7 @@ describe('createQuery', () => {
         </QueryClientProvider>
       ))
 
-      await waitFor(() => screen.getByText('status: loading, isPaused: true'))
+      await waitFor(() => screen.getByText('status: pending, isPaused: true'))
 
       onlineMock.mockReturnValue(true)
       window.dispatchEvent(new Event('online'))
@@ -5547,14 +5285,14 @@ describe('createQuery', () => {
       let count = 0
 
       function Page() {
-        const state = createQuery<unknown, string, string>({
+        const state = createQuery<unknown, string, string>(() => ({
           queryKey: key,
           queryFn: async () => {
             count++
             await sleep(10)
             return 'data' + count
           },
-        })
+        }))
 
         return (
           <div>
@@ -5565,7 +5303,7 @@ describe('createQuery', () => {
             <div>failureReason: {state.failureReason ?? 'null'}</div>
             <div>data: {state.data}</div>
             <button
-              onClick={() => queryClient.invalidateQueries({ queryKey: key() })}
+              onClick={() => queryClient.invalidateQueries({ queryKey: key })}
             >
               invalidate
             </button>
@@ -5617,14 +5355,14 @@ describe('createQuery', () => {
       let count = 0
 
       function Page() {
-        const state = createQuery({
+        const state = createQuery(() => ({
           queryKey: key,
           queryFn: async () => {
             count++
             await sleep(10)
             return 'data' + count
           },
-        })
+        }))
 
         return (
           <div>
@@ -5633,7 +5371,7 @@ describe('createQuery', () => {
             </div>
             <div>data: {state.data}</div>
             <button
-              onClick={() => queryClient.invalidateQueries({ queryKey: key() })}
+              onClick={() => queryClient.invalidateQueries({ queryKey: key })}
             >
               invalidate
             </button>
@@ -5656,7 +5394,7 @@ describe('createQuery', () => {
         screen.getByText('status: success, fetchStatus: paused'),
       )
 
-      window.dispatchEvent(new FocusEvent('focus'))
+      window.dispatchEvent(new Event('visibilitychange'))
       await sleep(15)
 
       await waitFor(() =>
@@ -5671,14 +5409,14 @@ describe('createQuery', () => {
       let count = 0
 
       function Page() {
-        const state = createQuery({
+        const state = createQuery(() => ({
           queryKey: key,
           queryFn: async () => {
             count++
             await sleep(10)
             return 'data' + count
           },
-        })
+        }))
 
         return (
           <div>
@@ -5687,7 +5425,7 @@ describe('createQuery', () => {
             </div>
             <div>data: {state.data}</div>
             <button
-              onClick={() => queryClient.invalidateQueries({ queryKey: key() })}
+              onClick={() => queryClient.invalidateQueries({ queryKey: key })}
             >
               invalidate
             </button>
@@ -5704,7 +5442,7 @@ describe('createQuery', () => {
       ))
 
       await waitFor(() =>
-        screen.getByText('status: loading, fetchStatus: paused'),
+        screen.getByText('status: pending, fetchStatus: paused'),
       )
 
       fireEvent.click(screen.getByRole('button', { name: /invalidate/i }))
@@ -5713,7 +5451,7 @@ describe('createQuery', () => {
 
       // invalidation should not trigger a refetch
       await waitFor(() =>
-        screen.getByText('status: loading, fetchStatus: paused'),
+        screen.getByText('status: pending, fetchStatus: paused'),
       )
 
       expect(count).toBe(0)
@@ -5725,7 +5463,7 @@ describe('createQuery', () => {
       let count = 0
 
       function Page() {
-        const state = createQuery({
+        const state = createQuery(() => ({
           queryKey: key,
           queryFn: async () => {
             count++
@@ -5733,7 +5471,7 @@ describe('createQuery', () => {
             return 'data' + count
           },
           initialData: 'initial',
-        })
+        }))
 
         return (
           <div>
@@ -5742,7 +5480,7 @@ describe('createQuery', () => {
             </div>
             <div>data: {state.data}</div>
             <button
-              onClick={() => queryClient.invalidateQueries({ queryKey: key() })}
+              onClick={() => queryClient.invalidateQueries({ queryKey: key })}
             >
               invalidate
             </button>
@@ -5783,7 +5521,7 @@ describe('createQuery', () => {
       let count = 0
 
       function Page() {
-        const state = createQuery({
+        const state = createQuery(() => ({
           queryKey: key,
           queryFn: async () => {
             count++
@@ -5791,7 +5529,7 @@ describe('createQuery', () => {
             return 'data' + count
           },
           initialData: 'initial',
-        })
+        }))
 
         return (
           <div>
@@ -5800,7 +5538,7 @@ describe('createQuery', () => {
             </div>
             <div>data: {state.data}</div>
             <button
-              onClick={() => queryClient.invalidateQueries({ queryKey: key() })}
+              onClick={() => queryClient.invalidateQueries({ queryKey: key })}
             >
               invalidate
             </button>
@@ -5833,7 +5571,7 @@ describe('createQuery', () => {
       )
 
       // triggers a second pause
-      window.dispatchEvent(new FocusEvent('focus'))
+      window.dispatchEvent(new Event('visibilitychange'))
 
       onlineMock.mockReturnValue(true)
       window.dispatchEvent(new Event('online'))
@@ -5854,7 +5592,7 @@ describe('createQuery', () => {
       let count = 0
 
       function Page() {
-        const state = createQuery<unknown, Error>({
+        const state = createQuery<unknown, Error>(() => ({
           queryKey: key,
           queryFn: async (): Promise<unknown> => {
             count++
@@ -5863,7 +5601,7 @@ describe('createQuery', () => {
           },
           retry: 2,
           retryDelay: 10,
-        })
+        }))
 
         return (
           <div>
@@ -5884,7 +5622,7 @@ describe('createQuery', () => {
 
       await waitFor(() =>
         screen.getByText(
-          'status: loading, fetchStatus: fetching, failureCount: 1',
+          'status: pending, fetchStatus: fetching, failureCount: 1',
         ),
       )
       await waitFor(() => screen.getByText('failureReason: failed1'))
@@ -5895,7 +5633,7 @@ describe('createQuery', () => {
 
       await waitFor(() =>
         screen.getByText(
-          'status: loading, fetchStatus: paused, failureCount: 1',
+          'status: pending, fetchStatus: paused, failureCount: 1',
         ),
       )
       await waitFor(() => screen.getByText('failureReason: failed1'))
@@ -5920,14 +5658,14 @@ describe('createQuery', () => {
       let count = 0
 
       function Component() {
-        const state = createQuery({
+        const state = createQuery(() => ({
           queryKey: key,
           queryFn: async () => {
             count++
             await sleep(10)
             return 'data' + count
           },
-        })
+        }))
 
         return (
           <div>
@@ -5959,7 +5697,7 @@ describe('createQuery', () => {
       ))
 
       await waitFor(() =>
-        screen.getByText('status: loading, fetchStatus: paused'),
+        screen.getByText('status: pending, fetchStatus: paused'),
       )
 
       fireEvent.click(screen.getByRole('button', { name: /hide/i }))
@@ -5969,7 +5707,7 @@ describe('createQuery', () => {
 
       await sleep(15)
 
-      expect(queryClient.getQueryState(key())).toMatchObject({
+      expect(queryClient.getQueryState(key)).toMatchObject({
         fetchStatus: 'idle',
         status: 'success',
       })
@@ -5984,7 +5722,7 @@ describe('createQuery', () => {
       let count = 0
 
       function Page() {
-        const state = createQuery({
+        const state = createQuery(() => ({
           queryKey: key,
           queryFn: async () => {
             count++
@@ -5992,12 +5730,12 @@ describe('createQuery', () => {
             return 'data' + count
           },
           refetchOnReconnect: false,
-        })
+        }))
 
         return (
           <div>
             <button
-              onClick={() => queryClient.cancelQueries({ queryKey: key() })}
+              onClick={() => queryClient.cancelQueries({ queryKey: key })}
             >
               cancel
             </button>
@@ -6018,13 +5756,13 @@ describe('createQuery', () => {
       ))
 
       await waitFor(() =>
-        screen.getByText('status: loading, fetchStatus: paused'),
+        screen.getByText('status: pending, fetchStatus: paused'),
       )
 
       fireEvent.click(screen.getByRole('button', { name: /cancel/i }))
 
       await waitFor(() =>
-        screen.getByText('status: loading, fetchStatus: idle'),
+        screen.getByText('status: pending, fetchStatus: idle'),
       )
 
       expect(count).toBe(0)
@@ -6035,7 +5773,7 @@ describe('createQuery', () => {
       await sleep(15)
 
       await waitFor(() =>
-        screen.getByText('status: loading, fetchStatus: idle'),
+        screen.getByText('status: pending, fetchStatus: idle'),
       )
 
       expect(count).toBe(0)
@@ -6048,14 +5786,14 @@ describe('createQuery', () => {
       let count = 0
 
       function Component() {
-        const state = createQuery({
+        const state = createQuery(() => ({
           queryKey: key,
-          queryFn: async ({ signal }) => {
+          queryFn: async ({ signal: _signal }) => {
             count++
             await sleep(10)
-            return `${signal ? 'signal' : 'data'}${count}`
+            return `signal${count}`
           },
-        })
+        }))
 
         return (
           <div>
@@ -6075,7 +5813,7 @@ describe('createQuery', () => {
             {show() && <Component />}
             <button onClick={() => setShow(false)}>hide</button>
             <button
-              onClick={() => queryClient.invalidateQueries({ queryKey: key() })}
+              onClick={() => queryClient.invalidateQueries({ queryKey: key })}
             >
               invalidate
             </button>
@@ -6110,7 +5848,7 @@ describe('createQuery', () => {
 
       await sleep(15)
 
-      expect(queryClient.getQueryState(key())).toMatchObject({
+      expect(queryClient.getQueryState(key)).toMatchObject({
         fetchStatus: 'idle',
         status: 'success',
       })
@@ -6129,7 +5867,7 @@ describe('createQuery', () => {
       let count = 0
 
       function Page() {
-        const state = createQuery({
+        const state = createQuery(() => ({
           queryKey: key,
           queryFn: async () => {
             count++
@@ -6137,7 +5875,7 @@ describe('createQuery', () => {
             return 'data ' + count
           },
           networkMode: 'always',
-        })
+        }))
 
         return (
           <div>
@@ -6171,7 +5909,7 @@ describe('createQuery', () => {
       let count = 0
 
       function Page() {
-        const state = createQuery({
+        const state = createQuery(() => ({
           queryKey: key,
           queryFn: async (): Promise<unknown> => {
             count++
@@ -6181,7 +5919,7 @@ describe('createQuery', () => {
           networkMode: 'always',
           retry: 1,
           retryDelay: 5,
-        })
+        }))
 
         return (
           <div>
@@ -6221,7 +5959,7 @@ describe('createQuery', () => {
       let count = 0
 
       function Page() {
-        const state = createQuery<unknown, Error>({
+        const state = createQuery<unknown, Error>(() => ({
           queryKey: key,
           queryFn: async (): Promise<unknown> => {
             count++
@@ -6231,7 +5969,7 @@ describe('createQuery', () => {
           retry: 2,
           retryDelay: 1,
           networkMode: 'offlineFirst',
-        })
+        }))
 
         return (
           <div>
@@ -6252,7 +5990,7 @@ describe('createQuery', () => {
 
       await waitFor(() =>
         screen.getByText(
-          'status: loading, fetchStatus: paused, failureCount: 1',
+          'status: pending, fetchStatus: paused, failureCount: 1',
         ),
       )
       await waitFor(() => screen.getByText('failureReason: failed1'))
@@ -6283,10 +6021,12 @@ describe('createQuery', () => {
     }
 
     function Page() {
-      const state = createQuery(key, queryFn, {
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn,
         retry: false,
         retryOnMount: false,
-      })
+      }))
 
       createRenderEffect(() => {
         states.push({ ...state })
@@ -6295,7 +6035,7 @@ describe('createQuery', () => {
       return <></>
     }
 
-    await queryClient.prefetchQuery(key(), queryFn)
+    await queryClient.prefetchQuery({ queryKey: key, queryFn })
     render(() => (
       <QueryClientProvider client={queryClient}>
         <Page />
@@ -6315,11 +6055,15 @@ describe('createQuery', () => {
     const onSuccess = jest.fn()
 
     function Page() {
-      const state = createQuery(key, () => 'data', { onSuccess })
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn: () => 'data',
+        onSuccess,
+      }))
       return (
         <div>
           <div>data: {state.data}</div>
-          <button onClick={() => queryClient.setQueryData(key(), 'newData')}>
+          <button onClick={() => queryClient.setQueryData(key, 'newData')}>
             setQueryData
           </button>
         </div>
@@ -6344,14 +6088,19 @@ describe('createQuery', () => {
     const key = queryKey()
 
     function Page() {
-      const state = createQuery(key, () => 'data')
+      const state = createQuery(() => ({
+        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
@@ -6379,15 +6128,13 @@ describe('createQuery', () => {
     const error = new Error('oops')
 
     function Page() {
-      const state = createQuery(
-        key,
-        async (): Promise<unknown> => {
+      const state = createQuery(() => ({
+        queryKey: key,
+        queryFn: async (): Promise<unknown> => {
           throw error
         },
-        {
-          retry: false,
-        },
-      )
+        retry: false,
+      }))
       return (
         <div>
           <button onClick={() => state.refetch()}>refetch</button>
@@ -6407,4 +6154,27 @@ describe('createQuery', () => {
     fireEvent.click(fetchBtn)
     await waitFor(() => screen.getByText('data: 3'))
   })
+
+  it('should use provided custom queryClient', async () => {
+    const key = queryKey()
+    const queryFn = () => {
+      return Promise.resolve('custom client')
+    }
+
+    function Page() {
+      const state = createQuery(
+        () => ({ queryKey: key, queryFn }),
+        () => queryClient,
+      )
+      return (
+        <div>
+          <h1>Status: {state.data}</h1>
+        </div>
+      )
+    }
+
+    render(() => <Page />)
+
+    await waitFor(() => screen.getByText('Status: custom client'))
+  })
 })