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

package/build/{solid → source}/__tests__/createQuery.test.jsx

@@ -1,8 +1,8 @@
 import '@testing-library/jest-dom';
 import { createEffect, createMemo, createRenderEffect, createSignal, ErrorBoundary, Match, on, Switch, } from 'solid-js';
 import { fireEvent, render, screen, waitFor } from 'solid-testing-library';
-import { createQuery, QueryCache, QueryClientProvider } from '..';
-import { Blink, createQueryClient, expectType, mockLogger, mockNavigatorOnLine, mockVisibilityState, queryKey, setActTimeout, sleep, } from './utils';
+import { createQuery, QueryCache, QueryClientProvider, keepPreviousData, } from '..';
+import { Blink, createQueryClient, expectType, mockNavigatorOnLine, mockVisibilityState, queryKey, setActTimeout, sleep, } from './utils';
 describe('createQuery', () => {
     const queryCache = new QueryCache();
     const queryClient = createQueryClient({ queryCache });
@@ -12,75 +12,100 @@ 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(noQueryFn.data);
             expectType(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(fromQueryFn.data);
             expectType(fromQueryFn.error);
             // it should be possible to specify the result type
-            const withResult = createQuery(key, () => 'test');
+            const withResult = createQuery(() => ({
+                queryKey: key,
+                queryFn: () => 'test',
+            }));
             expectType(withResult.data);
             expectType(withResult.error);
             // it should be possible to specify the error type
-            const withError = createQuery(key, () => 'test');
+            const withError = createQuery(() => ({
+                queryKey: key,
+                queryFn: () => 'test',
+            }));
             expectType(withError.data);
             expectType(withError.error);
             // it should provide the result type in the configuration
-            createQuery(() => [key()], async () => true, {
+            createQuery(() => ({
+                queryKey: [key],
+                queryFn: async () => true,
                 onSuccess: (data) => expectType(data),
                 onSettled: (data) => expectType(data),
-            });
+            }));
             // it should be possible to specify a union type as result type
-            const unionTypeSync = createQuery(key, () => (Math.random() > 0.5 ? 'a' : 'b'), {
+            const unionTypeSync = createQuery(() => ({
+                queryKey: key,
+                queryFn: () => (Math.random() > 0.5 ? 'a' : 'b'),
                 onSuccess: (data) => expectType(data),
-            });
+            }));
             expectType(unionTypeSync.data);
-            const unionTypeAsync = createQuery(key, () => Promise.resolve(Math.random() > 0.5 ? 'a' : 'b'), {
+            const unionTypeAsync = createQuery(() => ({
+                queryKey: key,
+                queryFn: () => Promise.resolve(Math.random() > 0.5 ? 'a' : 'b'),
                 onSuccess: (data) => expectType(data),
-            });
+            }));
             expectType(unionTypeAsync.data);
             // should error when the query function result does not match with the specified type
             // @ts-expect-error
-            createQuery(key, () => 'test');
+            createQuery(() => ({ queryKey: key, queryFn: () => 'test' }));
             // it should infer the result type from a generic query function
             function queryFn() {
                 return Promise.resolve({});
             }
-            const fromGenericQueryFn = createQuery(key, () => queryFn());
+            const fromGenericQueryFn = createQuery(() => ({
+                queryKey: key,
+                queryFn: () => queryFn(),
+            }));
             expectType(fromGenericQueryFn.data);
             expectType(fromGenericQueryFn.error);
-            const fromGenericOptionsQueryFn = createQuery({
+            const fromGenericOptionsQueryFn = createQuery(() => ({
                 queryKey: key,
                 queryFn: () => queryFn(),
-            });
+            }));
             expectType(fromGenericOptionsQueryFn.data);
             expectType(fromGenericOptionsQueryFn.error);
             const getMyDataArrayKey = async ({ queryKey: [, n], }) => {
                 return n + 42;
             };
-            createQuery({
-                queryKey: () => ['my-data', 100],
+            createQuery(() => ({
+                queryKey: ['my-data', 100],
                 queryFn: getMyDataArrayKey,
-            });
+            }));
             const getMyDataStringKey = async (context) => {
                 expectType(context.queryKey);
                 return Number(context.queryKey[0]) + 42;
             };
-            createQuery({
-                queryKey: () => ['1'],
+            createQuery(() => ({
+                queryKey: ['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 = (qk, fetcher, options) => createQuery(qk, () => fetcher(qk()[1], 'token'), options);
-            const test = useWrappedQuery(() => [''], async () => '1');
+            const useWrappedQuery = (qk, fetcher, options) => createQuery(() => ({
+                queryKey: qk,
+                queryFn: () => fetcher(qk[1], 'token'),
+                ...options,
+            }));
+            const test = useWrappedQuery([''], async () => '1');
             expectType(test.data);
             // handles wrapped queries with custom fetcher passed directly to createQuery
-            const useWrappedFuncStyleQuery = (qk, fetcher, options) => createQuery(qk, fetcher, options);
-            const testFuncStyle = useWrappedFuncStyleQuery(() => [''], async () => true);
+            const useWrappedFuncStyleQuery = (qk, fetcher, options) => createQuery(() => ({ queryKey: qk, queryFn: fetcher, ...options }));
+            const testFuncStyle = useWrappedFuncStyleQuery([''], async () => true);
             expectType(testFuncStyle.data);
         }
     });
@@ -88,10 +113,13 @@ describe('createQuery', () => {
     it('should allow to set default data value', async () => {
         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>
           <h1>{state.data ?? 'default'}</h1>
         </div>);
@@ -106,14 +134,17 @@ describe('createQuery', () => {
         const key = queryKey();
         const states = [];
         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 });
             });
-            if (state.isLoading) {
+            if (state.isPending) {
                 expectType(state.data);
                 expectType(state.error);
             }
@@ -126,8 +157,8 @@ describe('createQuery', () => {
                 expectType(state.error);
             }
             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>
@@ -152,18 +183,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',
         });
         expect(states[1]).toEqual({
@@ -179,17 +209,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',
         });
@@ -198,17 +227,19 @@ describe('createQuery', () => {
         const key = queryKey();
         const states = [];
         function Page() {
-            const state = createQuery(key, () => Promise.reject('rejected'), {
+            const state = createQuery(() => ({
+                queryKey: key,
+                queryFn: () => Promise.reject(new Error('rejected')),
                 retry: 1,
                 retryDelay: 1,
-            });
+            }));
             createRenderEffect(() => {
                 states.push({ ...state });
             });
             return (<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>);
         }
         render(() => (<QueryClientProvider client={queryClient}>
@@ -228,18 +259,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',
         });
         expect(states[1]).toEqual({
@@ -248,51 +278,49 @@ 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',
         });
@@ -300,10 +328,15 @@ describe('createQuery', () => {
     it('should set isFetchedAfterMount to true after a query has been fetched', async () => {
         const key = queryKey();
         const states = [];
-        // 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 });
             });
@@ -330,10 +363,14 @@ describe('createQuery', () => {
         const states = [];
         const onSuccess = jest.fn();
         function Page() {
-            const state = createQuery(key, async () => {
-                await sleep(10);
-                return 'data';
-            }, { onSuccess });
+            const state = createQuery(() => ({
+                queryKey: key,
+                queryFn: async () => {
+                    await sleep(10);
+                    return 'data';
+                },
+                onSuccess,
+            }));
             createRenderEffect(() => {
                 states.push({ ...state });
             });
@@ -347,44 +384,17 @@ describe('createQuery', () => {
         expect(onSuccess).toHaveBeenCalledTimes(1);
         expect(onSuccess).toHaveBeenCalledWith('data');
     });
-    it('should call onSuccess after a query has been refetched', async () => {
-        const key = queryKey();
-        const states = [];
-        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 = [];
         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 });
             });
@@ -415,10 +425,14 @@ describe('createQuery', () => {
             return <>{show() && <Component />}</>;
         }
         function Component() {
-            const state = createQuery(key, async () => {
-                await sleep(10);
-                return 'data';
-            }, { onSuccess });
+            const state = createQuery(() => ({
+                queryKey: key,
+                queryFn: async () => {
+                    await sleep(10);
+                    return 'data';
+                },
+                onSuccess,
+            }));
             createRenderEffect(() => {
                 states.push({ ...state });
             });
@@ -436,10 +450,12 @@ describe('createQuery', () => {
         const states = [];
         const onError = jest.fn();
         function Page() {
-            const state = createQuery(key, () => Promise.reject('error'), {
+            const state = createQuery(() => ({
+                queryKey: key,
+                queryFn: () => Promise.reject(new Error('error')),
                 retry: false,
                 onError,
-            });
+            }));
             createRenderEffect(() => {
                 states.push({ ...state });
             });
@@ -451,18 +467,20 @@ 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 () => {
         const key = queryKey();
         const onError = jest.fn();
         function Page() {
-            const state = createQuery(key, async () => {
-                await sleep(10);
-                return 23;
-            }, {
+            const state = createQuery(() => ({
+                queryKey: key,
+                queryFn: async () => {
+                    await sleep(10);
+                    return 23;
+                },
                 onError,
-            });
+            }));
             return (<span>
           status: {state.status}, fetchStatus: {state.fetchStatus}
         </span>);
@@ -471,9 +489,9 @@ describe('createQuery', () => {
         <Page />
       </QueryClientProvider>));
         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();
     });
     it('should call onSettled after a query has been fetched', async () => {
@@ -481,7 +499,11 @@ describe('createQuery', () => {
         const states = [];
         const onSettled = jest.fn();
         function Page() {
-            const state = createQuery(key, () => 'data', { onSettled });
+            const state = createQuery(() => ({
+                queryKey: key,
+                queryFn: () => 'data',
+                onSettled,
+            }));
             createRenderEffect(() => {
                 states.push({ ...state });
             });
@@ -500,10 +522,12 @@ describe('createQuery', () => {
         const states = [];
         const onSettled = jest.fn();
         function Page() {
-            const state = createQuery(key, () => Promise.reject('error'), {
+            const state = createQuery(() => ({
+                queryKey: key,
+                queryFn: () => Promise.reject('error'),
                 retry: false,
                 onSettled,
-            });
+            }));
             createRenderEffect(() => {
                 states.push({ ...state });
             });
@@ -521,11 +545,16 @@ describe('createQuery', () => {
         const key = queryKey();
         let fetchCount = 0;
         function Page() {
-            const state = createQuery(key, async () => {
-                fetchCount++;
-                await sleep(10);
-                return 'data';
-            }, { enabled: false, initialData: 'initialData' });
+            const state = createQuery(() => ({
+                queryKey: key,
+                queryFn: async () => {
+                    fetchCount++;
+                    await sleep(10);
+                    return 'data';
+                },
+                enabled: false,
+                initialData: 'initialData',
+            }));
             createEffect(() => {
                 setActTimeout(() => {
                     state.refetch();
@@ -547,11 +576,16 @@ describe('createQuery', () => {
         const key = queryKey();
         let fetchCount = 0;
         function Page() {
-            const state = createQuery(key, async () => {
-                fetchCount++;
-                await sleep(10);
-                return 'data';
-            }, { enabled: false, initialData: 'initialData' });
+            const state = createQuery(() => ({
+                queryKey: key,
+                queryFn: async () => {
+                    fetchCount++;
+                    await sleep(10);
+                    return 'data';
+                },
+                enabled: false,
+                initialData: 'initialData',
+            }));
             createEffect(() => {
                 setActTimeout(() => {
                     state.refetch();
@@ -573,11 +607,15 @@ describe('createQuery', () => {
         const key = queryKey();
         let fetchCount = 0;
         function Page() {
-            const state = createQuery(key, async () => {
-                fetchCount++;
-                await sleep(10);
-                return 'data';
-            }, { enabled: false });
+            const state = createQuery(() => ({
+                queryKey: key,
+                queryFn: async () => {
+                    fetchCount++;
+                    await sleep(10);
+                    return 'data';
+                },
+                enabled: false,
+            }));
             createEffect(() => {
                 setActTimeout(() => {
                     state.refetch();
@@ -598,10 +636,9 @@ describe('createQuery', () => {
     it('should be able to watch a query without providing a query function', async () => {
         const key = queryKey();
         const states = [];
-        // TODO(lukemurray): do we want this to be reactive.
-        queryClient.setQueryDefaults(key(), { queryFn: () => 'data' });
+        queryClient.setQueryDefaults(key, { queryFn: () => 'data' });
         function Page() {
-            const state = createQuery(key);
+            const state = createQuery(() => ({ queryKey: key }));
             createRenderEffect(() => {
                 states.push({ ...state });
             });
@@ -615,7 +652,7 @@ describe('createQuery', () => {
         expect(states[0]).toMatchObject({ data: undefined });
         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 = [];
         function Page() {
@@ -633,13 +670,14 @@ describe('createQuery', () => {
         </div>);
         }
         function Component({ value }) {
-            const state = createQuery(key, async () => {
-                await sleep(10);
-                return 'data: ' + value;
-            }, {
-                cacheTime: 0,
-                notifyOnChangeProps: 'all',
-            });
+            const state = createQuery(() => ({
+                queryKey: key,
+                queryFn: async () => {
+                    await sleep(10);
+                    return 'data: ' + value;
+                },
+                gcTime: 0,
+            }));
             createRenderEffect(() => {
                 states.push({ ...state });
             });
@@ -656,78 +694,38 @@ 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 () => {
-        const key = queryKey();
-        const states = [];
-        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',
-            });
-            createRenderEffect(() => {
-                states.push({ ...state });
-            });
-            const { remove } = state;
-            //@ts-expect-error skip this test
-            NotReact.useEffect(() => {
-                setActTimeout(() => {
-                    remove();
-                    rerender({});
-                }, 20);
-            }, [remove]);
-            return null;
-        }
-        render(() => (<QueryClientProvider client={queryClient}>
-        <Page />
-      </QueryClientProvider>));
-        await sleep(100);
-        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 });
-    });
     it('should fetch when refetchOnMount is false and nothing has been fetched yet', async () => {
         const key = queryKey();
         const states = [];
         function Page() {
-            const state = createQuery(key, () => 'test', {
+            const state = createQuery(() => ({
+                queryKey: key,
+                queryFn: () => 'test',
                 refetchOnMount: false,
-            });
+            }));
             createRenderEffect(() => {
                 states.push({ ...state });
             });
@@ -744,11 +742,13 @@ describe('createQuery', () => {
     it('should not fetch when refetchOnMount is false and data has been fetched already', async () => {
         const key = queryKey();
         const states = [];
-        queryClient.setQueryData(key(), 'prefetched');
+        queryClient.setQueryData(key, 'prefetched');
         function Page() {
-            const state = createQuery(key, () => 'test', {
+            const state = createQuery(() => ({
+                queryKey: key,
+                queryFn: () => 'test',
                 refetchOnMount: false,
-            });
+            }));
             createRenderEffect(() => {
                 states.push({ ...state });
             });
@@ -765,9 +765,11 @@ describe('createQuery', () => {
         const key = queryKey();
         const states = [];
         function Page() {
-            const state = createQuery(key, () => ({ name: 'test' }), {
+            const state = createQuery(() => ({
+                queryKey: key,
+                queryFn: () => ({ name: 'test' }),
                 select: (data) => data.name,
-            });
+            }));
             createRenderEffect(() => {
                 states.push({ ...state });
             });
@@ -785,11 +787,11 @@ describe('createQuery', () => {
         const key = queryKey();
         const states = [];
         function Page() {
-            const state = createQuery({
+            const state = createQuery(() => ({
                 queryKey: key,
                 queryFn: () => ({ name: 'test' }),
                 select: (data) => data.name,
-            });
+            }));
             createRenderEffect(() => {
                 states.push({ ...state });
             });
@@ -803,23 +805,18 @@ describe('createQuery', () => {
         expect(states[0]).toMatchObject({ data: undefined });
         expect(states[1]).toMatchObject({ data: 'test' });
     });
-    it('should not re-render when it should only re-render only data change and the selected data did not change', async () => {
+    it('should be able to select a part of the data with select in object syntax', async () => {
         const key = queryKey();
         const states = [];
         function Page() {
-            const state = createQuery(key, () => ({ name: 'test' }), {
+            const state = createQuery(() => ({
+                queryKey: key,
+                queryFn: () => ({ name: 'test' }),
                 select: (data) => data.name,
-                notifyOnChangeProps: ['data'],
-            });
+            }));
             createRenderEffect(() => {
                 states.push({ ...state });
             });
-            createEffect(() => {
-                const refetch = state.refetch;
-                setActTimeout(() => {
-                    refetch();
-                }, 5);
-            });
             return null;
         }
         render(() => (<QueryClientProvider client={queryClient}>
@@ -830,69 +827,71 @@ describe('createQuery', () => {
         expect(states[0]).toMatchObject({ data: undefined });
         expect(states[1]).toMatchObject({ data: 'test' });
     });
-    it('should throw an error when a selector throws', async () => {
+    it('should not re-render when it should only re-render only data change and the selected data did not change', async () => {
         const key = queryKey();
         const states = [];
-        const error = new Error('Select Error');
         function Page() {
-            const state = createQuery(key, () => ({ name: 'test' }), {
-                select: () => {
-                    throw error;
+            const state = createQuery(() => ({
+                queryKey: key,
+                queryFn: async () => {
+                    await sleep(10);
+                    return { name: 'test' };
                 },
-            });
+                select: (data) => data.name,
+                notifyOnChangeProps: ['data'],
+            }));
             createRenderEffect(() => {
                 states.push({ ...state });
             });
-            return null;
+            return (<div>
+          data: {state.data}
+          <button onClick={() => state.refetch()}>refetch</button>
+        </div>);
         }
         render(() => (<QueryClientProvider client={queryClient}>
         <Page />
       </QueryClientProvider>));
-        await sleep(10);
-        expect(mockLogger.error).toHaveBeenCalledWith(error);
+        await waitFor(() => screen.getByText('data: test'));
         expect(states.length).toBe(2);
-        expect(states[0]).toMatchObject({ status: 'loading', data: undefined });
-        expect(states[1]).toMatchObject({ status: 'error', error });
+        expect(states[0]).toMatchObject({ data: undefined });
+        expect(states[1]).toMatchObject({ data: 'test' });
     });
-    it.skip('should not re-run a stable select when it re-renders if selector throws an error', async () => {
+    it('should throw an error when a selector throws', async () => {
         const key = queryKey();
+        const states = [];
         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(key, () => (runs === 0 ? 'test' : 'test2'), {
+            const state = createQuery(() => ({
+                queryKey: key,
+                queryFn: () => ({ name: 'test' }),
                 select: () => {
-                    runs++;
                     throw error;
                 },
+            }));
+            createRenderEffect(() => {
+                states.push({ ...state });
             });
-            return (<div>
-          <div>error: {state.error?.message}</div>
-          <button onClick={rerender}>rerender</button>
-          <button onClick={() => state.refetch()}>refetch</button>
-        </div>);
+            return null;
         }
         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);
+        expect(states.length).toBe(2);
+        expect(states[0]).toMatchObject({ status: 'pending', data: undefined });
+        expect(states[1]).toMatchObject({ status: 'error', error });
     });
     it('should track properties and only re-render when a tracked property changes', async () => {
         const key = queryKey();
         const states = [];
         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 });
             });
@@ -922,7 +921,10 @@ describe('createQuery', () => {
         let renderCount = 0;
         const states = [];
         function Page() {
-            const state = createQuery(key, () => 'test');
+            const state = createQuery(() => ({
+                queryKey: key,
+                queryFn: () => 'test',
+            }));
             createRenderEffect(() => {
                 states.push({ ...state });
             });
@@ -942,80 +944,6 @@ describe('createQuery', () => {
         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 = [];
-        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'));
-        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 });
-    });
-    it('should create a new query when refetching a removed query', async () => {
-        const key = queryKey();
-        const states = [];
-        let count = 0;
-        function Page() {
-            const state = createQuery(key, async () => {
-                await sleep(10);
-                return ++count;
-            }, { notifyOnChangeProps: 'all' });
-            createRenderEffect(() => {
-                states.push({ ...state });
-            });
-            return (<div>
-          <button onClick={() => state.remove()}>remove</button>
-          <button onClick={() => state.refetch()}>refetch</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(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 });
-    });
     it('should share equal data structures between query results', async () => {
         const key = queryKey();
         const result1 = [
@@ -1029,11 +957,15 @@ describe('createQuery', () => {
         const states = [];
         let count = 0;
         function Page() {
-            const state = createQuery(key, async () => {
-                await sleep(10);
-                count++;
-                return count === 1 ? result1 : result2;
-            }, { notifyOnChangeProps: 'all' });
+            const state = createQuery(() => ({
+                queryKey: key,
+                queryFn: async () => {
+                    await sleep(10);
+                    count++;
+                    return count === 1 ? result1 : result2;
+                },
+                notifyOnChangeProps: 'all',
+            }));
             createRenderEffect(() => {
                 states.push({ ...state });
             });
@@ -1067,21 +999,23 @@ describe('createQuery', () => {
     it('should use query function from hook when the existing query does not have a query function', async () => {
         const key = queryKey();
         const results = [];
-        queryClient.setQueryData(key(), 'set');
+        queryClient.setQueryData(key, 'set');
         function Page() {
-            const result = createQuery(key, async () => {
-                await sleep(10);
-                return 'fetched';
-            }, {
+            const result = createQuery(() => ({
+                queryKey: key,
+                queryFn: async () => {
+                    await sleep(10);
+                    return 'fetched';
+                },
                 initialData: 'initial',
                 staleTime: Infinity,
-            });
+            }));
             createRenderEffect(() => {
                 results.push({ ...result });
             });
             return (<div>
           <div>isFetching: {result.isFetching}</div>
-          <button onClick={() => queryClient.refetchQueries(key())}>
+          <button onClick={() => queryClient.refetchQueries({ queryKey: key })}>
             refetch
           </button>
           data: {result.data}
@@ -1103,16 +1037,20 @@ describe('createQuery', () => {
         const states = [];
         let count = 0;
         function Page() {
-            const state = createQuery(key, async () => {
-                await sleep(10);
-                count++;
-                return count;
-            }, { staleTime: Infinity, notifyOnChangeProps: 'all' });
+            const state = createQuery(() => ({
+                queryKey: key,
+                queryFn: async () => {
+                    await sleep(10);
+                    count++;
+                    return count;
+                },
+                staleTime: Infinity,
+            }));
             createEffect(() => {
                 states.push({ ...state });
             });
             return (<div>
-          <button onClick={() => queryClient.invalidateQueries(key())}>
+          <button onClick={() => queryClient.invalidateQueries({ queryKey: key })}>
             invalidate
           </button>
           data: {state.data}
@@ -1159,17 +1097,21 @@ describe('createQuery', () => {
         const states = [];
         let count = 0;
         function Page() {
-            const state = createQuery(key, async () => {
-                await sleep(10);
-                count++;
-                return count;
-            }, { enabled: false });
+            const state = createQuery(() => ({
+                queryKey: key,
+                queryFn: async () => {
+                    await sleep(10);
+                    count++;
+                    return count;
+                },
+                enabled: false,
+            }));
             createRenderEffect(() => {
                 states.push({ ...state });
             });
             createEffect(() => {
                 setActTimeout(() => {
-                    queryClient.refetchQueries({ queryKey: key() });
+                    queryClient.refetchQueries({ queryKey: key });
                 }, 20);
             });
             return null;
@@ -1191,17 +1133,21 @@ describe('createQuery', () => {
         const states = [];
         let count = 0;
         function Page() {
-            const state = createQuery(key, async () => {
-                await sleep(10);
-                count++;
-                return count;
-            }, { enabled: false });
+            const state = createQuery(() => ({
+                queryKey: key,
+                queryFn: async () => {
+                    await sleep(10);
+                    count++;
+                    return count;
+                },
+                enabled: false,
+            }));
             createRenderEffect(() => {
                 states.push({ ...state });
             });
             createEffect(() => {
                 setActTimeout(() => {
-                    queryClient.invalidateQueries(key());
+                    queryClient.invalidateQueries({ queryKey: key });
                 }, 20);
             });
             return null;
@@ -1223,14 +1169,14 @@ describe('createQuery', () => {
         const states = [];
         function Page() {
             const [count, setCount] = createSignal(0);
-            const state = createQuery(() => [key(), count()], async () => {
-                await sleep(5);
-                return count();
-            }, {
-                get enabled() {
-                    return count() === 0;
+            const state = createQuery(() => ({
+                queryKey: [key, count()],
+                queryFn: async () => {
+                    await sleep(5);
+                    return count();
                 },
-            });
+                enabled: count() === 0,
+            }));
             createRenderEffect(() => {
                 states.push({ ...state });
             });
@@ -1248,7 +1194,6 @@ describe('createQuery', () => {
         expect(states.length).toBe(3);
         // Fetch query
         expect(states[0]).toMatchObject({
-            data: undefined,
             isFetching: true,
             isSuccess: false,
         });
@@ -1260,20 +1205,23 @@ 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 = [];
         function Page() {
             const [count, setCount] = createSignal(0);
-            const state = createQuery(() => [key(), count()], async () => {
-                await sleep(10);
-                return count();
-            }, { keepPreviousData: true });
+            const state = createQuery(() => ({
+                queryKey: [key, count()],
+                queryFn: async () => {
+                    await sleep(10);
+                    return count();
+                },
+                placeholderData: keepPreviousData,
+            }));
             createRenderEffect(() => {
                 states.push({ ...state });
             });
@@ -1293,139 +1241,44 @@ 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 = [];
-        function Page(props) {
-            const state = createQuery(() => [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 = [];
         function Page() {
             const [count, setCount] = createSignal(0);
-            const state = createQuery(() => [key(), count()], async () => {
-                await sleep(10);
-                return count();
-            }, { initialData: 99, keepPreviousData: true });
+            const state = createQuery(() => ({
+                queryKey: [key, count()],
+                queryFn: async () => {
+                    await sleep(10);
+                    return count();
+                },
+                initialData: 99,
+                placeholderData: keepPreviousData,
+            }));
             createRenderEffect(() => {
                 states.push({ ...state });
             });
@@ -1449,39 +1302,45 @@ 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 = [];
         function Page() {
             const [count, setCount] = createSignal(0);
-            const state = createQuery(() => [key(), count()], async () => {
-                await sleep(10);
-                return count();
-            }, { enabled: false, keepPreviousData: true, notifyOnChangeProps: 'all' });
+            const state = createQuery(() => ({
+                queryKey: [key, count()],
+                queryFn: async () => {
+                    await sleep(10);
+                    return count();
+                },
+                enabled: false,
+                placeholderData: keepPreviousData,
+                notifyOnChangeProps: 'all',
+            }));
             createRenderEffect(() => {
                 states.push({ ...state });
             });
@@ -1507,55 +1366,61 @@ 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 = [];
-        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 () => {
-                await sleep(10);
-                return count();
-            }, { enabled: false, keepPreviousData: true, notifyOnChangeProps: 'all' });
+            const state = createQuery(() => ({
+                queryKey: [key, count()],
+                queryFn: async () => {
+                    await sleep(10);
+                    return count();
+                },
+                enabled: false,
+                placeholderData: keepPreviousData,
+                notifyOnChangeProps: 'all',
+            }));
             createRenderEffect(() => {
                 states.push({ ...state });
             });
@@ -1583,38 +1448,41 @@ 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,
         });
     });
     it('should use the correct query function when components use different configurations', async () => {
         const key = queryKey();
         const states = [];
         function FirstComponent() {
-            const state = createQuery(key, async () => {
-                await sleep(10);
-                return 1;
-            }, { notifyOnChangeProps: 'all' });
+            const state = createQuery(() => ({
+                queryKey: key,
+                queryFn: async () => {
+                    await sleep(10);
+                    return 1;
+                },
+            }));
             createRenderEffect(() => {
                 states.push({ ...state });
             });
@@ -1624,7 +1492,10 @@ describe('createQuery', () => {
         </div>);
         }
         function SecondComponent() {
-            createQuery(key, () => 2, { notifyOnChangeProps: 'all' });
+            createQuery(() => ({
+                queryKey: key,
+                queryFn: () => 2,
+            }));
             return null;
         }
         function Page() {
@@ -1657,30 +1528,37 @@ describe('createQuery', () => {
         const key = queryKey();
         const states1 = [];
         const states2 = [];
-        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 () => {
-                await sleep(10);
-                return 'one';
-            }, {
+            const state = createQuery(() => ({
+                queryKey: key,
+                queryFn: async () => {
+                    await sleep(10);
+                    return 'one';
+                },
                 staleTime: 100,
-            });
+            }));
             createRenderEffect(() => {
                 states1.push({ ...state });
             });
             return null;
         }
         function SecondComponent() {
-            const state = createQuery(key, async () => {
-                await sleep(10);
-                return 'two';
-            }, {
+            const state = createQuery(() => ({
+                queryKey: key,
+                queryFn: async () => {
+                    await sleep(10);
+                    return 'two';
+                },
                 staleTime: 10,
-            });
+            }));
             createRenderEffect(() => {
                 states2.push({ ...state });
             });
@@ -1742,9 +1620,11 @@ describe('createQuery', () => {
         const key = queryKey();
         const states = [];
         function Page() {
-            const state = createQuery(key, () => 'test', {
+            const state = createQuery(() => ({
+                queryKey: key,
+                queryFn: () => 'test',
                 staleTime: 50,
-            });
+            }));
             createRenderEffect(() => {
                 states.push({ ...state });
             });
@@ -1763,12 +1643,14 @@ describe('createQuery', () => {
         const key = queryKey();
         const states = [];
         function Page() {
-            const state = createQuery(key, async () => {
-                await sleep(5);
-                return 'test';
-            }, {
+            const state = createQuery(() => ({
+                queryKey: key,
+                queryFn: async () => {
+                    await sleep(5);
+                    return 'test';
+                },
                 notifyOnChangeProps: ['data'],
-            });
+            }));
             createRenderEffect(() => {
                 states.push({ ...state });
             });
@@ -1787,7 +1669,7 @@ describe('createQuery', () => {
         expect(states.length).toBe(2);
         expect(states[0]).toMatchObject({
             data: undefined,
-            status: 'loading',
+            status: 'pending',
             isFetching: true,
         });
         expect(states[1]).toMatchObject({
@@ -1801,14 +1683,18 @@ describe('createQuery', () => {
         const key1 = queryKey();
         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>
           <h2>First Data: {first.data}</h2>
           <h2>Second Data: {second.data}</h2>
@@ -1835,14 +1721,14 @@ describe('createQuery', () => {
             return 'data2';
         };
         function Page() {
-            createQuery(key, queryFn1);
-            createQuery(key, queryFn2);
+            createQuery(() => ({ queryKey: key, queryFn: queryFn1 }));
+            createQuery(() => ({ queryKey: key, queryFn: queryFn2 }));
             return null;
         }
         render(() => (<QueryClientProvider client={queryClient}>
         <Page />
       </QueryClientProvider>));
-        expect(queryCache.find(key()).options.queryFn).toBe(queryFn1);
+        expect(queryCache.find({ queryKey: key }).options.queryFn).toBe(queryFn1);
     });
     it('should batch re-renders', async () => {
         const key = queryKey();
@@ -1852,8 +1738,8 @@ describe('createQuery', () => {
             return 'data';
         };
         function Page() {
-            createQuery(key, queryFn);
-            createQuery(key, queryFn);
+            createQuery(() => ({ queryKey: key, queryFn }));
+            createQuery(() => ({ queryKey: key, queryFn }));
             renders++;
             return null;
         }
@@ -1875,16 +1761,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++;
                 callbackCount = count();
@@ -1904,10 +1794,13 @@ describe('createQuery', () => {
         const key = queryKey();
         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);
@@ -1920,14 +1813,19 @@ describe('createQuery', () => {
         await waitFor(() => screen.getByText('new'));
     });
     // 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>
           <div>
             First Status: {first.status}, {first.fetchStatus}
@@ -1941,36 +1839,41 @@ describe('createQuery', () => {
         <Page />
       </QueryClientProvider>));
         // 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>;
         }
         render(() => (<QueryClientProvider client={queryClient}>
         <Page />
       </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: [] };
         const states = [];
-        // TODO(lukemurray): extract the query function to a variable queryFn
         function Page() {
-            const state = createQuery(() => [key(), variables], async (ctx) => {
-                await sleep(10);
-                return ctx.queryKey;
-            });
+            const state = createQuery(() => ({
+                queryKey: [key, variables],
+                queryFn: async (ctx) => {
+                    await sleep(10);
+                    return ctx.queryKey;
+                },
+            }));
             createRenderEffect(() => {
                 states.push({ ...state });
             });
@@ -1980,15 +1883,17 @@ describe('createQuery', () => {
         <Page />
       </QueryClientProvider>));
         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 () => {
         const key = queryKey();
         const queryFn = jest.fn().mockReturnValue('data');
         function Page() {
-            const { data = 'default' } = createQuery(key, queryFn, {
+            const { data = 'default' } = createQuery(() => ({
+                queryKey: key,
+                queryFn,
                 enabled: false,
-            });
+            }));
             return (<div>
           <h1>{data}</h1>
         </div>);
@@ -1997,7 +1902,7 @@ describe('createQuery', () => {
         <Page />
       </QueryClientProvider>));
         await waitFor(() => screen.getByText('default'));
-        window.dispatchEvent(new FocusEvent('focus'));
+        window.dispatchEvent(new Event('visibilitychange'));
         expect(queryFn).not.toHaveBeenCalled();
     });
     it('should not refetch stale query on focus when `refetchOnWindowFocus` is set to `false`', async () => {
@@ -2005,10 +1910,12 @@ describe('createQuery', () => {
         const states = [];
         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 });
             });
@@ -2018,7 +1925,7 @@ describe('createQuery', () => {
         <Page />
       </QueryClientProvider>));
         await sleep(10);
-        window.dispatchEvent(new FocusEvent('focus'));
+        window.dispatchEvent(new Event('visibilitychange'));
         await sleep(10);
         expect(states.length).toBe(2);
         expect(states[0]).toMatchObject({ data: undefined, isFetching: true });
@@ -2029,10 +1936,12 @@ describe('createQuery', () => {
         const states = [];
         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 });
             });
@@ -2042,7 +1951,7 @@ describe('createQuery', () => {
         <Page />
       </QueryClientProvider>));
         await sleep(10);
-        window.dispatchEvent(new FocusEvent('focus'));
+        window.dispatchEvent(new Event('visibilitychange'));
         await sleep(10);
         expect(states.length).toBe(2);
         expect(states[0]).toMatchObject({ data: undefined, isFetching: true });
@@ -2053,10 +1962,12 @@ describe('createQuery', () => {
         const states = [];
         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 });
             });
@@ -2066,7 +1977,7 @@ describe('createQuery', () => {
         <Page />
       </QueryClientProvider>));
         await sleep(10);
-        window.dispatchEvent(new FocusEvent('focus'));
+        window.dispatchEvent(new Event('visibilitychange'));
         await sleep(10);
         expect(states.length).toBe(2);
         expect(states[0]).toMatchObject({ data: undefined, isFetching: true });
@@ -2077,13 +1988,15 @@ describe('createQuery', () => {
         const states = [];
         let count = 0;
         function Page() {
-            const state = createQuery(key, async () => {
-                await sleep(10);
-                return count++;
-            }, {
+            const state = createQuery(() => ({
+                queryKey: key,
+                queryFn: async () => {
+                    await sleep(10);
+                    return count++;
+                },
                 staleTime: Infinity,
                 refetchOnWindowFocus: 'always',
-            });
+            }));
             createRenderEffect(() => {
                 states.push({ ...state });
             });
@@ -2093,7 +2006,7 @@ describe('createQuery', () => {
         <Page />
       </QueryClientProvider>));
         await sleep(20);
-        window.dispatchEvent(new FocusEvent('focus'));
+        window.dispatchEvent(new Event('visibilitychange'));
         await sleep(20);
         await waitFor(() => expect(states.length).toBe(4));
         expect(states[0]).toMatchObject({ data: undefined, isFetching: true });
@@ -2106,14 +2019,16 @@ describe('createQuery', () => {
         const states = [];
         let count = 0;
         function Page() {
-            const state = createQuery(key, async () => {
-                await sleep(10);
-                return count++;
-            }, {
+            const state = createQuery(() => ({
+                queryKey: key,
+                queryFn: async () => {
+                    await sleep(10);
+                    return count++;
+                },
                 staleTime: 0,
                 retry: 0,
                 refetchOnWindowFocus: (query) => (query.state.data || 0) < 1,
-            });
+            }));
             createRenderEffect(() => {
                 states.push({ ...state });
             });
@@ -2126,7 +2041,7 @@ describe('createQuery', () => {
         expect(states.length).toBe(2);
         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');
         // refetch should happen
         expect(states.length).toBe(4);
@@ -2139,12 +2054,17 @@ describe('createQuery', () => {
     it('should refetch fresh query when refetchOnMount is set to always', async () => {
         const key = queryKey();
         const states = [];
-        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 });
             });
@@ -2169,13 +2089,18 @@ describe('createQuery', () => {
     it('should refetch stale query when refetchOnMount is set to true', async () => {
         const key = queryKey();
         const states = [];
-        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 });
             });
@@ -2200,12 +2125,16 @@ describe('createQuery', () => {
     it('should set status to error if queryFn throws', async () => {
         const key = queryKey();
         function Page() {
-            const state = createQuery(key, () => {
-                return Promise.reject('Error test jaylen');
-            }, { retry: false });
+            const state = createQuery(() => ({
+                queryKey: key,
+                queryFn: () => {
+                    return Promise.reject(new Error('Error test jaylen'));
+                },
+                retry: false,
+            }));
             return (<div>
           <h1>{state.status}</h1>
-          <h2>{state.error}</h2>
+          <h2>{state.error?.message}</h2>
         </div>);
         }
         render(() => (<QueryClientProvider client={queryClient}>
@@ -2214,13 +2143,18 @@ describe('createQuery', () => {
         await waitFor(() => screen.getByText('error'));
         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(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>);
         }
         render(() => (<QueryClientProvider client={queryClient}>
@@ -2230,13 +2164,15 @@ describe('createQuery', () => {
       </QueryClientProvider>));
         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;
         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;
             });
@@ -2251,13 +2187,15 @@ describe('createQuery', () => {
     it('should set status to error instead of throwing when error should not be thrown', async () => {
         const key = queryKey();
         function Page() {
-            const state = createQuery(key, () => Promise.reject('Local Error'), {
+            const state = createQuery(() => ({
+                queryKey: key,
+                queryFn: () => Promise.reject(new Error('Local Error')),
                 retry: false,
-                useErrorBoundary: (err) => err !== 'Local Error',
-            });
+                throwErrors: (err) => err.message !== 'Local Error',
+            }));
             return (<div>
           <h1>{state.status}</h1>
-          <h2>{state.error}</h2>
+          <h2>{state.error?.message}</h2>
         </div>);
         }
         render(() => (<QueryClientProvider client={queryClient}>
@@ -2271,10 +2209,12 @@ describe('createQuery', () => {
     it('should throw error instead of setting status when error should be thrown', async () => {
         const key = queryKey();
         function Page() {
-            const state = createQuery(key, () => Promise.reject(new Error('Remote Error')), {
+            const state = createQuery(() => ({
+                queryKey: key,
+                queryFn: () => Promise.reject(new Error('Remote Error')),
                 retry: false,
-                useErrorBoundary: (err) => err.message !== 'Local Error',
-            });
+                throwErrors: (err) => err.message !== 'Local Error',
+            }));
             return (<div>
           <h1>{state.status}</h1>
           <h2>{state.error?.message ?? ''}</h2>
@@ -2296,18 +2236,20 @@ describe('createQuery', () => {
         const key = queryKey();
         let count = 0;
         function Page() {
-            const result = createQuery(key, async () => {
-                count++;
-                await sleep(10);
-                return Promise.reject('some error');
-            }, {
+            const result = createQuery(() => ({
+                queryKey: key,
+                queryFn: async () => {
+                    count++;
+                    await sleep(10);
+                    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>);
         }
         function App() {
@@ -2333,18 +2275,20 @@ describe('createQuery', () => {
         const key = queryKey();
         let count = 0;
         function Page() {
-            const result = createQuery(key, async () => {
-                count++;
-                await sleep(10);
-                return Promise.reject('some error');
-            }, {
+            const result = createQuery(() => ({
+                queryKey: key,
+                queryFn: async () => {
+                    count++;
+                    await sleep(10);
+                    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>);
         }
         function App() {
@@ -2352,7 +2296,7 @@ describe('createQuery', () => {
             const toggle = () => setShow((s) => !s);
             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 />}
@@ -2374,12 +2318,17 @@ describe('createQuery', () => {
     it('should always fetch if refetchOnMount is set to always', async () => {
         const key = queryKey();
         const states = [];
-        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 });
             });
@@ -2414,9 +2363,11 @@ describe('createQuery', () => {
         const key = queryKey();
         const states = [];
         function Page() {
-            const state = createQuery(key, () => 'data', {
+            const state = createQuery(() => ({
+                queryKey: key,
+                queryFn: () => 'data',
                 initialData: 'initial',
-            });
+            }));
             createRenderEffect(() => {
                 states.push({ ...state });
             });
@@ -2442,10 +2393,12 @@ describe('createQuery', () => {
         const key = queryKey();
         const states = [];
         function Page() {
-            const state = createQuery(key, () => 'data', {
+            const state = createQuery(() => ({
+                queryKey: key,
+                queryFn: () => 'data',
                 staleTime: 50,
                 initialData: 'initial',
-            });
+            }));
             createRenderEffect(() => {
                 states.push({ ...state });
             });
@@ -2472,11 +2425,13 @@ describe('createQuery', () => {
         const states = [];
         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 });
             });
@@ -2507,11 +2462,13 @@ describe('createQuery', () => {
         const key = queryKey();
         const states = [];
         function Page() {
-            const state = createQuery(key, () => 'data', {
+            const state = createQuery(() => ({
+                queryKey: key,
+                queryFn: () => 'data',
                 staleTime: 10 * 1000,
                 initialData: 'initial',
                 initialDataUpdatedAt: 0,
-            });
+            }));
             createRenderEffect(() => {
                 states.push({ ...state });
             });
@@ -2538,10 +2495,12 @@ describe('createQuery', () => {
         const states = [];
         function Page() {
             const [count, setCount] = createSignal(0);
-            const state = createQuery(() => [key(), count()], () => ({ count: 10 }), {
+            const state = createQuery(() => ({
+                queryKey: [key, count()],
+                queryFn: () => ({ count: 10 }),
                 staleTime: Infinity,
                 initialData: () => ({ count: count() }),
-            });
+            }));
             createRenderEffect(() => {
                 states.push({ ...state });
             });
@@ -2566,23 +2525,25 @@ describe('createQuery', () => {
         const key = queryKey();
         const queryFn = jest.fn();
         queryFn.mockImplementation(() => {
-            return Promise.reject('Error test Barrett');
+            return Promise.reject(new Error('Error test Barrett'));
         });
         function Page() {
-            const state = createQuery(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>);
         }
         render(() => (<QueryClientProvider client={queryClient}>
         <Page />
       </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"
         await waitFor(() => screen.getByText('Failed 2 times'));
@@ -2593,27 +2554,29 @@ describe('createQuery', () => {
         const key = queryKey();
         const queryFn = jest.fn();
         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(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>);
         }
         render(() => (<QueryClientProvider client={queryClient}>
         <Page />
       </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'));
@@ -2627,10 +2590,12 @@ describe('createQuery', () => {
             return Promise.reject({ delay: 50 });
         });
         function Page() {
-            const state = createQuery(key, queryFn, {
+            const state = createQuery(() => ({
+                queryKey: key,
+                queryFn,
                 retry: 1,
                 retryDelay: (_, error) => error.delay,
-            });
+            }));
             return (<div>
           <h1>{state.status}</h1>
           <h2>Failed {state.failureCount} times</h2>
@@ -2653,13 +2618,15 @@ describe('createQuery', () => {
         const visibilityMock = mockVisibilityState('hidden');
         let count = 0;
         function Page() {
-            const query = createQuery(key, () => {
-                count++;
-                return Promise.reject(`fetching error ${count}`);
-            }, {
+            const query = createQuery(() => ({
+                queryKey: key,
+                queryFn: () => {
+                    count++;
+                    return Promise.reject(`fetching error ${count}`);
+                },
                 retry: 3,
                 retryDelay: 1,
-            });
+            }));
             return (<div>
           <div>error {String(query.error)}</div>
           <div>status {query.status}</div>
@@ -2673,14 +2640,14 @@ 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
         await sleep(10);
         await waitFor(() => screen.getByText('failureCount 1'));
         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'));
         await waitFor(() => screen.getByText('failureReason fetching error 4'));
@@ -2690,15 +2657,16 @@ 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 = [];
-        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 });
             });
@@ -2728,12 +2696,15 @@ describe('createQuery', () => {
         // make page unfocused
         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 });
             });
@@ -2747,7 +2718,7 @@ describe('createQuery', () => {
         await waitFor(() => expect(states.length).toBe(2));
         // reset visibilityState to original value
         visibilityMock.mockRestore();
-        window.dispatchEvent(new FocusEvent('focus'));
+        window.dispatchEvent(new Event('visibilitychange'));
         await waitFor(() => expect(states.length).toBe(4));
         expect(states).toMatchObject([
             {
@@ -2780,12 +2751,14 @@ describe('createQuery', () => {
         queryFn.mockImplementation(() => 'data');
         const prefetchQueryFn = jest.fn();
         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 });
             });
@@ -2807,14 +2780,14 @@ describe('createQuery', () => {
             await sleep(10);
             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;
         }
         render(() => (<QueryClientProvider client={queryClient}>
@@ -2829,15 +2802,19 @@ describe('createQuery', () => {
         const key = queryKey();
         function Page() {
             let counter = 0;
-            const query = createQuery(key, async () => {
-                if (counter < 2) {
-                    counter++;
-                    throw new Error('error');
-                }
-                else {
-                    return 'data';
-                }
-            }, { retryDelay: 10 });
+            const query = createQuery(() => ({
+                queryKey: key,
+                queryFn: async () => {
+                    if (counter < 2) {
+                        counter++;
+                        throw new Error('error');
+                    }
+                    else {
+                        return 'data';
+                    }
+                },
+                retryDelay: 10,
+            }));
             return (<div>
           <div>failureCount {query.failureCount}</div>
           <div>failureReason {query.failureReason?.message ?? 'null'}</div>
@@ -2858,18 +2835,21 @@ describe('createQuery', () => {
         function Page() {
             const [enabled, setEnabled] = createSignal(false);
             const [isPrefetched, setPrefetched] = createSignal(false);
-            const query = createQuery(key, async () => {
-                count++;
-                await sleep(10);
-                return count;
-            }, {
-                get enabled() {
-                    return enabled();
+            const query = createQuery(() => ({
+                queryKey: key,
+                queryFn: async () => {
+                    count++;
+                    await sleep(10);
+                    return count;
                 },
-            });
+                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();
@@ -2893,11 +2873,11 @@ describe('createQuery', () => {
         const key = queryKey();
         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>
           <div>FetchStatus: {query.fetchStatus}</div>
           <h2>Data: {query.data || 'no data'}</h2>
@@ -2920,27 +2900,37 @@ describe('createQuery', () => {
         const key = queryKey();
         const results = [];
         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(() => (<QueryClientProvider client={queryClient}>
         <Page />
       </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 });
     });
     it('should initialize state properly, when initialData is falsy', async () => {
         const key = queryKey();
         const results = [];
         function Page() {
-            const result = createQuery(key, () => 1, { initialData: 0 });
+            const result = createQuery(() => ({
+                queryKey: key,
+                queryFn: () => 1,
+                initialData: 0,
+            }));
             createRenderEffect(() => {
                 results.push({ ...result });
             });
@@ -2960,14 +2950,12 @@ describe('createQuery', () => {
         const results = [];
         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 });
             });
@@ -2992,27 +2980,29 @@ describe('createQuery', () => {
         const queryFn = jest.fn();
         queryFn.mockImplementation(() => 'data');
         function Page() {
-            const { fetchStatus } = createQuery({
+            const { fetchStatus } = createQuery(() => ({
                 queryKey: key,
                 queryFn,
                 enabled: false,
-            });
+            }));
             return <div>fetchStatus: {fetchStatus}</div>;
         }
         render(() => (<QueryClientProvider client={queryClient}>
         <Page />
       </QueryClientProvider>));
         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>
           <div>
             status: {query.status}, {query.fetchStatus}
@@ -3022,38 +3012,60 @@ describe('createQuery', () => {
         render(() => (<QueryClientProvider client={queryClient}>
         <Page />
       </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>;
         }
         const result = render(() => (<QueryClientProvider client={queryClient}>
         <Page />
       </QueryClientProvider>));
         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 () => {
         const key = queryKey();
         const queryFn = jest.fn().mockReturnValue('data');
         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();
                 return result.data;
@@ -3067,7 +3079,7 @@ describe('createQuery', () => {
         render(() => (<QueryClientProvider client={queryClient}>
         <Page />
       </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'));
@@ -3080,11 +3092,11 @@ describe('createQuery', () => {
         let count = 0;
         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) {
                     setInt(0);
@@ -3105,12 +3117,14 @@ describe('createQuery', () => {
         let count = 0;
         const states = [];
         function Page() {
-            const state = createQuery(key, async () => {
-                await sleep(10);
-                return count++;
-            }, {
+            const state = createQuery(() => ({
+                queryKey: key,
+                queryFn: async () => {
+                    await sleep(10);
+                    return count++;
+                },
                 refetchInterval: (data = 0) => (data < 2 ? 10 : false),
-            });
+            }));
             createRenderEffect(() => {
                 states.push({ ...state });
             });
@@ -3128,7 +3142,7 @@ describe('createQuery', () => {
         expect(states.length).toEqual(6);
         expect(states).toMatchObject([
             {
-                status: 'loading',
+                status: 'pending',
                 isFetching: true,
                 data: undefined,
             },
@@ -3163,9 +3177,11 @@ describe('createQuery', () => {
         const key = queryKey();
         const states = [];
         function Page() {
-            const state = createQuery(key, () => 1, {
+            const state = createQuery(() => ({
+                queryKey: key,
+                queryFn: () => 1,
                 refetchInterval: 0,
-            });
+            }));
             createRenderEffect(() => {
                 states.push({ ...state });
             });
@@ -3179,7 +3195,7 @@ describe('createQuery', () => {
         expect(states.length).toEqual(2);
         expect(states).toMatchObject([
             {
-                status: 'loading',
+                status: 'pending',
                 isFetching: true,
                 data: undefined,
             },
@@ -3192,7 +3208,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)}</>;
         }
         render(() => (<QueryClientProvider client={queryClient}>
@@ -3202,7 +3221,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)}</>;
         }
         render(() => (<QueryClientProvider client={queryClient}>
@@ -3214,16 +3236,16 @@ describe('createQuery', () => {
         const key = queryKey();
         const queryFn = jest.fn().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 />
           <div>{result.data}</div>
@@ -3242,9 +3264,11 @@ describe('createQuery', () => {
         const key1 = queryKey();
         const states = [];
         function Page() {
-            const state = createQuery(key1, () => 'data', {
+            const state = createQuery(() => ({
+                queryKey: key1,
+                queryFn: () => 'data',
                 placeholderData: 'placeholder',
-            });
+            }));
             createRenderEffect(() => {
                 states.push({ ...state });
             });
@@ -3275,12 +3299,12 @@ describe('createQuery', () => {
         const states = [];
         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() });
             });
@@ -3327,10 +3351,12 @@ describe('createQuery', () => {
         const key1 = queryKey();
         const states = [];
         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 });
             });
@@ -3361,13 +3387,15 @@ describe('createQuery', () => {
         const states = [];
         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 });
             });
@@ -3394,40 +3422,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) => {
-                    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();
         function Page() {
@@ -3439,16 +3433,18 @@ describe('createQuery', () => {
             const forceUpdate = () => {
                 setForceValue((prev) => prev + 1);
             };
-            const state = createQuery(key1, async () => {
-                await sleep(10);
-                return 0;
-            }, {
+            const state = createQuery(() => ({
+                queryKey: key1,
+                queryFn: async () => {
+                    await sleep(10);
+                    return 0;
+                },
                 get select() {
                     const currentCount = count();
                     return (data) => `selected ${data + currentCount}`;
                 },
                 placeholderData: 99,
-            });
+            }));
             return (<div>
           <h2>Data: {state.data}</h2>
           <h2>forceValue: {forceValue()}</h2>
@@ -3473,12 +3469,14 @@ describe('createQuery', () => {
         const states = [];
         function Page() {
             const [forceValue, setForceValue] = createSignal(1);
-            const state = createQuery(key1, async () => {
-                await sleep(10);
-                return [1, 2];
-            }, {
+            const state = createQuery(() => ({
+                queryKey: key1,
+                queryFn: async () => {
+                    await sleep(10);
+                    return [1, 2];
+                },
                 select: (res) => res.map((x) => x + 1),
-            });
+            }));
             createEffect(() => {
                 if (state.data) {
                     states.push(state.data);
@@ -3516,7 +3514,7 @@ describe('createQuery', () => {
             return promise;
         };
         function Page() {
-            const state = createQuery(key, queryFn);
+            const state = createQuery(() => ({ queryKey: key, queryFn }));
             return (<div>
           <h1>Status: {state.status}</h1>
         </div>);
@@ -3534,12 +3532,16 @@ describe('createQuery', () => {
         const states = [];
         const queryFn = 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) {
-            const state = createQuery(() => [key(), props.limit], queryFn);
+            const state = createQuery(() => ({
+                queryKey: [key, props.limit],
+                queryFn,
+            }));
             states[props.limit] = state;
             return (<div>
           <h1>Status: {state.status}</h1>
@@ -3557,24 +3559,24 @@ describe('createQuery', () => {
         await waitFor(() => screen.getByText('off'));
         await sleep(20);
         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',
         });
     });
@@ -3588,7 +3590,7 @@ describe('createQuery', () => {
         function Page() {
             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 });
             });
@@ -3605,7 +3607,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
@@ -3620,16 +3622,22 @@ describe('createQuery', () => {
         const states = [];
         let count = 0;
         function Page() {
-            const state = createQuery(key, async () => {
-                await sleep(10);
-                count++;
-                return count;
-            }, { staleTime: Infinity });
+            const state = createQuery(() => ({
+                queryKey: key,
+                queryFn: async () => {
+                    await sleep(10);
+                    count++;
+                    return count;
+                },
+                staleTime: Infinity,
+            }));
             createRenderEffect(() => {
                 states.push({ ...state });
             });
             return (<div>
-          <button onClick={() => queryClient.resetQueries(key())}>reset</button>
+          <button onClick={() => queryClient.resetQueries({ queryKey: key })}>
+            reset
+          </button>
           <div>data: {state.data ?? 'null'}</div>
           <div>isFetching: {state.isFetching}</div>
         </div>);
@@ -3643,29 +3651,27 @@ describe('createQuery', () => {
         await waitFor(() => screen.getByText('data: 2'));
         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,
@@ -3676,18 +3682,26 @@ describe('createQuery', () => {
         const states = [];
         let count = 0;
         function Page() {
-            const state = createQuery(key, async () => {
-                await sleep(10);
-                count++;
-                return count;
-            }, { staleTime: Infinity, enabled: false, notifyOnChangeProps: 'all' });
+            const state = createQuery(() => ({
+                queryKey: key,
+                queryFn: async () => {
+                    await sleep(10);
+                    count++;
+                    return count;
+                },
+                staleTime: Infinity,
+                enabled: false,
+                notifyOnChangeProps: 'all',
+            }));
             createRenderEffect(() => {
                 states.push({ ...state });
             });
             const { refetch } = state;
             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>);
         }
@@ -3702,29 +3716,26 @@ describe('createQuery', () => {
         await waitFor(() => expect(states.length).toBe(4));
         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,
@@ -3739,7 +3750,11 @@ describe('createQuery', () => {
             return JSON.stringify(x);
         }
         function Page() {
-            const state = createQuery(key, () => 'test', { queryKeyHashFn });
+            const state = createQuery(() => ({
+                queryKey: key,
+                queryFn: () => 'test',
+                queryKeyHashFn,
+            }));
             createEffect(on(() => state.status, () => {
                 renders++;
             }));
@@ -3758,18 +3773,18 @@ describe('createQuery', () => {
             return Promise.reject(new Error('Suspense Error Bingo'));
         });
         function Page(props) {
-            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>
@@ -3790,7 +3805,7 @@ describe('createQuery', () => {
         <App />
       </QueryClientProvider>));
         // initial state check
-        screen.getByText('status: loading');
+        screen.getByText('status: pending');
         // // render error state component
         await waitFor(() => screen.getByText('error'));
         expect(queryFn).toBeCalledTimes(1);
@@ -3804,23 +3819,25 @@ describe('createQuery', () => {
     });
     it('should refetch when query key changed when previous status is error', async () => {
         function Page(props) {
-            const state = createQuery(() => [props.id], async () => {
-                await sleep(10);
-                if (props.id % 2 === 1) {
-                    return Promise.reject(new Error('Error'));
-                }
-                else {
-                    return 'data';
-                }
-            }, {
+            const state = createQuery(() => ({
+                queryKey: [props.id],
+                queryFn: async () => {
+                    await sleep(10);
+                    if (props.id % 2 === 1) {
+                        return Promise.reject(new Error('Error'));
+                    }
+                    else {
+                        return 'data';
+                    }
+                },
                 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>
@@ -3841,7 +3858,7 @@ describe('createQuery', () => {
         <App />
       </QueryClientProvider>));
         // initial state check
-        screen.getByText('status: loading');
+        screen.getByText('status: pending');
         // render error state component
         await waitFor(() => screen.getByText('error'));
         // change to unmount query
@@ -3853,15 +3870,17 @@ describe('createQuery', () => {
     });
     it('should refetch when query key changed when switching between erroneous queries', async () => {
         function Page(props) {
-            const state = createQuery(() => [props.id], async () => {
-                await sleep(10);
-                return Promise.reject(new Error('Error'));
-            }, {
+            const state = createQuery(() => ({
+                queryKey: [props.id],
+                queryFn: async () => {
+                    await sleep(10);
+                    return Promise.reject(new Error('Error'));
+                },
                 retry: false,
                 retryOnMount: false,
                 refetchOnMount: false,
                 refetchOnWindowFocus: false,
-            });
+            }));
             return (<Switch fallback={<div>rendered</div>}>
           <Match when={state.isFetching}>
             <div>status: fetching</div>
@@ -3897,28 +3916,30 @@ describe('createQuery', () => {
         await waitFor(() => screen.getByText('status: fetching'));
         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 = [];
         const error = new Error('oops');
         let count = 0;
         function Page() {
-            const state = createQuery(key, async () => {
-                await sleep(10);
-                if (count === 0) {
-                    count++;
-                    throw error;
-                }
-                return 5;
-            }, {
+            const state = createQuery(() => ({
+                queryKey: key,
+                queryFn: async () => {
+                    await sleep(10);
+                    if (count === 0) {
+                        count++;
+                        throw error;
+                    }
+                    return 5;
+                },
                 retry: false,
-            });
+            }));
             createRenderEffect(() => {
                 states.push({ ...state });
             });
             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>
@@ -3936,7 +3957,7 @@ describe('createQuery', () => {
         await waitFor(() => screen.getByText('data: 5'));
         await waitFor(() => expect(states.length).toBe(4));
         expect(states[0]).toMatchObject({
-            status: 'loading',
+            status: 'pending',
             data: undefined,
             error: null,
         });
@@ -3946,7 +3967,7 @@ describe('createQuery', () => {
             error,
         });
         expect(states[2]).toMatchObject({
-            status: 'loading',
+            status: 'pending',
             data: undefined,
             error: null,
         });
@@ -3962,13 +3983,13 @@ describe('createQuery', () => {
             const key = queryKey();
             const states = [];
             function Page() {
-                const state = createQuery({
+                const state = createQuery(() => ({
                     queryKey: key,
                     queryFn: async () => {
                         await sleep(10);
                         return 'data';
                     },
-                });
+                }));
                 createEffect(() => {
                     states.push(state.fetchStatus);
                 });
@@ -3982,7 +4003,7 @@ describe('createQuery', () => {
             render(() => (<QueryClientProvider client={queryClient}>
           <Page />
         </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'));
             await waitFor(() => screen.getByText('status: success, isPaused: false'));
@@ -3996,14 +4017,14 @@ describe('createQuery', () => {
             const key = queryKey();
             let count = 0;
             function Page() {
-                const state = createQuery({
+                const state = createQuery(() => ({
                     queryKey: key,
                     queryFn: async () => {
                         count++;
                         await sleep(10);
                         return 'data' + count;
                     },
-                });
+                }));
                 return (<div>
             <div>
               status: {state.status}, fetchStatus: {state.fetchStatus},
@@ -4011,7 +4032,7 @@ describe('createQuery', () => {
             </div>
             <div>failureReason: {state.failureReason ?? 'null'}</div>
             <div>data: {state.data}</div>
-            <button onClick={() => queryClient.invalidateQueries({ queryKey: key() })}>
+            <button onClick={() => queryClient.invalidateQueries({ queryKey: key })}>
               invalidate
             </button>
           </div>);
@@ -4039,20 +4060,20 @@ describe('createQuery', () => {
             const key = queryKey();
             let count = 0;
             function Page() {
-                const state = createQuery({
+                const state = createQuery(() => ({
                     queryKey: key,
                     queryFn: async () => {
                         count++;
                         await sleep(10);
                         return 'data' + count;
                     },
-                });
+                }));
                 return (<div>
             <div>
               status: {state.status}, fetchStatus: {state.fetchStatus}
             </div>
             <div>data: {state.data}</div>
-            <button onClick={() => queryClient.invalidateQueries({ queryKey: key() })}>
+            <button onClick={() => queryClient.invalidateQueries({ queryKey: key })}>
               invalidate
             </button>
           </div>);
@@ -4064,7 +4085,7 @@ describe('createQuery', () => {
             const onlineMock = mockNavigatorOnLine(false);
             fireEvent.click(screen.getByRole('button', { name: /invalidate/i }));
             await waitFor(() => screen.getByText('status: success, fetchStatus: paused'));
-            window.dispatchEvent(new FocusEvent('focus'));
+            window.dispatchEvent(new Event('visibilitychange'));
             await sleep(15);
             await waitFor(() => expect(screen.queryByText('data: data2')).not.toBeInTheDocument());
             expect(count).toBe(1);
@@ -4074,20 +4095,20 @@ describe('createQuery', () => {
             const key = queryKey();
             let count = 0;
             function Page() {
-                const state = createQuery({
+                const state = createQuery(() => ({
                     queryKey: key,
                     queryFn: async () => {
                         count++;
                         await sleep(10);
                         return 'data' + count;
                     },
-                });
+                }));
                 return (<div>
             <div>
               status: {state.status}, fetchStatus: {state.fetchStatus}
             </div>
             <div>data: {state.data}</div>
-            <button onClick={() => queryClient.invalidateQueries({ queryKey: key() })}>
+            <button onClick={() => queryClient.invalidateQueries({ queryKey: key })}>
               invalidate
             </button>
           </div>);
@@ -4096,11 +4117,11 @@ describe('createQuery', () => {
             render(() => (<QueryClientProvider client={queryClient}>
           <Page />
         </QueryClientProvider>));
-            await waitFor(() => screen.getByText('status: loading, fetchStatus: paused'));
+            await waitFor(() => screen.getByText('status: pending, fetchStatus: paused'));
             fireEvent.click(screen.getByRole('button', { name: /invalidate/i }));
             await sleep(15);
             // invalidation should not trigger a refetch
-            await waitFor(() => screen.getByText('status: loading, fetchStatus: paused'));
+            await waitFor(() => screen.getByText('status: pending, fetchStatus: paused'));
             expect(count).toBe(0);
             onlineMock.mockRestore();
         });
@@ -4108,7 +4129,7 @@ describe('createQuery', () => {
             const key = queryKey();
             let count = 0;
             function Page() {
-                const state = createQuery({
+                const state = createQuery(() => ({
                     queryKey: key,
                     queryFn: async () => {
                         count++;
@@ -4116,13 +4137,13 @@ describe('createQuery', () => {
                         return 'data' + count;
                     },
                     initialData: 'initial',
-                });
+                }));
                 return (<div>
             <div>
               status: {state.status}, fetchStatus: {state.fetchStatus}
             </div>
             <div>data: {state.data}</div>
-            <button onClick={() => queryClient.invalidateQueries({ queryKey: key() })}>
+            <button onClick={() => queryClient.invalidateQueries({ queryKey: key })}>
               invalidate
             </button>
           </div>);
@@ -4146,7 +4167,7 @@ describe('createQuery', () => {
             const key = queryKey();
             let count = 0;
             function Page() {
-                const state = createQuery({
+                const state = createQuery(() => ({
                     queryKey: key,
                     queryFn: async () => {
                         count++;
@@ -4154,13 +4175,13 @@ describe('createQuery', () => {
                         return 'data' + count;
                     },
                     initialData: 'initial',
-                });
+                }));
                 return (<div>
             <div>
               status: {state.status}, fetchStatus: {state.fetchStatus}
             </div>
             <div>data: {state.data}</div>
-            <button onClick={() => queryClient.invalidateQueries({ queryKey: key() })}>
+            <button onClick={() => queryClient.invalidateQueries({ queryKey: key })}>
               invalidate
             </button>
           </div>);
@@ -4178,7 +4199,7 @@ describe('createQuery', () => {
             await sleep(15);
             await waitFor(() => screen.getByText('status: success, fetchStatus: paused'));
             // triggers a second pause
-            window.dispatchEvent(new FocusEvent('focus'));
+            window.dispatchEvent(new Event('visibilitychange'));
             onlineMock.mockReturnValue(true);
             window.dispatchEvent(new Event('online'));
             await waitFor(() => screen.getByText('status: success, fetchStatus: idle'));
@@ -4192,7 +4213,7 @@ describe('createQuery', () => {
             const key = queryKey();
             let count = 0;
             function Page() {
-                const state = createQuery({
+                const state = createQuery(() => ({
                     queryKey: key,
                     queryFn: async () => {
                         count++;
@@ -4201,7 +4222,7 @@ describe('createQuery', () => {
                     },
                     retry: 2,
                     retryDelay: 10,
-                });
+                }));
                 return (<div>
             <div>
               status: {state.status}, fetchStatus: {state.fetchStatus},
@@ -4213,11 +4234,11 @@ describe('createQuery', () => {
             render(() => (<QueryClientProvider client={queryClient}>
           <Page />
         </QueryClientProvider>));
-            await waitFor(() => screen.getByText('status: loading, fetchStatus: fetching, failureCount: 1'));
+            await waitFor(() => screen.getByText('status: pending, fetchStatus: fetching, failureCount: 1'));
             await waitFor(() => screen.getByText('failureReason: failed1'));
             const onlineMock = mockNavigatorOnLine(false);
             await sleep(20);
-            await waitFor(() => screen.getByText('status: loading, fetchStatus: paused, failureCount: 1'));
+            await waitFor(() => screen.getByText('status: pending, fetchStatus: paused, failureCount: 1'));
             await waitFor(() => screen.getByText('failureReason: failed1'));
             expect(count).toBe(1);
             onlineMock.mockReturnValue(true);
@@ -4231,14 +4252,14 @@ describe('createQuery', () => {
             const key = queryKey();
             let count = 0;
             function Component() {
-                const state = createQuery({
+                const state = createQuery(() => ({
                     queryKey: key,
                     queryFn: async () => {
                         count++;
                         await sleep(10);
                         return 'data' + count;
                     },
-                });
+                }));
                 return (<div>
             <div>
               status: {state.status}, fetchStatus: {state.fetchStatus}
@@ -4257,12 +4278,12 @@ describe('createQuery', () => {
             render(() => (<QueryClientProvider client={queryClient}>
           <Page />
         </QueryClientProvider>));
-            await waitFor(() => screen.getByText('status: loading, fetchStatus: paused'));
+            await waitFor(() => screen.getByText('status: pending, fetchStatus: paused'));
             fireEvent.click(screen.getByRole('button', { name: /hide/i }));
             onlineMock.mockReturnValue(true);
             window.dispatchEvent(new Event('online'));
             await sleep(15);
-            expect(queryClient.getQueryState(key())).toMatchObject({
+            expect(queryClient.getQueryState(key)).toMatchObject({
                 fetchStatus: 'idle',
                 status: 'success',
             });
@@ -4273,7 +4294,7 @@ describe('createQuery', () => {
             const key = queryKey();
             let count = 0;
             function Page() {
-                const state = createQuery({
+                const state = createQuery(() => ({
                     queryKey: key,
                     queryFn: async () => {
                         count++;
@@ -4281,9 +4302,9 @@ describe('createQuery', () => {
                         return 'data' + count;
                     },
                     refetchOnReconnect: false,
-                });
+                }));
                 return (<div>
-            <button onClick={() => queryClient.cancelQueries({ queryKey: key() })}>
+            <button onClick={() => queryClient.cancelQueries({ queryKey: key })}>
               cancel
             </button>
             <div>
@@ -4296,14 +4317,14 @@ describe('createQuery', () => {
             render(() => (<QueryClientProvider client={queryClient}>
           <Page />
         </QueryClientProvider>));
-            await waitFor(() => screen.getByText('status: loading, fetchStatus: paused'));
+            await waitFor(() => screen.getByText('status: pending, fetchStatus: paused'));
             fireEvent.click(screen.getByRole('button', { name: /cancel/i }));
-            await waitFor(() => screen.getByText('status: loading, fetchStatus: idle'));
+            await waitFor(() => screen.getByText('status: pending, fetchStatus: idle'));
             expect(count).toBe(0);
             onlineMock.mockReturnValue(true);
             window.dispatchEvent(new Event('online'));
             await sleep(15);
-            await waitFor(() => screen.getByText('status: loading, fetchStatus: idle'));
+            await waitFor(() => screen.getByText('status: pending, fetchStatus: idle'));
             expect(count).toBe(0);
             onlineMock.mockRestore();
         });
@@ -4311,14 +4332,14 @@ describe('createQuery', () => {
             const key = queryKey();
             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>
             <div>
               status: {state.status}, fetchStatus: {state.fetchStatus}
@@ -4331,7 +4352,7 @@ describe('createQuery', () => {
                 return (<div>
             {show() && <Component />}
             <button onClick={() => setShow(false)}>hide</button>
-            <button onClick={() => queryClient.invalidateQueries({ queryKey: key() })}>
+            <button onClick={() => queryClient.invalidateQueries({ queryKey: key })}>
               invalidate
             </button>
           </div>);
@@ -4348,7 +4369,7 @@ describe('createQuery', () => {
             onlineMock.mockReturnValue(true);
             window.dispatchEvent(new Event('online'));
             await sleep(15);
-            expect(queryClient.getQueryState(key())).toMatchObject({
+            expect(queryClient.getQueryState(key)).toMatchObject({
                 fetchStatus: 'idle',
                 status: 'success',
             });
@@ -4362,7 +4383,7 @@ describe('createQuery', () => {
             const key = queryKey();
             let count = 0;
             function Page() {
-                const state = createQuery({
+                const state = createQuery(() => ({
                     queryKey: key,
                     queryFn: async () => {
                         count++;
@@ -4370,7 +4391,7 @@ describe('createQuery', () => {
                         return 'data ' + count;
                     },
                     networkMode: 'always',
-                });
+                }));
                 return (<div>
             <div>
               status: {state.status}, isPaused: {String(state.isPaused)}
@@ -4392,7 +4413,7 @@ describe('createQuery', () => {
             const key = queryKey();
             let count = 0;
             function Page() {
-                const state = createQuery({
+                const state = createQuery(() => ({
                     queryKey: key,
                     queryFn: async () => {
                         count++;
@@ -4402,7 +4423,7 @@ describe('createQuery', () => {
                     networkMode: 'always',
                     retry: 1,
                     retryDelay: 5,
-                });
+                }));
                 return (<div>
             <div>
               status: {state.status}, isPaused: {String(state.isPaused)}
@@ -4429,7 +4450,7 @@ describe('createQuery', () => {
             const key = queryKey();
             let count = 0;
             function Page() {
-                const state = createQuery({
+                const state = createQuery(() => ({
                     queryKey: key,
                     queryFn: async () => {
                         count++;
@@ -4439,7 +4460,7 @@ describe('createQuery', () => {
                     retry: 2,
                     retryDelay: 1,
                     networkMode: 'offlineFirst',
-                });
+                }));
                 return (<div>
             <div>
               status: {state.status}, fetchStatus: {state.fetchStatus},
@@ -4451,7 +4472,7 @@ describe('createQuery', () => {
             render(() => (<QueryClientProvider client={queryClient}>
           <Page />
         </QueryClientProvider>));
-            await waitFor(() => screen.getByText('status: loading, fetchStatus: paused, failureCount: 1'));
+            await waitFor(() => screen.getByText('status: pending, fetchStatus: paused, failureCount: 1'));
             await waitFor(() => screen.getByText('failureReason: failed1'));
             expect(count).toBe(1);
             onlineMock.mockReturnValue(true);
@@ -4470,16 +4491,18 @@ describe('createQuery', () => {
             throw error;
         };
         function Page() {
-            const state = createQuery(key, queryFn, {
+            const state = createQuery(() => ({
+                queryKey: key,
+                queryFn,
                 retry: false,
                 retryOnMount: false,
-            });
+            }));
             createRenderEffect(() => {
                 states.push({ ...state });
             });
             return <></>;
         }
-        await queryClient.prefetchQuery(key(), queryFn);
+        await queryClient.prefetchQuery({ queryKey: key, queryFn });
         render(() => (<QueryClientProvider client={queryClient}>
         <Page />
       </QueryClientProvider>));
@@ -4493,10 +4516,14 @@ describe('createQuery', () => {
         const key = queryKey();
         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>);
@@ -4513,11 +4540,16 @@ describe('createQuery', () => {
     it('setQueryData - should respect updatedAt', async () => {
         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 })}>
+          <button onClick={() => queryClient.setQueryData(key, 'newData', {
+                    updatedAt: 100,
+                })}>
             setQueryData
           </button>
         </div>);
@@ -4536,11 +4568,13 @@ describe('createQuery', () => {
         const key = queryKey();
         const error = new Error('oops');
         function Page() {
-            const state = createQuery(key, async () => {
-                throw error;
-            }, {
+            const state = createQuery(() => ({
+                queryKey: key,
+                queryFn: async () => {
+                    throw error;
+                },
                 retry: false,
-            });
+            }));
             return (<div>
           <button onClick={() => state.refetch()}>refetch</button>
           <span>data: {state.errorUpdateCount}</span>
@@ -4556,4 +4590,18 @@ 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'));
+    });
 });