diff --git a/packages/solid-query-persist-client/src/__tests__/PersistQueryClientProvider.test.tsx b/packages/solid-query-persist-client/src/__tests__/PersistQueryClientProvider.test.tsx index 8438a425cd..de0970819a 100644 --- a/packages/solid-query-persist-client/src/__tests__/PersistQueryClientProvider.test.tsx +++ b/packages/solid-query-persist-client/src/__tests__/PersistQueryClientProvider.test.tsx @@ -1,6 +1,6 @@ import { describe, expect, test, vi } from 'vitest' import { render, screen, waitFor } from '@solidjs/testing-library' -import { QueryClient, createQueries, createQuery } from '@tanstack/solid-query' +import { QueryClient, useQueries, useQuery } from '@tanstack/solid-query' import { persistQueryClientSave } from '@tanstack/query-persist-client-core' import { createEffect, createSignal, onMount } from 'solid-js' @@ -69,7 +69,7 @@ describe('PersistQueryClientProvider', () => { queryClient.clear() function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: async () => { await sleep(10) @@ -147,7 +147,7 @@ describe('PersistQueryClientProvider', () => { queryClient.clear() function Page() { - const [state] = createQueries(() => ({ + const [state] = useQueries(() => ({ queries: [ { queryKey: key, @@ -230,7 +230,7 @@ describe('PersistQueryClientProvider', () => { queryClient.clear() function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: async () => { await sleep(10) @@ -315,7 +315,7 @@ describe('PersistQueryClientProvider', () => { let fetched = false function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: async () => { fetched = true @@ -386,7 +386,7 @@ describe('PersistQueryClientProvider', () => { queryClient.clear() function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: async () => { await sleep(10) @@ -432,7 +432,7 @@ describe('PersistQueryClientProvider', () => { const [error, persister] = createMockErrorPersister(removeClient) function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: async () => { await sleep(10) @@ -530,7 +530,7 @@ describe('PersistQueryClientProvider', () => { } function Page() { - const state = createQuery(() => ({ queryKey: key })) + const state = useQuery(() => ({ queryKey: key })) createEffect(() => states.push({ diff --git a/packages/solid-query/src/__tests__/QueryClientProvider.test.tsx b/packages/solid-query/src/__tests__/QueryClientProvider.test.tsx index e62c8a23c3..025b633106 100644 --- a/packages/solid-query/src/__tests__/QueryClientProvider.test.tsx +++ b/packages/solid-query/src/__tests__/QueryClientProvider.test.tsx @@ -1,7 +1,7 @@ import { describe, expect, it, vi } from 'vitest' import { render, waitFor } from '@solidjs/testing-library' import { QueryCache } from '@tanstack/query-core' -import { QueryClientProvider, createQuery, useQueryClient } from '..' +import { QueryClientProvider, useQuery, useQueryClient } from '..' import { createQueryClient, queryKey, sleep } from './utils' describe('QueryClientProvider', () => { @@ -12,7 +12,7 @@ describe('QueryClientProvider', () => { const queryClient = createQueryClient({ queryCache }) function Page() { - const query = createQuery(() => ({ + const query = useQuery(() => ({ queryKey: key, queryFn: async () => { await sleep(10) @@ -51,7 +51,7 @@ describe('QueryClientProvider', () => { const queryClient2 = createQueryClient({ queryCache: queryCache2 }) function Page1() { - const query = createQuery(() => ({ + const query = useQuery(() => ({ queryKey: key1, queryFn: async () => { await sleep(10) @@ -66,7 +66,7 @@ describe('QueryClientProvider', () => { ) } function Page2() { - const query = createQuery(() => ({ + const query = useQuery(() => ({ queryKey: key2, queryFn: async () => { await sleep(10) @@ -115,7 +115,7 @@ describe('QueryClientProvider', () => { }) function Page() { - const query = createQuery(() => ({ + const query = useQuery(() => ({ queryKey: key, queryFn: async () => { await sleep(10) diff --git a/packages/solid-query/src/__tests__/createQueries.test-d.tsx b/packages/solid-query/src/__tests__/createQueries.test-d.tsx index c14836d273..6c378912f6 100644 --- a/packages/solid-query/src/__tests__/createQueries.test-d.tsx +++ b/packages/solid-query/src/__tests__/createQueries.test-d.tsx @@ -1,8 +1,8 @@ import { describe, expectTypeOf, it } from 'vitest' -import { createQueries, queryOptions } from '..' -import type { CreateQueryResult } from '..' +import { queryOptions, useQueries } from '..' +import type { UseQueryResult } from '..' -describe('createQueries', () => { +describe('useQueries', () => { it('should return correct data for dynamic queries with mixed result types', () => { const Queries1 = { get: () => @@ -20,15 +20,12 @@ describe('createQueries', () => { } const queries1List = [1, 2, 3].map(() => ({ ...Queries1.get() })) - const result = createQueries(() => ({ + const result = useQueries(() => ({ queries: [...queries1List, { ...Queries2.get() }], })) expectTypeOf(result).toEqualTypeOf< - [ - ...Array>, - CreateQueryResult, - ] + [...Array>, UseQueryResult] >() }) }) diff --git a/packages/solid-query/src/__tests__/queryOptions.test-d.tsx b/packages/solid-query/src/__tests__/queryOptions.test-d.tsx index 15d1133f8a..68cfecf7af 100644 --- a/packages/solid-query/src/__tests__/queryOptions.test-d.tsx +++ b/packages/solid-query/src/__tests__/queryOptions.test-d.tsx @@ -1,6 +1,6 @@ import { describe, expectTypeOf, it } from 'vitest' import { QueryClient, dataTagSymbol, skipToken } from '@tanstack/query-core' -import { createQuery } from '../createQuery' +import { useQuery } from '../useQuery' import { queryOptions } from '../queryOptions' describe('queryOptions', () => { @@ -22,13 +22,13 @@ describe('queryOptions', () => { }, }) }) - it('should work when passed to createQuery', () => { + it('should work when passed to useQuery', () => { const options = queryOptions({ queryKey: ['key'], queryFn: () => Promise.resolve(5), }) - const { data } = createQuery(() => options) + const { data } = useQuery(() => options) expectTypeOf(data).toEqualTypeOf() }) it('should work when passed to fetchQuery', async () => { diff --git a/packages/solid-query/src/__tests__/suspense.test.tsx b/packages/solid-query/src/__tests__/suspense.test.tsx index a842c42390..5a56e07227 100644 --- a/packages/solid-query/src/__tests__/suspense.test.tsx +++ b/packages/solid-query/src/__tests__/suspense.test.tsx @@ -9,18 +9,9 @@ import { createSignal, on, } from 'solid-js' -import { - QueryCache, - QueryClientProvider, - createInfiniteQuery, - createQuery, -} from '..' +import { QueryCache, QueryClientProvider, useInfiniteQuery, useQuery } from '..' import { createQueryClient, queryKey, sleep } from './utils' -import type { - CreateInfiniteQueryResult, - CreateQueryResult, - InfiniteData, -} from '..' +import type { InfiniteData, UseInfiniteQueryResult, UseQueryResult } from '..' describe("useQuery's in Suspense mode", () => { const queryCache = new QueryCache() @@ -28,7 +19,7 @@ describe("useQuery's in Suspense mode", () => { it('should render the correct amount of times in Suspense mode', async () => { const key = queryKey() - const states: Array> = [] + const states: Array> = [] let count = 0 let renders = 0 @@ -36,7 +27,7 @@ describe("useQuery's in Suspense mode", () => { function Page() { const [stateKey, setStateKey] = createSignal(key) - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: stateKey(), queryFn: async () => { count++ @@ -84,11 +75,11 @@ describe("useQuery's in Suspense mode", () => { it('should return the correct states for a successful infinite query', async () => { const key = queryKey() - const states: Array>> = [] + const states: Array>> = [] function Page() { const [multiplier, setMultiplier] = createSignal(1) - const state = createInfiniteQuery(() => ({ + const state = useInfiniteQuery(() => ({ queryKey: [`${key}_${multiplier()}`], queryFn: async ({ pageParam }) => { await sleep(10) @@ -152,7 +143,7 @@ describe("useQuery's in Suspense mode", () => { }) function Page() { - createQuery(() => ({ queryKey: [key], queryFn, suspense: true })) + useQuery(() => ({ queryKey: [key], queryFn, suspense: true })) return <>rendered } @@ -174,7 +165,7 @@ describe("useQuery's in Suspense mode", () => { const key = queryKey() function Page() { - createQuery(() => ({ + useQuery(() => ({ queryKey: key, queryFn: () => { sleep(10) @@ -226,7 +217,7 @@ describe("useQuery's in Suspense mode", () => { let succeed = false function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: async () => { await sleep(10) @@ -289,7 +280,7 @@ describe("useQuery's in Suspense mode", () => { let succeed = false function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: async () => { await sleep(10) @@ -350,7 +341,7 @@ describe("useQuery's in Suspense mode", () => { let count = 0 function Component() { - const result = createQuery(() => ({ + const result = useQuery(() => ({ queryKey: key, queryFn: async () => { await sleep(100) @@ -409,7 +400,7 @@ describe("useQuery's in Suspense mode", () => { const key2 = queryKey() function Component(props: { queryKey: Array }) { - const result = createQuery(() => ({ + const result = useQuery(() => ({ queryKey: props.queryKey, queryFn: async () => { await sleep(100) @@ -460,7 +451,7 @@ describe("useQuery's in Suspense mode", () => { .mockImplementation(() => undefined) function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: async (): Promise => { await sleep(10) @@ -510,7 +501,7 @@ describe("useQuery's in Suspense mode", () => { const key = queryKey() function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: async (): Promise => { await sleep(10) @@ -562,7 +553,7 @@ describe("useQuery's in Suspense mode", () => { .mockImplementation(() => undefined) function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: async (): Promise => { await sleep(10) @@ -612,7 +603,7 @@ describe("useQuery's in Suspense mode", () => { const key = queryKey() function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: async (): Promise => { await sleep(10) @@ -669,7 +660,7 @@ describe("useQuery's in Suspense mode", () => { function Page() { const [enabled, setEnabled] = createSignal(false) - const result = createQuery(() => ({ + const result = useQuery(() => ({ queryKey: [key], queryFn, suspense: true, @@ -715,7 +706,7 @@ describe("useQuery's in Suspense mode", () => { function Page() { const [nonce] = createSignal(0) const queryKeys = [`${key}-${succeed}`] - const result = createQuery(() => ({ + const result = useQuery(() => ({ queryKey: queryKeys, queryFn: async () => { await sleep(10) @@ -784,7 +775,7 @@ describe("useQuery's in Suspense mode", () => { function Page() { const [key, setKey] = createSignal(0) - const result = createQuery(() => ({ + const result = useQuery(() => ({ queryKey: [`${key()}-${succeed}`], queryFn: async () => { await sleep(10) @@ -847,7 +838,7 @@ describe("useQuery's in Suspense mode", () => { const queryKeys = '1' const [enabled, setEnabled] = createSignal(false) - const result = createQuery(() => ({ + const result = useQuery(() => ({ queryKey: [queryKeys], queryFn: async () => { await sleep(10) @@ -906,13 +897,13 @@ describe("useQuery's in Suspense mode", () => { it('should render the correct amount of times in Suspense mode when gcTime is set to 0', async () => { const key = queryKey() - let state: CreateQueryResult | null = null + let state: UseQueryResult | null = null let count = 0 let renders = 0 function Page() { - state = createQuery(() => ({ + state = useQuery(() => ({ queryKey: key, queryFn: async () => { count++ diff --git a/packages/solid-query/src/__tests__/transition.test.tsx b/packages/solid-query/src/__tests__/transition.test.tsx index e3ac0be734..3a272435af 100644 --- a/packages/solid-query/src/__tests__/transition.test.tsx +++ b/packages/solid-query/src/__tests__/transition.test.tsx @@ -1,10 +1,10 @@ import { describe, it } from 'vitest' import { fireEvent, render, waitFor } from '@solidjs/testing-library' import { Show, Suspense, createSignal, startTransition } from 'solid-js' -import { QueryCache, QueryClientProvider, createQuery } from '..' +import { QueryCache, QueryClientProvider, useQuery } from '..' import { createQueryClient, queryKey, sleep } from './utils' -describe("createQuery's in Suspense mode with transitions", () => { +describe("useQuery's in Suspense mode with transitions", () => { const queryCache = new QueryCache() const queryClient = createQueryClient({ queryCache }) @@ -12,7 +12,7 @@ describe("createQuery's in Suspense mode with transitions", () => { const key = queryKey() function Suspended() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: async () => { await sleep(10) diff --git a/packages/solid-query/src/__tests__/createInfiniteQuery.test.tsx b/packages/solid-query/src/__tests__/useInfiniteQuery.test.tsx similarity index 94% rename from packages/solid-query/src/__tests__/createInfiniteQuery.test.tsx rename to packages/solid-query/src/__tests__/useInfiniteQuery.test.tsx index 54cd68f10a..6fc070a04b 100644 --- a/packages/solid-query/src/__tests__/createInfiniteQuery.test.tsx +++ b/packages/solid-query/src/__tests__/useInfiniteQuery.test.tsx @@ -14,9 +14,9 @@ import { import { QueryCache, QueryClientProvider, - createInfiniteQuery, infiniteQueryOptions, keepPreviousData, + useInfiniteQuery, } from '..' import { Blink, @@ -27,9 +27,9 @@ import { } from './utils' import type { - CreateInfiniteQueryResult, InfiniteData, QueryFunctionContext, + UseInfiniteQueryResult, } from '..' import type { Mock } from 'vitest' @@ -63,10 +63,10 @@ describe('useInfiniteQuery', () => { it('should return the correct states for a successful query', async () => { const key = queryKey() - const states: Array>> = [] + const states: Array>> = [] function Page() { - const state = createInfiniteQuery(() => ({ + const state = useInfiniteQuery(() => ({ queryKey: key, queryFn: ({ pageParam }) => Number(pageParam), getNextPageParam: (lastPage) => lastPage + 1, @@ -166,7 +166,7 @@ describe('useInfiniteQuery', () => { function Page() { const start = 1 - const state = createInfiniteQuery(() => ({ + const state = useInfiniteQuery(() => ({ queryKey: key, queryFn: ({ pageParam }) => { if (pageParam === 2) { @@ -206,14 +206,13 @@ describe('useInfiniteQuery', () => { it('should keep the previous data when placeholderData is set', async () => { const key = queryKey() - const states: Array< - Partial>> - > = [] + const states: Array>>> = + [] function Page() { const [order, setOrder] = createSignal('desc') - const state = createInfiniteQuery(() => ({ + const state = useInfiniteQuery(() => ({ queryKey: [key, order()], queryFn: async ({ pageParam }) => { await sleep(10) @@ -306,10 +305,10 @@ describe('useInfiniteQuery', () => { it('should be able to select a part of the data', async () => { const key = queryKey() - const states: Array>> = [] + const states: Array>> = [] function Page() { - const state = createInfiniteQuery(() => ({ + const state = useInfiniteQuery(() => ({ queryKey: key, queryFn: () => ({ count: 1 }), select: (data) => ({ @@ -347,12 +346,12 @@ describe('useInfiniteQuery', () => { it('should be able to select a new result and not cause infinite renders', async () => { const key = queryKey() const states: Array< - CreateInfiniteQueryResult> + UseInfiniteQueryResult> > = [] let selectCalled = 0 function Page() { - const state = createInfiniteQuery(() => ({ + const state = useInfiniteQuery(() => ({ queryKey: key, queryFn: () => ({ count: 1 }), select: (data: InfiniteData<{ count: number }>) => { @@ -393,12 +392,11 @@ describe('useInfiniteQuery', () => { it('should be able to reverse the data', async () => { const key = queryKey() - const states: Array< - Partial>> - > = [] + const states: Array>>> = + [] function Page() { - const state = createInfiniteQuery(() => ({ + const state = useInfiniteQuery(() => ({ queryKey: key, queryFn: async ({ pageParam }) => { await sleep(10) @@ -469,13 +467,12 @@ describe('useInfiniteQuery', () => { it('should be able to fetch a previous page', async () => { const key = queryKey() - const states: Array< - Partial>> - > = [] + const states: Array>>> = + [] function Page() { const start = 10 - const state = createInfiniteQuery(() => ({ + const state = useInfiniteQuery(() => ({ queryKey: key, queryFn: async ({ pageParam }) => { await sleep(10) @@ -558,12 +555,11 @@ describe('useInfiniteQuery', () => { it('should be able to refetch when providing page params automatically', async () => { const key = queryKey() - const states: Array< - Partial>> - > = [] + const states: Array>>> = + [] function Page() { - const state = createInfiniteQuery(() => ({ + const state = useInfiniteQuery(() => ({ queryKey: key, queryFn: async ({ pageParam }) => { await sleep(10) @@ -682,14 +678,13 @@ describe('useInfiniteQuery', () => { it('should return the correct states when refetch fails', async () => { const key = queryKey() - const states: Array< - Partial>> - > = [] + const states: Array>>> = + [] let isRefetch = false function Page() { - const state = createInfiniteQuery(() => ({ + const state = useInfiniteQuery(() => ({ queryKey: key, queryFn: async ({ pageParam }) => { await sleep(10) @@ -795,12 +790,11 @@ describe('useInfiniteQuery', () => { it('should return the correct states when fetchNextPage fails', async () => { const key = queryKey() - const states: Array< - Partial>> - > = [] + const states: Array>>> = + [] function Page() { - const state = createInfiniteQuery(() => ({ + const state = useInfiniteQuery(() => ({ queryKey: key, queryFn: async ({ pageParam }) => { await sleep(10) @@ -899,12 +893,11 @@ describe('useInfiniteQuery', () => { it('should return the correct states when fetchPreviousPage fails', async () => { const key = queryKey() - const states: Array< - Partial>> - > = [] + const states: Array>>> = + [] function Page() { - const state = createInfiniteQuery(() => ({ + const state = useInfiniteQuery(() => ({ queryKey: key, queryFn: async ({ pageParam }) => { await sleep(10) @@ -1007,13 +1000,12 @@ describe('useInfiniteQuery', () => { it('should silently cancel any ongoing fetch when fetching more', async () => { const key = queryKey() - const states: Array< - Partial>> - > = [] + const states: Array>>> = + [] function Page() { const start = 10 - const state = createInfiniteQuery(() => ({ + const state = useInfiniteQuery(() => ({ queryKey: key, queryFn: async ({ pageParam }) => { await sleep(50) @@ -1114,7 +1106,7 @@ describe('useInfiniteQuery', () => { }) function Page() { - const state = createInfiniteQuery(() => ({ + const state = useInfiniteQuery(() => ({ queryKey: key, queryFn: fetchPage, getNextPageParam: (lastPage) => lastPage + 1, @@ -1195,7 +1187,7 @@ describe('useInfiniteQuery', () => { }) function Page() { - const state = createInfiniteQuery(() => ({ + const state = useInfiniteQuery(() => ({ queryKey: key, queryFn: fetchPage, getNextPageParam: (lastPage) => lastPage + 1, @@ -1249,11 +1241,11 @@ describe('useInfiniteQuery', () => { it('should keep fetching first page when not loaded yet and triggering fetch more', async () => { const key = queryKey() - const states: Array>> = [] + const states: Array>> = [] function Page() { const start = 10 - const state = createInfiniteQuery(() => ({ + const state = useInfiniteQuery(() => ({ queryKey: key, queryFn: async ({ pageParam }) => { await sleep(50) @@ -1311,7 +1303,7 @@ describe('useInfiniteQuery', () => { const initialData = { pages: [1, 2, 3, 4], pageParams: [0, 1, 2, 3] } function List() { - createInfiniteQuery(() => ({ + useInfiniteQuery(() => ({ queryKey: key, queryFn: async ({ pageParam, signal: _ }) => { fetches++ @@ -1359,14 +1351,13 @@ describe('useInfiniteQuery', () => { it('should be able to set new pages with the query client', async () => { const key = queryKey() - const states: Array< - Partial>> - > = [] + const states: Array>>> = + [] function Page() { const [firstPage, setFirstPage] = createSignal(0) - const state = createInfiniteQuery(() => ({ + const state = useInfiniteQuery(() => ({ queryKey: key, queryFn: async ({ pageParam }) => { await sleep(10) @@ -1455,12 +1446,11 @@ describe('useInfiniteQuery', () => { it('should only refetch the first page when initialData is provided', async () => { const key = queryKey() - const states: Array< - Partial>> - > = [] + const states: Array>>> = + [] function Page() { - const state = createInfiniteQuery(() => ({ + const state = useInfiniteQuery(() => ({ queryKey: key, queryFn: async ({ pageParam }): Promise => { await sleep(10) @@ -1534,10 +1524,10 @@ describe('useInfiniteQuery', () => { it('should set hasNextPage to false if getNextPageParam returns undefined', async () => { const key = queryKey() - const states: Array>> = [] + const states: Array>> = [] function Page() { - const state = createInfiniteQuery(() => ({ + const state = useInfiniteQuery(() => ({ queryKey: key, queryFn: ({ pageParam }) => Number(pageParam), initialPageParam: 1, @@ -1578,10 +1568,10 @@ describe('useInfiniteQuery', () => { it('should compute hasNextPage correctly using initialData', async () => { const key = queryKey() - const states: Array>> = [] + const states: Array>> = [] function Page() { - const state = createInfiniteQuery(() => ({ + const state = useInfiniteQuery(() => ({ queryKey: key, queryFn: ({ pageParam }): number => pageParam, initialPageParam: 10, @@ -1622,10 +1612,10 @@ describe('useInfiniteQuery', () => { it('should compute hasNextPage correctly for falsy getFetchMore return value using initialData', async () => { const key = queryKey() - const states: Array>> = [] + const states: Array>> = [] function Page() { - const state = createInfiniteQuery(() => ({ + const state = useInfiniteQuery(() => ({ queryKey: key, queryFn: ({ pageParam }): number => pageParam, initialPageParam: 10, @@ -1666,10 +1656,10 @@ describe('useInfiniteQuery', () => { it('should not use selected data when computing hasNextPage', async () => { const key = queryKey() - const states: Array>> = [] + const states: Array>> = [] function Page() { - const state = createInfiniteQuery(() => ({ + const state = useInfiniteQuery(() => ({ queryKey: key, queryFn: ({ pageParam }) => Number(pageParam), initialPageParam: 1, @@ -1731,7 +1721,7 @@ describe('useInfiniteQuery', () => { function Page() { let fetchCountRef = 0 - const state = createInfiniteQuery(() => ({ + const state = useInfiniteQuery(() => ({ queryKey: key, queryFn: ({ pageParam }) => fetchItemsWithLimit(pageParam, fetchCountRef++), @@ -1861,7 +1851,7 @@ describe('useInfiniteQuery', () => { let fetchCountRef = 0 const [isRemovedLastPage, setIsRemovedLastPage] = createSignal(false) - const state = createInfiniteQuery(() => ({ + const state = useInfiniteQuery(() => ({ queryKey: key, queryFn: ({ pageParam }) => fetchItems( @@ -1999,7 +1989,7 @@ describe('useInfiniteQuery', () => { } function Page() { - const state = createInfiniteQuery(() => ({ + const state = useInfiniteQuery(() => ({ queryKey: key, queryFn, getNextPageParam: () => undefined, @@ -2032,7 +2022,7 @@ describe('useInfiniteQuery', () => { } function Page() { - const state = createInfiniteQuery( + const state = useInfiniteQuery( () => ({ queryKey: key, queryFn, @@ -2066,7 +2056,7 @@ describe('useInfiniteQuery', () => { }) function Page() { - const state = createInfiniteQuery( + const state = useInfiniteQuery( () => options, () => queryClient, ) diff --git a/packages/solid-query/src/__tests__/useIsFetching.test.tsx b/packages/solid-query/src/__tests__/useIsFetching.test.tsx index 8aafbec8fc..02fab63141 100644 --- a/packages/solid-query/src/__tests__/useIsFetching.test.tsx +++ b/packages/solid-query/src/__tests__/useIsFetching.test.tsx @@ -1,7 +1,7 @@ import { describe, expect, it } from 'vitest' import { fireEvent, render, waitFor } from '@solidjs/testing-library' import { Show, createEffect, createRenderEffect, createSignal } from 'solid-js' -import { QueryCache, QueryClientProvider, createQuery, useIsFetching } from '..' +import { QueryCache, QueryClientProvider, useIsFetching, useQuery } from '..' import { createQueryClient, queryKey, setActTimeout, sleep } from './utils' describe('useIsFetching', () => { @@ -19,7 +19,7 @@ describe('useIsFetching', () => { function Query() { const [ready, setReady] = createSignal(false) - createQuery(() => ({ + useQuery(() => ({ queryKey: key, queryFn: async () => { await sleep(50) @@ -70,7 +70,7 @@ describe('useIsFetching', () => { } function FirstQuery() { - createQuery(() => ({ + useQuery(() => ({ queryKey: key1, queryFn: async () => { await sleep(150) @@ -81,7 +81,7 @@ describe('useIsFetching', () => { } function SecondQuery() { - createQuery(() => ({ + useQuery(() => ({ queryKey: key2, queryFn: async () => { await sleep(200) @@ -128,7 +128,7 @@ describe('useIsFetching', () => { const isFetchingArray: Array = [] function One() { - createQuery(() => ({ + useQuery(() => ({ queryKey: key1, queryFn: async () => { await sleep(10) @@ -139,7 +139,7 @@ describe('useIsFetching', () => { } function Two() { - createQuery(() => ({ + useQuery(() => ({ queryKey: key2, queryFn: async () => { await sleep(20) @@ -192,7 +192,7 @@ describe('useIsFetching', () => { const key = queryKey() function Page() { - createQuery(() => ({ + useQuery(() => ({ queryKey: key, queryFn: async () => { await sleep(10) @@ -224,7 +224,7 @@ describe('useIsFetching', () => { const key = queryKey() function Page() { - createQuery( + useQuery( () => ({ queryKey: key, queryFn: async () => { diff --git a/packages/solid-query/src/__tests__/useIsMutating.test.tsx b/packages/solid-query/src/__tests__/useIsMutating.test.tsx index ed2a0719cb..efd6eaf83a 100644 --- a/packages/solid-query/src/__tests__/useIsMutating.test.tsx +++ b/packages/solid-query/src/__tests__/useIsMutating.test.tsx @@ -2,7 +2,7 @@ import { describe, expect, it, vi } from 'vitest' import { fireEvent, render, waitFor } from '@solidjs/testing-library' import { Show, createEffect, createRenderEffect, createSignal } from 'solid-js' import * as QueryCore from '@tanstack/query-core' -import { QueryClientProvider, createMutation, useIsMutating } from '..' +import { QueryClientProvider, useIsMutating, useMutation } from '..' import { createQueryClient, setActTimeout, sleep } from './utils' describe('useIsMutating', () => { @@ -19,14 +19,14 @@ describe('useIsMutating', () => { } function Mutations() { - const { mutate: mutate1 } = createMutation(() => ({ + const { mutate: mutate1 } = useMutation(() => ({ mutationKey: ['mutation1'], mutationFn: async () => { await sleep(150) return 'data' }, })) - const { mutate: mutate2 } = createMutation(() => ({ + const { mutate: mutate2 } = useMutation(() => ({ mutationKey: ['mutation2'], mutationFn: async () => { await sleep(50) @@ -74,14 +74,14 @@ describe('useIsMutating', () => { } function Page() { - const { mutate: mutate1 } = createMutation(() => ({ + const { mutate: mutate1 } = useMutation(() => ({ mutationKey: ['mutation1'], mutationFn: async () => { await sleep(100) return 'data' }, })) - const { mutate: mutate2 } = createMutation(() => ({ + const { mutate: mutate2 } = useMutation(() => ({ mutationKey: ['mutation2'], mutationFn: async () => { await sleep(100) @@ -122,14 +122,14 @@ describe('useIsMutating', () => { } function Page() { - const { mutate: mutate1 } = createMutation(() => ({ + const { mutate: mutate1 } = useMutation(() => ({ mutationKey: ['mutation1'], mutationFn: async () => { await sleep(100) return 'data' }, })) - const { mutate: mutate2 } = createMutation(() => ({ + const { mutate: mutate2 } = useMutation(() => ({ mutationKey: ['mutation2'], mutationFn: async () => { await sleep(100) @@ -160,7 +160,7 @@ describe('useIsMutating', () => { function Page() { const isMutating = useIsMutating(undefined, () => queryClient) - const { mutate } = createMutation( + const { mutate } = useMutation( () => ({ mutationKey: ['mutation1'], mutationFn: async () => { @@ -210,7 +210,7 @@ describe('useIsMutating', () => { function Page() { const [mounted, setMounted] = createSignal(true) - const { mutate: mutate1 } = createMutation(() => ({ + const { mutate: mutate1 } = useMutation(() => ({ mutationKey: ['mutation1'], mutationFn: async () => { await sleep(10) diff --git a/packages/solid-query/src/__tests__/createMutation.test.tsx b/packages/solid-query/src/__tests__/useMutation.test.tsx similarity index 95% rename from packages/solid-query/src/__tests__/createMutation.test.tsx rename to packages/solid-query/src/__tests__/useMutation.test.tsx index 764b9c0c22..3a80e4b45f 100644 --- a/packages/solid-query/src/__tests__/createMutation.test.tsx +++ b/packages/solid-query/src/__tests__/useMutation.test.tsx @@ -6,12 +6,7 @@ import { createSignal, } from 'solid-js' import { fireEvent, render, waitFor } from '@solidjs/testing-library' -import { - MutationCache, - QueryCache, - QueryClientProvider, - createMutation, -} from '..' +import { MutationCache, QueryCache, QueryClientProvider, useMutation } from '..' import { createQueryClient, mockOnlineManagerIsOnline, @@ -19,16 +14,16 @@ import { setActTimeout, sleep, } from './utils' -import type { CreateMutationResult } from '../types' +import type { UseMutationResult } from '../types' -describe('createMutation', () => { +describe('useMutation', () => { const queryCache = new QueryCache() const mutationCache = new MutationCache() const queryClient = createQueryClient({ queryCache, mutationCache }) it('should be able to reset `data`', async () => { function Page() { - const mutation = createMutation(() => ({ + const mutation = useMutation(() => ({ mutationFn: () => Promise.resolve('mutation'), })) @@ -68,7 +63,7 @@ describe('createMutation', () => { .mockImplementation(() => undefined) function Page() { - const mutation = createMutation(() => ({ + const mutation = useMutation(() => ({ mutationFn: () => { const err = new Error('Expected mock error. All is well!') err.stack = '' @@ -118,7 +113,7 @@ describe('createMutation', () => { const onSettledMock = vi.fn() function Page() { - const mutation = createMutation(() => ({ + const mutation = useMutation(() => ({ mutationFn: (vars: { count: number }) => Promise.resolve(vars.count), onSuccess: (data) => { onSuccessMock(data) @@ -192,7 +187,7 @@ describe('createMutation', () => { }) function Page() { - const mutation = createMutation(() => ({ + const mutation = useMutation(() => ({ mutationFn: mutateFn, })) @@ -242,7 +237,7 @@ describe('createMutation', () => { const [count, setCount] = createSignal(0) function Page() { - const mutation = createMutation(() => ({ + const mutation = useMutation(() => ({ mutationFn: (vars: { count: number }) => { const error = new Error( `Expected mock error. All is well! ${vars.count}`, @@ -320,7 +315,7 @@ describe('createMutation', () => { const callbacks: Array = [] function Page() { - const mutation = createMutation(() => ({ + const mutation = useMutation(() => ({ mutationFn: async (text: string) => text, onSuccess: async () => { callbacks.push('useMutation.onSuccess') @@ -371,7 +366,7 @@ describe('createMutation', () => { const callbacks: Array = [] function Page() { - const mutation = createMutation(() => ({ + const mutation = useMutation(() => ({ mutationFn: async (_text: string) => Promise.reject(new Error('oops')), onError: async () => { @@ -430,10 +425,10 @@ describe('createMutation', () => { }, }) - const states: Array> = [] + const states: Array> = [] function Page() { - const mutation = createMutation(() => ({ + const mutation = useMutation(() => ({ mutationKey: key, })) @@ -469,7 +464,7 @@ describe('createMutation', () => { let count = 0 function Page() { - const mutation = createMutation(() => ({ + const mutation = useMutation(() => ({ mutationFn: (_text: string) => { count++ return Promise.reject(new Error('oops')) @@ -505,7 +500,7 @@ describe('createMutation', () => { let count = 0 function Page() { - const mutation = createMutation(() => ({ + const mutation = useMutation(() => ({ mutationFn: (_text: string) => { count++ return Promise.reject(new Error('oops')) @@ -572,7 +567,7 @@ describe('createMutation', () => { let count = 0 function Page() { - const mutation = createMutation(() => ({ + const mutation = useMutation(() => ({ mutationFn: async (_text: string) => { count++ await sleep(10) @@ -624,7 +619,7 @@ describe('createMutation', () => { const states: Array = [] function Page() { - const mutation = createMutation(() => ({ + const mutation = useMutation(() => ({ mutationFn: async (_text: string) => { count++ await sleep(10) @@ -675,10 +670,10 @@ describe('createMutation', () => { const onlineMock = mockOnlineManagerIsOnline(false) let count = 0 - const states: Array> = [] + const states: Array> = [] function Page() { - const mutation = createMutation(() => ({ + const mutation = useMutation(() => ({ mutationFn: async (_text: string) => { await sleep(1) count++ @@ -763,7 +758,7 @@ describe('createMutation', () => { it('should not change state if unmounted', async () => { function Mutates() { - const mutation = createMutation(() => ({ mutationFn: () => sleep(10) })) + const mutation = useMutation(() => ({ mutationFn: () => sleep(10) })) return } function Page() { @@ -791,7 +786,7 @@ describe('createMutation', () => { .mockImplementation(() => undefined) function Page() { - const mutation = createMutation(() => ({ + const mutation = useMutation(() => ({ mutationFn: () => { const err = new Error('Expected mock error. All is well!') err.stack = '' @@ -837,7 +832,7 @@ describe('createMutation', () => { let boundary = false function Page() { - const mutation = createMutation(() => ({ + const mutation = useMutation(() => ({ mutationFn: () => { const err = new Error('mock error') err.stack = '' @@ -905,11 +900,11 @@ describe('createMutation', () => { const metaErrorMessage = 'mutation failed' function Page() { - const mutationSucceed = createMutation(() => ({ + const mutationSucceed = useMutation(() => ({ mutationFn: async () => '', meta: { metaSuccessMessage }, })) - const mutationError = createMutation(() => ({ + const mutationError = useMutation(() => ({ mutationFn: async () => { throw new Error('') }, @@ -965,7 +960,7 @@ describe('createMutation', () => { } function Component() { - const mutation = createMutation(() => ({ + const mutation = useMutation(() => ({ mutationFn: async (_text: string) => { count++ await sleep(10) @@ -1030,7 +1025,7 @@ describe('createMutation', () => { let count = 0 function Page() { - const mutation = createMutation(() => ({ + const mutation = useMutation(() => ({ mutationFn: async (_text: string) => { count++ await sleep(10) @@ -1092,7 +1087,7 @@ describe('createMutation', () => { const onError = vi.fn() function Page() { - const mutation = createMutation(() => ({ + const mutation = useMutation(() => ({ mutationFn: async (_text: string) => { await sleep(10) return 'result' @@ -1129,7 +1124,7 @@ describe('createMutation', () => { const mutateFnError = new Error('mutateFnError') function Page() { - const mutation = createMutation(() => ({ + const mutation = useMutation(() => ({ mutationFn: async (_text: string) => { await sleep(10) throw mutateFnError @@ -1168,7 +1163,7 @@ describe('createMutation', () => { const onError = vi.fn() function Page() { - const mutation = createMutation(() => ({ + const mutation = useMutation(() => ({ mutationFn: async (_text: string) => { await sleep(10) throw mutateFnError @@ -1206,7 +1201,7 @@ describe('createMutation', () => { it('should use provided custom queryClient', async () => { function Page() { - const mutation = createMutation( + const mutation = useMutation( () => ({ mutationFn: async (text: string) => { return Promise.resolve(text) diff --git a/packages/solid-query/src/__tests__/useMutationState.test.tsx b/packages/solid-query/src/__tests__/useMutationState.test.tsx index 22d0d9653c..2ba5cdb648 100644 --- a/packages/solid-query/src/__tests__/useMutationState.test.tsx +++ b/packages/solid-query/src/__tests__/useMutationState.test.tsx @@ -2,7 +2,7 @@ import { describe, expect, it } from 'vitest' import { fireEvent, render, waitFor } from '@solidjs/testing-library' import { createEffect } from 'solid-js' import { useMutationState } from '../useMutationState' -import { createMutation } from '../createMutation' +import { useMutation } from '../useMutation' import { QueryClientProvider } from '../QueryClientProvider' import { createQueryClient, sleep } from './utils' @@ -26,7 +26,7 @@ describe('useMutationState', () => { } function Mutate() { - const mutation = createMutation(() => ({ + const mutation = useMutation(() => ({ mutationKey, mutationFn: async (input: number) => { await sleep(150) diff --git a/packages/solid-query/src/__tests__/createQueries.test.tsx b/packages/solid-query/src/__tests__/useQueries.test.tsx similarity index 81% rename from packages/solid-query/src/__tests__/createQueries.test.tsx rename to packages/solid-query/src/__tests__/useQueries.test.tsx index f34fae0b39..46ee666d42 100644 --- a/packages/solid-query/src/__tests__/createQueries.test.tsx +++ b/packages/solid-query/src/__tests__/useQueries.test.tsx @@ -6,11 +6,11 @@ import { QueriesObserver, QueryCache, QueryClientProvider, - createQueries, + useQueries, } from '..' import { createQueryClient, queryKey, sleep } from './utils' import type { QueryFunctionContext, QueryKey } from '@tanstack/query-core' -import type { CreateQueryResult, QueryFunction, SolidQueryOptions } from '..' +import type { QueryFunction, SolidQueryOptions, UseQueryResult } from '..' describe('useQueries', () => { const queryCache = new QueryCache() @@ -19,10 +19,10 @@ describe('useQueries', () => { it('should return the correct states', async () => { const key1 = queryKey() const key2 = queryKey() - const results: Array> = [] + const results: Array> = [] function Page() { - const result = createQueries(() => ({ + const result = useQueries(() => ({ queries: [ { queryKey: key1, @@ -76,7 +76,7 @@ describe('useQueries', () => { // @ts-expect-error (Page component is not rendered) function Page() { - const result1 = createQueries< + const result1 = useQueries< [[number], [string], [Array, boolean]] >(() => ({ queries: [ @@ -94,10 +94,10 @@ describe('useQueries', () => { }, ], })) - expectTypeOf(result1[0]).toEqualTypeOf>() - expectTypeOf(result1[1]).toEqualTypeOf>() + expectTypeOf(result1[0]).toEqualTypeOf>() + expectTypeOf(result1[1]).toEqualTypeOf>() expectTypeOf(result1[2]).toEqualTypeOf< - CreateQueryResult, boolean> + UseQueryResult, boolean> >() expectTypeOf(result1[0].data).toEqualTypeOf() expectTypeOf(result1[1].data).toEqualTypeOf() @@ -105,7 +105,7 @@ describe('useQueries', () => { expectTypeOf(result1[2].error).toEqualTypeOf() // TData (3rd element) takes precedence over TQueryFnData (1st element) - const result2 = createQueries< + const result2 = useQueries< [[string, unknown, string], [string, unknown, number]] >(() => ({ queries: [ @@ -127,17 +127,13 @@ describe('useQueries', () => { }, ], })) - expectTypeOf(result2[0]).toEqualTypeOf< - CreateQueryResult - >() - expectTypeOf(result2[1]).toEqualTypeOf< - CreateQueryResult - >() + expectTypeOf(result2[0]).toEqualTypeOf>() + expectTypeOf(result2[1]).toEqualTypeOf>() expectTypeOf(result2[0].data).toEqualTypeOf() expectTypeOf(result2[1].data).toEqualTypeOf() // types should be enforced - createQueries<[[string, unknown, string], [string, boolean, number]]>( + useQueries<[[string, unknown, string], [string, boolean, number]]>( () => ({ queries: [ { @@ -167,7 +163,7 @@ describe('useQueries', () => { ) // field names should be enforced - createQueries<[[string]]>(() => ({ + useQueries<[[string]]>(() => ({ queries: [ { queryKey: key1, @@ -185,7 +181,7 @@ describe('useQueries', () => { // @ts-expect-error (Page component is not rendered) function Page() { - const result1 = createQueries< + const result1 = useQueries< [ { queryFnData: number }, { queryFnData: string }, @@ -207,14 +203,10 @@ describe('useQueries', () => { }, ], })) - expectTypeOf(result1[0]).toEqualTypeOf< - CreateQueryResult - >() - expectTypeOf(result1[1]).toEqualTypeOf< - CreateQueryResult - >() + expectTypeOf(result1[0]).toEqualTypeOf>() + expectTypeOf(result1[1]).toEqualTypeOf>() expectTypeOf(result1[2]).toEqualTypeOf< - CreateQueryResult, boolean> + UseQueryResult, boolean> >() expectTypeOf(result1[0].data).toEqualTypeOf() expectTypeOf(result1[1].data).toEqualTypeOf() @@ -222,7 +214,7 @@ describe('useQueries', () => { expectTypeOf(result1[2].error).toEqualTypeOf() // TData (data prop) takes precedence over TQueryFnData (queryFnData prop) - const result2 = createQueries< + const result2 = useQueries< [ { queryFnData: string; data: string }, { queryFnData: string; data: number }, @@ -247,49 +239,39 @@ describe('useQueries', () => { }, ], })) - expectTypeOf(result2[0]).toEqualTypeOf< - CreateQueryResult - >() - expectTypeOf(result2[1]).toEqualTypeOf< - CreateQueryResult - >() + expectTypeOf(result2[0]).toEqualTypeOf>() + expectTypeOf(result2[1]).toEqualTypeOf>() expectTypeOf(result2[0].data).toEqualTypeOf() expectTypeOf(result2[1].data).toEqualTypeOf() // can pass only TData (data prop) although TQueryFnData will be left unknown - const result3 = createQueries<[{ data: string }, { data: number }]>( - () => ({ - queries: [ - { - queryKey: key1, - queryFn: () => 'string', - select: (a) => { - expectTypeOf(a).toEqualTypeOf() - return a as string - }, + const result3 = useQueries<[{ data: string }, { data: number }]>(() => ({ + queries: [ + { + queryKey: key1, + queryFn: () => 'string', + select: (a) => { + expectTypeOf(a).toEqualTypeOf() + return a as string }, - { - queryKey: key2, - queryFn: () => 'string', - select: (a) => { - expectTypeOf(a).toEqualTypeOf() - return a as number - }, + }, + { + queryKey: key2, + queryFn: () => 'string', + select: (a) => { + expectTypeOf(a).toEqualTypeOf() + return a as number }, - ], - }), - ) - expectTypeOf(result3[0]).toEqualTypeOf< - CreateQueryResult - >() - expectTypeOf(result3[1]).toEqualTypeOf< - CreateQueryResult - >() + }, + ], + })) + expectTypeOf(result3[0]).toEqualTypeOf>() + expectTypeOf(result3[1]).toEqualTypeOf>() expectTypeOf(result3[0].data).toEqualTypeOf() expectTypeOf(result3[1].data).toEqualTypeOf() // types should be enforced - createQueries< + useQueries< [ { queryFnData: string; data: string }, { queryFnData: string; data: number; error: boolean }, @@ -322,7 +304,7 @@ describe('useQueries', () => { })) // field names should be enforced - createQueries<[{ queryFnData: string }]>(() => ({ + useQueries<[{ queryFnData: string }]>(() => ({ queries: [ { queryKey: key1, @@ -342,21 +324,21 @@ describe('useQueries', () => { // @ts-expect-error (Page component is not rendered) function Page() { // Array.map preserves TQueryFnData - const result1 = createQueries(() => ({ + const result1 = useQueries(() => ({ queries: Array(50).map((_, i) => ({ queryKey: ['key', i] as const, queryFn: () => i + 10, })), })) expectTypeOf(result1).toEqualTypeOf< - Array> + Array> >() if (result1[0]) { expectTypeOf(result1[0].data).toEqualTypeOf() } // Array.map preserves TData - const result2 = createQueries(() => ({ + const result2 = useQueries(() => ({ queries: Array(50).map((_, i) => ({ queryKey: ['key', i] as const, queryFn: () => i + 10, @@ -364,10 +346,10 @@ describe('useQueries', () => { })), })) expectTypeOf(result2).toEqualTypeOf< - Array> + Array> >() - const result3 = createQueries(() => ({ + const result3 = useQueries(() => ({ queries: [ { queryKey: key1, @@ -384,16 +366,16 @@ describe('useQueries', () => { }, ], })) - expectTypeOf(result3[0]).toEqualTypeOf>() - expectTypeOf(result3[1]).toEqualTypeOf>() - expectTypeOf(result3[2]).toEqualTypeOf>() + expectTypeOf(result3[0]).toEqualTypeOf>() + expectTypeOf(result3[1]).toEqualTypeOf>() + expectTypeOf(result3[2]).toEqualTypeOf>() expectTypeOf(result3[0].data).toEqualTypeOf() expectTypeOf(result3[1].data).toEqualTypeOf() // select takes precedence over queryFn expectTypeOf(result3[2].data).toEqualTypeOf() // initialData/placeholderData are enforced - createQueries(() => ({ + useQueries(() => ({ queries: [ { queryKey: key1, @@ -413,7 +395,7 @@ describe('useQueries', () => { })) // select params are "indirectly" enforced - createQueries(() => ({ + useQueries(() => ({ queries: [ // unfortunately TS will not suggest the type for you { @@ -439,7 +421,7 @@ describe('useQueries', () => { })) // callbacks are also indirectly enforced with Array.map - createQueries(() => ({ + useQueries(() => ({ queries: Array(50).map((_, i) => ({ queryKey: ['key', i] as const, queryFn: () => i + 10, @@ -447,7 +429,7 @@ describe('useQueries', () => { })), })) - createQueries(() => ({ + useQueries(() => ({ queries: Array(50).map((_, i) => ({ queryKey: ['key', i] as const, queryFn: () => i + 10, @@ -456,7 +438,7 @@ describe('useQueries', () => { })) // results inference works when all the handlers are defined - const result4 = createQueries(() => ({ + const result4 = useQueries(() => ({ queries: [ { queryKey: key1, @@ -473,12 +455,12 @@ describe('useQueries', () => { }, ], })) - expectTypeOf(result4[0]).toEqualTypeOf>() - expectTypeOf(result4[1]).toEqualTypeOf>() - expectTypeOf(result4[2]).toEqualTypeOf>() + expectTypeOf(result4[0]).toEqualTypeOf>() + expectTypeOf(result4[1]).toEqualTypeOf>() + expectTypeOf(result4[2]).toEqualTypeOf>() // handles when queryFn returns a Promise - const result5 = createQueries(() => ({ + const result5 = useQueries(() => ({ queries: [ { queryKey: key1, @@ -486,10 +468,10 @@ describe('useQueries', () => { }, ], })) - expectTypeOf(result5[0]).toEqualTypeOf>() + expectTypeOf(result5[0]).toEqualTypeOf>() // Array as const does not throw error - const result6 = createQueries( + const result6 = useQueries( () => ({ queries: [ @@ -504,11 +486,11 @@ describe('useQueries', () => { ], }) as const, ) - expectTypeOf(result6[0]).toEqualTypeOf>() - expectTypeOf(result6[1]).toEqualTypeOf>() + expectTypeOf(result6[0]).toEqualTypeOf>() + expectTypeOf(result6[1]).toEqualTypeOf>() // field names should be enforced - array literal - createQueries(() => ({ + useQueries(() => ({ queries: [ { queryKey: key1, @@ -518,7 +500,7 @@ describe('useQueries', () => { })) // field names should be enforced - Array.map() result - createQueries(() => ({ + useQueries(() => ({ // @ts-expect-error (invalidField) queries: Array(10).map(() => ({ someInvalidField: '', @@ -526,7 +508,7 @@ describe('useQueries', () => { })) // field names should be enforced - array literal - createQueries(() => ({ + useQueries(() => ({ queries: [ { queryKey: key1, @@ -536,7 +518,7 @@ describe('useQueries', () => { })) // supports queryFn using fetch() to return Promise - Array.map() result - createQueries(() => ({ + useQueries(() => ({ queries: Array(50).map((_, i) => ({ queryKey: ['key', i] as const, queryFn: () => @@ -545,7 +527,7 @@ describe('useQueries', () => { })) // supports queryFn using fetch() to return Promise - array literal - createQueries(() => ({ + useQueries(() => ({ queries: [ { queryKey: key1, @@ -586,7 +568,7 @@ describe('useQueries', () => { >( queries: Array>, ) { - return createQueries(() => ({ + return useQueries(() => ({ queries: queries.map( // no need to type the mapped query (query) => { @@ -616,7 +598,7 @@ describe('useQueries', () => { // @ts-expect-error (Page component is not rendered) function Page() { - const result = createQueries(() => ({ + const result = useQueries(() => ({ queries: [ { queryKey: getQueryKeyA(), @@ -628,10 +610,10 @@ describe('useQueries', () => { }, ], })) - expectTypeOf(result[0]).toEqualTypeOf>() - expectTypeOf(result[1]).toEqualTypeOf>() + expectTypeOf(result[0]).toEqualTypeOf>() + expectTypeOf(result[1]).toEqualTypeOf>() - const withSelector = createQueries(() => ({ + const withSelector = useQueries(() => ({ queries: [ { queryKey: getQueryKeyA(), @@ -646,10 +628,10 @@ describe('useQueries', () => { ], })) expectTypeOf(withSelector[0]).toEqualTypeOf< - CreateQueryResult<[number, string], Error> + UseQueryResult<[number, string], Error> >() expectTypeOf(withSelector[1]).toEqualTypeOf< - CreateQueryResult<[string, number], Error> + UseQueryResult<[string, number], Error> >() const withWrappedQueries = useWrappedQueries( @@ -661,7 +643,7 @@ describe('useQueries', () => { ) expectTypeOf(withWrappedQueries).toEqualTypeOf< - Array> + Array> >() } }) @@ -685,7 +667,7 @@ describe('useQueries', () => { }) function Queries() { - createQueries(() => ({ + useQueries(() => ({ queries: [ { queryKey: key1, diff --git a/packages/solid-query/src/__tests__/createQuery.test-d.tsx b/packages/solid-query/src/__tests__/useQuery.test-d.tsx similarity index 85% rename from packages/solid-query/src/__tests__/createQuery.test-d.tsx rename to packages/solid-query/src/__tests__/useQuery.test-d.tsx index 91717c34d7..79ea46d43c 100644 --- a/packages/solid-query/src/__tests__/createQuery.test-d.tsx +++ b/packages/solid-query/src/__tests__/useQuery.test-d.tsx @@ -1,10 +1,10 @@ import { describe, expectTypeOf, it } from 'vitest' -import { createQuery, queryOptions } from '../index' +import { queryOptions, useQuery } from '../index' describe('initialData', () => { describe('Config object overload', () => { it('TData should always be defined when initialData is provided as an object', () => { - const { data } = createQuery(() => ({ + const { data } = useQuery(() => ({ queryKey: ['key'], queryFn: () => ({ wow: true }), initialData: { wow: true }, @@ -19,13 +19,13 @@ describe('initialData', () => { queryFn: () => ({ wow: true }), initialData: { wow: true }, }) - const { data } = createQuery(() => options) + const { data } = useQuery(() => options) expectTypeOf(data).toEqualTypeOf<{ wow: boolean }>() }) it('TData should always be defined when initialData is provided as a function which ALWAYS returns the data', () => { - const { data } = createQuery(() => ({ + const { data } = useQuery(() => ({ queryKey: ['key'], queryFn: () => ({ wow: true }), initialData: () => ({ wow: true }), @@ -35,7 +35,7 @@ describe('initialData', () => { }) it('TData should have undefined in the union when initialData is NOT provided', () => { - const { data } = createQuery(() => ({ + const { data } = useQuery(() => ({ queryKey: ['key'], queryFn: () => ({ wow: true }), })) @@ -44,7 +44,7 @@ describe('initialData', () => { }) it('TData should have undefined in the union when initialData is provided as a function which can return undefined', () => { - const { data } = createQuery(() => ({ + const { data } = useQuery(() => ({ queryKey: ['key'], queryFn: () => ({ wow: true }), initialData: () => undefined as { wow: boolean } | undefined, @@ -56,7 +56,7 @@ describe('initialData', () => { describe('Query key overload', () => { it('TData should always be defined when initialData is provided', () => { - const { data } = createQuery(() => ({ + const { data } = useQuery(() => ({ queryKey: ['key'], queryFn: () => ({ wow: true }), initialData: { wow: true }, @@ -66,7 +66,7 @@ describe('initialData', () => { }) it('TData should have undefined in the union when initialData is NOT provided', () => { - const { data } = createQuery(() => ({ + const { data } = useQuery(() => ({ queryKey: ['key'], queryFn: () => ({ wow: true }), })) @@ -77,7 +77,7 @@ describe('initialData', () => { describe('Query key and func', () => { it('TData should always be defined when initialData is provided', () => { - const { data } = createQuery(() => ({ + const { data } = useQuery(() => ({ queryKey: ['key'], queryFn: () => ({ wow: true }), initialData: { wow: true }, @@ -87,7 +87,7 @@ describe('initialData', () => { }) it('TData should have undefined in the union when initialData is NOT provided', () => { - const { data } = createQuery(() => ({ + const { data } = useQuery(() => ({ queryKey: ['key'], queryFn: () => ({ wow: true }), })) diff --git a/packages/solid-query/src/__tests__/createQuery.test.tsx b/packages/solid-query/src/__tests__/useQuery.test.tsx similarity index 93% rename from packages/solid-query/src/__tests__/createQuery.test.tsx rename to packages/solid-query/src/__tests__/useQuery.test.tsx index 60e1df1aef..70914603b7 100644 --- a/packages/solid-query/src/__tests__/createQuery.test.tsx +++ b/packages/solid-query/src/__tests__/useQuery.test.tsx @@ -11,12 +11,7 @@ import { } from 'solid-js' import { fireEvent, render, waitFor } from '@solidjs/testing-library' import { reconcile } from 'solid-js/store' -import { - QueryCache, - QueryClientProvider, - createQuery, - keepPreviousData, -} from '..' +import { QueryCache, QueryClientProvider, keepPreviousData, useQuery } from '..' import { Blink, createQueryClient, @@ -27,16 +22,16 @@ import { sleep, } from './utils' import type { - CreateQueryOptions, - CreateQueryResult, - DefinedCreateQueryResult, + DefinedUseQueryResult, OmitKeyof, QueryFunction, + UseQueryOptions, + UseQueryResult, } from '..' import type { Mock } from 'vitest' import type { JSX } from 'solid-js' -describe('createQuery', () => { +describe('useQuery', () => { const queryCache = new QueryCache() const queryClient = createQueryClient({ queryCache }) @@ -46,12 +41,12 @@ describe('createQuery', () => { // @ts-expect-error function Page() { // unspecified query function should default to unknown - const noQueryFn = createQuery(() => ({ queryKey: key })) + const noQueryFn = useQuery(() => ({ queryKey: key })) expectTypeOf(noQueryFn.data).toEqualTypeOf() expectTypeOf(noQueryFn.error).toEqualTypeOf() // it should infer the result type from the query function - const fromQueryFn = createQuery(() => ({ + const fromQueryFn = useQuery(() => ({ queryKey: key, queryFn: () => 'test', })) @@ -59,7 +54,7 @@ describe('createQuery', () => { expectTypeOf(fromQueryFn.error).toEqualTypeOf() // it should be possible to specify the result type - const withResult = createQuery(() => ({ + const withResult = useQuery(() => ({ queryKey: key, queryFn: () => 'test', })) @@ -67,7 +62,7 @@ describe('createQuery', () => { expectTypeOf(withResult.error).toEqualTypeOf() // it should be possible to specify the error type - const withError = createQuery(() => ({ + const withError = useQuery(() => ({ queryKey: key, queryFn: () => 'test', })) @@ -75,18 +70,18 @@ describe('createQuery', () => { expectTypeOf(withError.error).toEqualTypeOf() // it should provide the result type in the configuration - createQuery(() => ({ + useQuery(() => ({ queryKey: [key], queryFn: async () => true, })) // it should be possible to specify a union type as result type - const unionTypeSync = createQuery(() => ({ + const unionTypeSync = useQuery(() => ({ queryKey: key, queryFn: () => (Math.random() > 0.5 ? ('a' as const) : ('b' as const)), })) expectTypeOf(unionTypeSync.data).toEqualTypeOf<'a' | 'b' | undefined>() - const unionTypeAsync = createQuery<'a' | 'b'>(() => ({ + const unionTypeAsync = useQuery<'a' | 'b'>(() => ({ queryKey: key, queryFn: () => Promise.resolve(Math.random() > 0.5 ? 'a' : 'b'), })) @@ -94,21 +89,21 @@ describe('createQuery', () => { // should error when the query function result does not match with the specified type // @ts-expect-error - createQuery(() => ({ queryKey: key, queryFn: () => 'test' })) + useQuery(() => ({ queryKey: key, queryFn: () => 'test' })) // it should infer the result type from a generic query function function queryFn(): Promise { return Promise.resolve({} as T) } - const fromGenericQueryFn = createQuery(() => ({ + const fromGenericQueryFn = useQuery(() => ({ queryKey: key, queryFn: () => queryFn(), })) expectTypeOf(fromGenericQueryFn.data).toEqualTypeOf() expectTypeOf(fromGenericQueryFn.error).toEqualTypeOf() - const fromGenericOptionsQueryFn = createQuery(() => ({ + const fromGenericOptionsQueryFn = useQuery(() => ({ queryKey: key, queryFn: () => queryFn(), })) @@ -128,7 +123,7 @@ describe('createQuery', () => { return n + 42 } - createQuery(() => ({ + useQuery(() => ({ queryKey: ['my-data', 100] as const, queryFn: getMyDataArrayKey, })) @@ -140,13 +135,13 @@ describe('createQuery', () => { return Number(context.queryKey[0]) + 42 } - createQuery(() => ({ + useQuery(() => ({ queryKey: ['1'] as ['1'], queryFn: getMyDataStringKey, })) // it should handle query-functions that return Promise - createQuery(() => ({ + useQuery(() => ({ queryKey: key, queryFn: () => fetch('return Promise').then((resp) => resp.json()), })) @@ -165,12 +160,12 @@ describe('createQuery', () => { // return type must be wrapped with TQueryFnReturn ) => Promise, options?: OmitKeyof< - CreateQueryOptions, + UseQueryOptions, 'queryKey' | 'queryFn' | 'initialData', 'safely' >, ) => - createQuery(() => ({ + useQuery(() => ({ queryKey: qk, queryFn: () => fetcher(qk[1], 'token'), ...options, @@ -178,7 +173,7 @@ describe('createQuery', () => { const test = useWrappedQuery([''], async () => '1') expectTypeOf(test.data).toEqualTypeOf() - // handles wrapped queries with custom fetcher passed directly to createQuery + // handles wrapped queries with custom fetcher passed directly to useQuery const useWrappedFuncStyleQuery = < TQueryKey extends [string, Record?], TQueryFnData, @@ -188,11 +183,11 @@ describe('createQuery', () => { qk: TQueryKey, fetcher: () => Promise, options?: OmitKeyof< - CreateQueryOptions, + UseQueryOptions, 'queryKey' | 'queryFn' | 'initialData', 'safely' >, - ) => createQuery(() => ({ queryKey: qk, queryFn: fetcher, ...options })) + ) => useQuery(() => ({ queryKey: qk, queryFn: fetcher, ...options })) const testFuncStyle = useWrappedFuncStyleQuery([''], async () => true) expectTypeOf(testFuncStyle.data).toEqualTypeOf() } @@ -203,7 +198,7 @@ describe('createQuery', () => { const key = queryKey() function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: async () => { await sleep(10) @@ -231,10 +226,10 @@ describe('createQuery', () => { it('should return the correct states for a successful query', async () => { const key = queryKey() - const states: Array> = [] + const states: Array> = [] function Page(): JSX.Element { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: async () => { await sleep(10) @@ -339,10 +334,10 @@ describe('createQuery', () => { it('should return the correct states for an unsuccessful query', async () => { const key = queryKey() - const states: Array> = [] + const states: Array> = [] function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: () => Promise.reject(new Error('rejected')), retry: 1, @@ -457,7 +452,7 @@ describe('createQuery', () => { it('should set isFetchedAfterMount to true after a query has been fetched', async () => { const key = queryKey() - const states: Array> = [] + const states: Array> = [] await queryClient.prefetchQuery({ queryKey: key, @@ -465,7 +460,7 @@ describe('createQuery', () => { }) function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: () => 'data', })) @@ -501,7 +496,7 @@ describe('createQuery', () => { let fetchCount = 0 function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: async () => { fetchCount++ @@ -540,7 +535,7 @@ describe('createQuery', () => { let fetchCount = 0 function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: async () => { fetchCount++ @@ -579,7 +574,7 @@ describe('createQuery', () => { let fetchCount = 0 function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: async () => { fetchCount++ @@ -614,12 +609,12 @@ describe('createQuery', () => { it('should be able to watch a query without providing a query function', async () => { const key = queryKey() - const states: Array> = [] + const states: Array> = [] queryClient.setQueryDefaults(key, { queryFn: () => 'data' }) function Page() { - const state = createQuery(() => ({ queryKey: key })) + const state = useQuery(() => ({ queryKey: key })) createRenderEffect(() => { states.push({ ...state }) }) @@ -641,7 +636,7 @@ describe('createQuery', () => { it('should pick up a query when re-mounting with gcTime 0', async () => { const key = queryKey() - const states: Array> = [] + const states: Array> = [] function Page() { const [toggle, setToggle] = createSignal(false) @@ -662,7 +657,7 @@ describe('createQuery', () => { } function Component({ value }: { value: string }) { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: async () => { await sleep(10) @@ -721,10 +716,10 @@ describe('createQuery', () => { it('should fetch when refetchOnMount is false and nothing has been fetched yet', async () => { const key = queryKey() - const states: Array> = [] + const states: Array> = [] function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: () => 'test', refetchOnMount: false, @@ -750,12 +745,12 @@ describe('createQuery', () => { it('should not fetch when refetchOnMount is false and data has been fetched already', async () => { const key = queryKey() - const states: Array> = [] + const states: Array> = [] queryClient.setQueryData(key, 'prefetched') function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: () => 'test', refetchOnMount: false, @@ -780,10 +775,10 @@ describe('createQuery', () => { it('should be able to select a part of the data with select', async () => { const key = queryKey() - const states: Array> = [] + const states: Array> = [] function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: () => ({ name: 'test' }), select: (data) => data.name, @@ -809,10 +804,10 @@ describe('createQuery', () => { it('should be able to select a part of the data with select in object syntax 2', async () => { const key = queryKey() - const states: Array> = [] + const states: Array> = [] function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: () => ({ name: 'test' }), select: (data) => data.name, @@ -838,10 +833,10 @@ describe('createQuery', () => { it('should be able to select a part of the data with select in object syntax 1', async () => { const key = queryKey() - const states: Array> = [] + const states: Array> = [] function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: () => ({ name: 'test' }), select: (data) => data.name, @@ -867,10 +862,10 @@ describe('createQuery', () => { 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: Array> = [] + const states: Array> = [] function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: async () => { await sleep(10) @@ -911,7 +906,7 @@ describe('createQuery', () => { const error = new Error('Select Error') function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: () => ({ name: 'test' }), select: () => { @@ -943,10 +938,10 @@ describe('createQuery', () => { it('should track properties and only re-render when a tracked property changes', async () => { const key = queryKey() - const states: Array> = [] + const states: Array> = [] function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: async () => { await sleep(10) @@ -991,10 +986,10 @@ describe('createQuery', () => { it('should always re-render if we are tracking props but not using any', async () => { const key = queryKey() let renderCount = 0 - const states: Array> = [] + const states: Array> = [] function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: () => 'test', })) @@ -1044,12 +1039,12 @@ describe('createQuery', () => { { id: '2', done: true }, ] - const states: Array> = [] + const states: Array> = [] let count = 0 function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: async () => { await sleep(10) @@ -1106,12 +1101,12 @@ 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: Array> = [] + const results: Array> = [] queryClient.setQueryData(key, 'set') function Page() { - const result = createQuery(() => ({ + const result = useQuery(() => ({ queryKey: key, queryFn: async () => { await sleep(10) @@ -1155,11 +1150,11 @@ describe('createQuery', () => { it('should update query stale state and refetch when invalidated with invalidateQueries', async () => { const key = queryKey() - const states: Array> = [] + const states: Array> = [] let count = 0 function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: async () => { await sleep(10) @@ -1229,11 +1224,11 @@ describe('createQuery', () => { it('should not update disabled query when refetch with refetchQueries', async () => { const key = queryKey() - const states: Array> = [] + const states: Array> = [] let count = 0 function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: async () => { await sleep(10) @@ -1275,11 +1270,11 @@ describe('createQuery', () => { it('should not refetch disabled query when invalidated with invalidateQueries', async () => { const key = queryKey() - const states: Array> = [] + const states: Array> = [] let count = 0 function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: async () => { await sleep(10) @@ -1321,12 +1316,12 @@ describe('createQuery', () => { it('should not fetch when switching to a disabled query', async () => { const key = queryKey() - const states: Array> = [] + const states: Array> = [] function Page() { const [count, setCount] = createSignal(0) - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: [key, count()], queryFn: async () => { await sleep(5) @@ -1378,12 +1373,12 @@ describe('createQuery', () => { it('should keep the previous data when placeholderData is set', async () => { const key = queryKey() - const states: Array> = [] + const states: Array> = [] function Page() { const [count, setCount] = createSignal(0) - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: [key, count()], queryFn: async () => { await sleep(10) @@ -1445,12 +1440,12 @@ describe('createQuery', () => { it('should not show initial data from next query if placeholderData is set', async () => { const key = queryKey() - const states: Array> = [] + const states: Array> = [] function Page() { const [count, setCount] = createSignal(0) - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: [key, count()], queryFn: async () => { await sleep(10) @@ -1525,7 +1520,7 @@ describe('createQuery', () => { 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: Array> = [] + const states: Array> = [] queryClient.setQueryData([key, 10], 10) @@ -1534,7 +1529,7 @@ describe('createQuery', () => { function Page() { const [count, setCount] = createSignal(10) - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: [key, count()], queryFn: async () => { await sleep(10) @@ -1607,10 +1602,10 @@ describe('createQuery', () => { it('should use the correct query function when components use different configurations', async () => { const key = queryKey() - const states: Array> = [] + const states: Array> = [] function FirstComponent() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: async () => { await sleep(10) @@ -1631,7 +1626,7 @@ describe('createQuery', () => { } function SecondComponent() { - createQuery(() => ({ + useQuery(() => ({ queryKey: key, queryFn: () => 2, })) @@ -1675,8 +1670,8 @@ describe('createQuery', () => { it('should be able to set different stale times for a query', async () => { const key = queryKey() - const states1: Array> = [] - const states2: Array> = [] + const states1: Array> = [] + const states2: Array> = [] await queryClient.prefetchQuery({ queryKey: key, @@ -1689,7 +1684,7 @@ describe('createQuery', () => { await sleep(20) function FirstComponent() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: async () => { await sleep(10) @@ -1704,7 +1699,7 @@ describe('createQuery', () => { } function SecondComponent() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: async () => { await sleep(10) @@ -1744,12 +1739,12 @@ describe('createQuery', () => { data: 'prefetch', isStale: false, }, - // Second createQuery started fetching + // Second useQuery started fetching { data: 'prefetch', isStale: false, }, - // Second createQuery data came in + // Second useQuery data came in { data: 'two', isStale: false, @@ -1767,7 +1762,7 @@ describe('createQuery', () => { data: 'prefetch', isStale: true, }, - // Second createQuery data came in + // Second useQuery data came in { data: 'two', isStale: false, @@ -1782,10 +1777,10 @@ describe('createQuery', () => { it('should re-render when a query becomes stale', async () => { const key = queryKey() - const states: Array> = [] + const states: Array> = [] function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: () => 'test', staleTime: 50, @@ -1812,10 +1807,10 @@ describe('createQuery', () => { it('should not re-render when it should only re-render on data changes and the data did not change', async () => { const key = queryKey() - const states: Array> = [] + const states: Array> = [] function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: async () => { await sleep(5) @@ -1864,14 +1859,14 @@ describe('createQuery', () => { const key2 = queryKey() function Page() { - const first = createQuery(() => ({ + const first = useQuery(() => ({ queryKey: key1, queryFn: () => 'data', enabled: false, initialData: 'init', })) - const second = createQuery(() => ({ + const second = useQuery(() => ({ queryKey: key2, queryFn: () => 'data', enabled: false, @@ -1909,8 +1904,8 @@ describe('createQuery', () => { } function Page() { - createQuery(() => ({ queryKey: key, queryFn, retryDelay: 10 })) - createQuery(() => ({ queryKey: key, queryFn, retryDelay: 20 })) + useQuery(() => ({ queryKey: key, queryFn, retryDelay: 10 })) + useQuery(() => ({ queryKey: key, queryFn, retryDelay: 20 })) return null } @@ -1934,8 +1929,8 @@ describe('createQuery', () => { } function Page() { - createQuery(() => ({ queryKey: key, queryFn })) - createQuery(() => ({ queryKey: key, queryFn })) + useQuery(() => ({ queryKey: key, queryFn })) + useQuery(() => ({ queryKey: key, queryFn })) renders++ return null } @@ -1958,7 +1953,7 @@ describe('createQuery', () => { function Page() { const [, setNewState] = createSignal('state') - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: () => 'data', })) @@ -1987,12 +1982,12 @@ describe('createQuery', () => { const key2 = queryKey() function Page() { - const first = createQuery(() => ({ + const first = useQuery(() => ({ queryKey: key1, queryFn: () => 'data', enabled: false, })) - const second = createQuery(() => ({ + const second = useQuery(() => ({ queryKey: key2, queryFn: () => 'data', })) @@ -2027,7 +2022,7 @@ describe('createQuery', () => { const key = queryKey() function Page() { - const { status } = createQuery(() => ({ + const { status } = useQuery(() => ({ queryKey: key, queryFn: async () => { await sleep(10) @@ -2054,7 +2049,7 @@ describe('createQuery', () => { .mockReturnValue('data') function Page() { - const { data = 'default' } = createQuery(() => ({ + const { data = 'default' } = useQuery(() => ({ queryKey: key, queryFn, enabled: false, @@ -2082,11 +2077,11 @@ describe('createQuery', () => { it('should not refetch stale query on focus when `refetchOnWindowFocus` is set to `false`', async () => { const key = queryKey() - const states: Array> = [] + const states: Array> = [] let count = 0 function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: () => count++, staleTime: 0, @@ -2117,11 +2112,11 @@ describe('createQuery', () => { it('should not refetch stale query on focus when `refetchOnWindowFocus` is set to a function that returns `false`', async () => { const key = queryKey() - const states: Array> = [] + const states: Array> = [] let count = 0 function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: () => count++, staleTime: 0, @@ -2152,11 +2147,11 @@ describe('createQuery', () => { it('should not refetch fresh query on focus when `refetchOnWindowFocus` is set to `true`', async () => { const key = queryKey() - const states: Array> = [] + const states: Array> = [] let count = 0 function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: () => count++, staleTime: Infinity, @@ -2187,11 +2182,11 @@ describe('createQuery', () => { it('should refetch fresh query on focus when `refetchOnWindowFocus` is set to `always`', async () => { const key = queryKey() - const states: Array> = [] + const states: Array> = [] let count = 0 function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: async () => { await sleep(10) @@ -2227,11 +2222,11 @@ describe('createQuery', () => { it('should calculate focus behavior for refetchOnWindowFocus depending on function', async () => { const key = queryKey() - const states: Array> = [] + const states: Array> = [] let count = 0 function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: async () => { await sleep(10) @@ -2277,7 +2272,7 @@ describe('createQuery', () => { it('should refetch fresh query when refetchOnMount is set to always', async () => { const key = queryKey() - const states: Array> = [] + const states: Array> = [] await queryClient.prefetchQuery({ queryKey: key, @@ -2285,7 +2280,7 @@ describe('createQuery', () => { }) function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: () => 'data', refetchOnMount: 'always', @@ -2320,7 +2315,7 @@ describe('createQuery', () => { it('should refetch stale query when refetchOnMount is set to true', async () => { const key = queryKey() - const states: Array> = [] + const states: Array> = [] await queryClient.prefetchQuery({ queryKey: key, @@ -2330,7 +2325,7 @@ describe('createQuery', () => { await sleep(10) function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: () => 'data', refetchOnMount: true, @@ -2371,7 +2366,7 @@ describe('createQuery', () => { .mockImplementation(() => undefined) function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: () => { return Promise.reject(new Error('Error test')) @@ -2407,7 +2402,7 @@ describe('createQuery', () => { .mockImplementation(() => undefined) function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: () => Promise.reject(new Error('Error test')), retry: false, @@ -2444,7 +2439,7 @@ describe('createQuery', () => { .mockImplementation(() => undefined) function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: () => Promise.reject(new Error('Error test')), retry: false, @@ -2481,7 +2476,7 @@ describe('createQuery', () => { .mockImplementation(() => undefined) function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: () => Promise.reject(new Error('Error test')), retry: false, @@ -2520,7 +2515,7 @@ describe('createQuery', () => { .mockImplementation(() => undefined) function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: () => Promise.reject(new Error('Error test')), retry: false, @@ -2557,10 +2552,10 @@ describe('createQuery', () => { it('should update with data if we observe no properties and throwOnError', async () => { const key = queryKey() - let result: CreateQueryResult | undefined + let result: UseQueryResult | undefined function Page() { - const query = createQuery(() => ({ + const query = useQuery(() => ({ queryKey: key, queryFn: () => Promise.resolve('data'), throwOnError: true, @@ -2588,7 +2583,7 @@ describe('createQuery', () => { const key = queryKey() function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: () => Promise.reject(new Error('Local Error')), retry: false, @@ -2619,7 +2614,7 @@ describe('createQuery', () => { const key = queryKey() function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: () => Promise.reject(new Error('Remote Error')), retry: false, @@ -2659,7 +2654,7 @@ describe('createQuery', () => { let count = 0 function Page() { - const result = createQuery(() => ({ + const result = useQuery(() => ({ queryKey: key, queryFn: async () => { count++ @@ -2714,7 +2709,7 @@ describe('createQuery', () => { let count = 0 function Page() { - const result = createQuery(() => ({ + const result = useQuery(() => ({ queryKey: key, queryFn: async () => { count++ @@ -2770,7 +2765,7 @@ describe('createQuery', () => { it('should always fetch if refetchOnMount is set to always', async () => { const key = queryKey() - const states: Array> = [] + const states: Array> = [] await queryClient.prefetchQuery({ queryKey: key, @@ -2778,7 +2773,7 @@ describe('createQuery', () => { }) function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: () => 'data', refetchOnMount: 'always', @@ -2824,10 +2819,10 @@ describe('createQuery', () => { it('should fetch if initial data is set', async () => { const key = queryKey() - const states: Array> = [] + const states: Array> = [] function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: () => 'data', initialData: 'initial', @@ -2862,10 +2857,10 @@ describe('createQuery', () => { it('should not fetch if initial data is set with a stale time', async () => { const key = queryKey() - const states: Array> = [] + const states: Array> = [] function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: () => 'data', staleTime: 50, @@ -2900,12 +2895,12 @@ describe('createQuery', () => { it('should fetch if initial data updated at is older than stale time', async () => { const key = queryKey() - const states: Array> = [] + const states: Array> = [] const oneSecondAgo = Date.now() - 1000 function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: () => 'data', staleTime: 50, @@ -2946,10 +2941,10 @@ describe('createQuery', () => { it('should fetch if "initial data updated at" is exactly 0', async () => { const key = queryKey() - const states: Array> = [] + const states: Array> = [] function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: () => 'data', staleTime: 10 * 1000, // 10 seconds @@ -2985,12 +2980,11 @@ describe('createQuery', () => { it('should keep initial data when the query key changes', async () => { const key = queryKey() - const states: Array>> = - [] + const states: Array>> = [] function Page() { const [count, setCount] = createSignal(0) - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: [key, count()], queryFn: () => ({ count: 10 }), staleTime: Infinity, @@ -3034,7 +3028,7 @@ describe('createQuery', () => { }) function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn, retry: 1, @@ -3080,7 +3074,7 @@ describe('createQuery', () => { }) function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn, retryDelay: 1, @@ -3123,7 +3117,7 @@ describe('createQuery', () => { }) function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn, retry: 1, @@ -3165,7 +3159,7 @@ describe('createQuery', () => { let count = 0 function Page() { - const query = createQuery(() => ({ + const query = useQuery(() => ({ queryKey: key, queryFn: () => { count++ @@ -3219,12 +3213,12 @@ describe('createQuery', () => { it('should fetch on mount when a query was already created with setQueryData', async () => { const key = queryKey() - const states: Array> = [] + const states: Array> = [] queryClient.setQueryData(key, 'prefetched') function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: () => 'data', })) @@ -3259,7 +3253,7 @@ describe('createQuery', () => { it('should refetch after focus regain', async () => { const key = queryKey() - const states: Array> = [] + const states: Array> = [] // make page unfocused const visibilityMock = mockVisibilityState('hidden') @@ -3268,7 +3262,7 @@ describe('createQuery', () => { queryClient.setQueryData(key, 'prefetched') function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: async () => { await sleep(10) @@ -3326,7 +3320,7 @@ describe('createQuery', () => { // See https://github.com/tannerlinsley/react-query/issues/195 it('should refetch if stale after a prefetch', async () => { const key = queryKey() - const states: Array> = [] + const states: Array> = [] const queryFn = vi.fn<(...args: Array) => string>() queryFn.mockImplementation(() => 'data') @@ -3343,7 +3337,7 @@ describe('createQuery', () => { await sleep(11) function Page() { - const state = createQuery(() => ({ queryKey: key, queryFn })) + const state = useQuery(() => ({ queryKey: key, queryFn })) createRenderEffect(() => { states.push({ ...state }) }) @@ -3384,7 +3378,7 @@ describe('createQuery', () => { await sleep(0) function Page() { - createQuery(() => ({ queryKey: key, queryFn, staleTime: 1000 })) + useQuery(() => ({ queryKey: key, queryFn, staleTime: 1000 })) return null } @@ -3407,7 +3401,7 @@ describe('createQuery', () => { function Page() { let counter = 0 - const query = createQuery(() => ({ + const query = useQuery(() => ({ queryKey: key, queryFn: async () => { if (counter < 2) { @@ -3449,7 +3443,7 @@ describe('createQuery', () => { const [enabled, setEnabled] = createSignal(false) const [isPrefetched, setPrefetched] = createSignal(false) - const query = createQuery(() => ({ + const query = useQuery(() => ({ queryKey: key, queryFn: async () => { count++ @@ -3498,7 +3492,7 @@ describe('createQuery', () => { function Page() { const [shouldFetch, setShouldFetch] = createSignal(false) - const query = createQuery(() => ({ + const query = useQuery(() => ({ queryKey: key, queryFn: () => 'data', enabled: shouldFetch(), @@ -3539,7 +3533,7 @@ describe('createQuery', () => { function Component() { let val = 1 - const dataQuery = createQuery(() => ({ + const dataQuery = useQuery(() => ({ queryKey: [key], queryFn: () => { return val++ @@ -3598,7 +3592,7 @@ describe('createQuery', () => { function Component() { let val = 1 - const dataQuery = createQuery(() => ({ + const dataQuery = useQuery(() => ({ queryKey: [key], queryFn: () => { return val++ @@ -3653,10 +3647,10 @@ describe('createQuery', () => { it('should mark query as fetching, when using initialData', async () => { const key = queryKey() - const results: Array> = [] + const results: Array> = [] function Page() { - const result = createQuery(() => ({ + const result = useQuery(() => ({ queryKey: key, queryFn: async () => { await sleep(10) @@ -3688,10 +3682,10 @@ describe('createQuery', () => { it('should initialize state properly, when initialData is falsy', async () => { const key = queryKey() - const results: Array> = [] + const results: Array> = [] function Page() { - const result = createQuery(() => ({ + const result = useQuery(() => ({ queryKey: key, queryFn: () => 1, initialData: 0, @@ -3720,12 +3714,12 @@ describe('createQuery', () => { // // See https://github.com/tannerlinsley/react-query/issues/214 it('data should persist when enabled is changed to false', async () => { const key = queryKey() - const results: Array> = [] + const results: Array> = [] function Page() { const [shouldFetch, setShouldFetch] = createSignal(true) - const result = createQuery(() => ({ + const result = useQuery(() => ({ queryKey: key, queryFn: () => 'fetched data', enabled: shouldFetch(), @@ -3765,7 +3759,7 @@ describe('createQuery', () => { queryFn.mockImplementation(() => 'data') function Page() { - const { fetchStatus } = createQuery(() => ({ + const { fetchStatus } = useQuery(() => ({ queryKey: key, queryFn, enabled: false, @@ -3790,7 +3784,7 @@ describe('createQuery', () => { const key = queryKey() function Page() { - const query = createQuery(() => ({ + const query = useQuery(() => ({ queryKey: key, queryFn: () => 'data', enabled: false, @@ -3818,7 +3812,7 @@ describe('createQuery', () => { const key = queryKey() function Page() { - const query = createQuery(() => ({ + const query = useQuery(() => ({ queryKey: key, queryFn: () => 'fetched data', gcTime: Infinity, @@ -3844,7 +3838,7 @@ describe('createQuery', () => { const key = queryKey() function Page() { - const query = createQuery(() => ({ + const query = useQuery(() => ({ queryKey: key, queryFn: () => 'fetched data', gcTime: 1000 * 60 * 10, // 10 Minutes @@ -3877,7 +3871,7 @@ describe('createQuery', () => { const memoFn = vi.fn() function Page() { - const result = createQuery(() => ({ + const result = useQuery(() => ({ queryKey: key, queryFn: async () => { await sleep(10) @@ -3926,7 +3920,7 @@ describe('createQuery', () => { function Page() { const [int, setInt] = createSignal(200) - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: () => count++, refetchInterval: int(), @@ -3956,10 +3950,10 @@ describe('createQuery', () => { it('should refetch in an interval depending on function result', async () => { const key = queryKey() let count = 0 - const states: Array> = [] + const states: Array> = [] function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: async () => { await sleep(10) @@ -4028,10 +4022,10 @@ describe('createQuery', () => { it('should not interval fetch with a refetchInterval of 0', async () => { const key = queryKey() - const states: Array> = [] + const states: Array> = [] function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: () => 1, refetchInterval: 0, @@ -4072,7 +4066,7 @@ describe('createQuery', () => { it('should accept an empty string as query key', async () => { function Page() { - const result = createQuery(() => ({ + const result = useQuery(() => ({ queryKey: [''], queryFn: (ctx) => ctx.queryKey, })) @@ -4090,7 +4084,7 @@ describe('createQuery', () => { it('should accept an object as query key', async () => { function Page() { - const result = createQuery(() => ({ + const result = useQuery(() => ({ queryKey: [{ a: 'a' }], queryFn: (ctx) => ctx.queryKey, })) @@ -4114,13 +4108,13 @@ describe('createQuery', () => { .mockReturnValue('data') function Disabled() { - createQuery(() => ({ queryKey: key, queryFn, enabled: false })) + useQuery(() => ({ queryKey: key, queryFn, enabled: false })) return null } function Page() { const [enabled, setEnabled] = createSignal(false) - const result = createQuery(() => ({ + const result = useQuery(() => ({ queryKey: key, queryFn, enabled: enabled(), @@ -4148,10 +4142,10 @@ describe('createQuery', () => { it('should use placeholder data while the query loads', async () => { const key1 = queryKey() - const states: Array> = [] + const states: Array> = [] function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key1, queryFn: () => 'data', placeholderData: 'placeholder', @@ -4193,13 +4187,12 @@ describe('createQuery', () => { it('should use placeholder data even for disabled queries', async () => { const key1 = queryKey() - const states: Array<{ state: CreateQueryResult; count: number }> = - [] + const states: Array<{ state: UseQueryResult; count: number }> = [] function Page() { const [count, setCount] = createSignal(0) - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key1, queryFn: () => 'data', placeholderData: 'placeholder', @@ -4260,10 +4253,10 @@ describe('createQuery', () => { it('placeholder data should run through select', async () => { const key1 = queryKey() - const states: Array> = [] + const states: Array> = [] function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key1, queryFn: () => 1, placeholderData: 23, @@ -4306,11 +4299,11 @@ describe('createQuery', () => { it('placeholder data function result should run through select', async () => { const key1 = queryKey() - const states: Array> = [] + const states: Array> = [] let placeholderFunctionRunCount = 0 function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key1, queryFn: () => 1, placeholderData: () => { @@ -4370,7 +4363,7 @@ describe('createQuery', () => { setForceValue((prev) => prev + 1) } - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key1, queryFn: async () => { await sleep(10) @@ -4420,7 +4413,7 @@ describe('createQuery', () => { function Page() { const [forceValue, setForceValue] = createSignal(1) - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key1, queryFn: async () => { await sleep(10) @@ -4472,7 +4465,7 @@ describe('createQuery', () => { function Page() { const [forceValue, setForceValue] = createSignal(1) - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key1, queryFn: async () => { await sleep(10) @@ -4535,7 +4528,7 @@ describe('createQuery', () => { } function Page() { - const state = createQuery(() => ({ queryKey: key, queryFn })) + const state = useQuery(() => ({ queryKey: key, queryFn })) return (

Status: {state.status}

@@ -4558,7 +4551,7 @@ describe('createQuery', () => { it('should cancel the query if the signal was consumed and there are no more subscriptions', async () => { const key = queryKey() - const states: Array> = [] + const states: Array> = [] const queryFn: QueryFunction< string, @@ -4572,7 +4565,7 @@ describe('createQuery', () => { } function Page(props: { limit: number }) { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: [key, props.limit] as const, queryFn, })) @@ -4628,7 +4621,7 @@ describe('createQuery', () => { it('should refetch when quickly switching to a failed query', async () => { const key = queryKey() - const states: Array> = [] + const states: Array> = [] const queryFn = async () => { await sleep(50) @@ -4639,7 +4632,7 @@ describe('createQuery', () => { const [id, setId] = createSignal(1) const [hasChanged, setHasChanged] = createSignal(false) - const state = createQuery(() => ({ queryKey: [key, id()], queryFn })) + const state = useQuery(() => ({ queryKey: [key, id()], queryFn })) createRenderEffect(() => { states.push({ ...state }) @@ -4678,11 +4671,11 @@ describe('createQuery', () => { it('should update query state and refetch when reset with resetQueries', async () => { const key = queryKey() - const states: Array> = [] + const states: Array> = [] let count = 0 function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: async () => { await sleep(10) @@ -4752,11 +4745,11 @@ describe('createQuery', () => { it('should update query state and not refetch when resetting a disabled query with resetQueries', async () => { const key = queryKey() - const states: Array> = [] + const states: Array> = [] let count = 0 function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: async () => { await sleep(10) @@ -4840,7 +4833,7 @@ describe('createQuery', () => { } function Page() { - createQuery(() => ({ + useQuery(() => ({ queryKey: key, queryFn: () => 'test', queryKeyHashFn, @@ -4867,7 +4860,7 @@ describe('createQuery', () => { }) function Page(props: { enabled: boolean }) { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: ['key'], queryFn, enabled: props.enabled, @@ -4928,7 +4921,7 @@ describe('createQuery', () => { it('should refetch when query key changed when previous status is error', async () => { function Page(props: { id: number }) { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: [props.id], queryFn: async () => { await sleep(10) @@ -4993,7 +4986,7 @@ describe('createQuery', () => { it('should refetch when query key changed when switching between erroneous queries', async () => { function Page(props: { id: boolean }) { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: [props.id], queryFn: async () => { await sleep(10) @@ -5055,13 +5048,13 @@ describe('createQuery', () => { it('should have no error in pending state when refetching after error occurred', async () => { const key = queryKey() - const states: Array> = [] + const states: Array> = [] const error = new Error('oops') let count = 0 function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: async () => { await sleep(10) @@ -5139,7 +5132,7 @@ describe('createQuery', () => { const states: Array = [] function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: async () => { await sleep(10) @@ -5189,7 +5182,7 @@ describe('createQuery', () => { let count = 0 function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: async () => { count++ @@ -5260,7 +5253,7 @@ describe('createQuery', () => { let count = 0 function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: async () => { count++ @@ -5314,7 +5307,7 @@ describe('createQuery', () => { let count = 0 function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: async () => { count++ @@ -5368,7 +5361,7 @@ describe('createQuery', () => { let count = 0 function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: async () => { count++ @@ -5426,7 +5419,7 @@ describe('createQuery', () => { let count = 0 function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: async () => { count++ @@ -5498,7 +5491,7 @@ describe('createQuery', () => { let count = 0 function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: async (): Promise => { count++ @@ -5563,7 +5556,7 @@ describe('createQuery', () => { let count = 0 function Component() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: async () => { count++ @@ -5627,7 +5620,7 @@ describe('createQuery', () => { let count = 0 function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: async () => { count++ @@ -5691,7 +5684,7 @@ describe('createQuery', () => { let count = 0 function Component() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: async ({ signal: _signal }) => { count++ @@ -5772,7 +5765,7 @@ describe('createQuery', () => { let count = 0 function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: async () => { count++ @@ -5816,7 +5809,7 @@ describe('createQuery', () => { let count = 0 function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: async (): Promise => { count++ @@ -5866,7 +5859,7 @@ describe('createQuery', () => { let count = 0 function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: async (): Promise => { count++ @@ -5920,7 +5913,7 @@ describe('createQuery', () => { it('should have status=error on mount when a query has failed', async () => { const key = queryKey() - const states: Array> = [] + const states: Array> = [] const error = new Error('oops') const queryFn = async (): Promise => { @@ -5928,7 +5921,7 @@ describe('createQuery', () => { } function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn, retry: false, @@ -5961,7 +5954,7 @@ describe('createQuery', () => { const key = queryKey() function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: () => 'data', })) @@ -6001,7 +5994,7 @@ describe('createQuery', () => { const error = new Error('oops') function Page() { - const state = createQuery(() => ({ + const state = useQuery(() => ({ queryKey: key, queryFn: async (): Promise => { throw error @@ -6037,7 +6030,7 @@ describe('createQuery', () => { } function Page() { - const state = createQuery( + const state = useQuery( () => ({ queryKey: key, queryFn }), () => queryClient, ) diff --git a/packages/solid-query/src/__tests__/infiniteQueryOptions.test-d.tsx b/packages/solid-query/src/__tests__/useQueryOptions.test-d.tsx similarity index 90% rename from packages/solid-query/src/__tests__/infiniteQueryOptions.test-d.tsx rename to packages/solid-query/src/__tests__/useQueryOptions.test-d.tsx index 9adb4c341c..e4aee2be37 100644 --- a/packages/solid-query/src/__tests__/infiniteQueryOptions.test-d.tsx +++ b/packages/solid-query/src/__tests__/useQueryOptions.test-d.tsx @@ -1,6 +1,6 @@ import { describe, expectTypeOf, it } from 'vitest' import { dataTagSymbol } from '@tanstack/query-core' -import { createInfiniteQuery } from '../createInfiniteQuery' +import { useInfiniteQuery } from '../useInfiniteQuery' import { infiniteQueryOptions } from '../infiniteQueryOptions' import type { InfiniteData } from '@tanstack/query-core' import type { @@ -24,7 +24,7 @@ describe('infiniteQueryOptions', () => { }) doNotRun(() => { - expectTypeOf(createInfiniteQuery(() => options).data).toEqualTypeOf< + expectTypeOf(useInfiniteQuery(() => options).data).toEqualTypeOf< InfiniteData<{ wow: boolean }, unknown> >() @@ -55,7 +55,7 @@ describe('infiniteQueryOptions', () => { }) doNotRun(() => { - expectTypeOf(() => createInfiniteQuery(() => options).data).toEqualTypeOf< + expectTypeOf(() => useInfiniteQuery(() => options).data).toEqualTypeOf< () => InfiniteData<{ wow: boolean }, unknown> | undefined >() diff --git a/packages/solid-query/src/index.ts b/packages/solid-query/src/index.ts index 5a1a6cce9a..8eb29f71f3 100644 --- a/packages/solid-query/src/index.ts +++ b/packages/solid-query/src/index.ts @@ -12,7 +12,8 @@ export type { QueryClientConfig, InfiniteQueryObserverOptions, } from './QueryClient' -export { createQuery } from './createQuery' +export { useQuery } from './useQuery' +export { useQuery as createQuery } from './useQuery' export { queryOptions } from './queryOptions' export type { DefinedInitialDataOptions, @@ -25,14 +26,17 @@ export { } from './QueryClientProvider' export type { QueryClientProviderProps } from './QueryClientProvider' export { useIsFetching } from './useIsFetching' -export { createInfiniteQuery } from './createInfiniteQuery' +export { useInfiniteQuery } from './useInfiniteQuery' +export { useInfiniteQuery as createInfiniteQuery } from './useInfiniteQuery' export { infiniteQueryOptions } from './infiniteQueryOptions' export type { DefinedInitialDataInfiniteOptions, UndefinedInitialDataInfiniteOptions, } from './infiniteQueryOptions' -export { createMutation } from './createMutation' +export { useMutation } from './useMutation' +export { useMutation as createMutation } from './useMutation' export { useIsMutating } from './useIsMutating' export { useMutationState } from './useMutationState' -export { createQueries } from './createQueries' +export { useQueries } from './useQueries' +export { useQueries as createQueries } from './useQueries' export { useIsRestoring, IsRestoringProvider } from './isRestoring' diff --git a/packages/solid-query/src/types.ts b/packages/solid-query/src/types.ts index 7e318327aa..758653a099 100644 --- a/packages/solid-query/src/types.ts +++ b/packages/solid-query/src/types.ts @@ -19,7 +19,7 @@ import type { } from './QueryClient' import type { Accessor } from 'solid-js' -export interface CreateBaseQueryOptions< +export interface UseBaseQueryOptions< TQueryFnData = unknown, TError = DefaultError, TData = TQueryFnData, @@ -38,7 +38,7 @@ export interface CreateBaseQueryOptions< deferStream?: boolean /** * @deprecated The `suspense` option has been deprecated in v5 and will be removed in the next major version. - * The `data` property on createQuery is a SolidJS resource and will automatically suspend when the data is loading. + * The `data` property on useQuery is a SolidJS resource and will automatically suspend when the data is loading. * Setting `suspense` to `false` will be a no-op. */ suspense?: boolean @@ -49,7 +49,7 @@ export interface SolidQueryOptions< TError = DefaultError, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey, -> extends CreateBaseQueryOptions< +> extends UseBaseQueryOptions< TQueryFnData, TError, TData, @@ -57,7 +57,7 @@ export interface SolidQueryOptions< TQueryKey > {} -export type CreateQueryOptions< +export type UseQueryOptions< TQueryFnData = unknown, TError = DefaultError, TData = TQueryFnData, @@ -66,25 +66,25 @@ export type CreateQueryOptions< /* --- Create Query and Create Base Query Types --- */ -export type CreateBaseQueryResult< +export type UseBaseQueryResult< TData = unknown, TError = DefaultError, > = QueryObserverResult -export type CreateQueryResult< +export type UseQueryResult< TData = unknown, TError = DefaultError, -> = CreateBaseQueryResult +> = UseBaseQueryResult -export type DefinedCreateBaseQueryResult< +export type DefinedUseBaseQueryResult< TData = unknown, TError = DefaultError, > = DefinedQueryObserverResult -export type DefinedCreateQueryResult< +export type DefinedUseQueryResult< TData = unknown, TError = DefaultError, -> = DefinedCreateBaseQueryResult +> = DefinedUseBaseQueryResult /* --- Create Infinite Queries Types --- */ export interface SolidInfiniteQueryOptions< @@ -115,13 +115,13 @@ export interface SolidInfiniteQueryOptions< deferStream?: boolean /** * @deprecated The `suspense` option has been deprecated in v5 and will be removed in the next major version. - * The `data` property on createInfiniteQuery is a SolidJS resource and will automatically suspend when the data is loading. + * The `data` property on useInfiniteQuery is a SolidJS resource and will automatically suspend when the data is loading. * Setting `suspense` to `false` will be a no-op. */ suspense?: boolean } -export type CreateInfiniteQueryOptions< +export type UseInfiniteQueryOptions< TQueryFnData = unknown, TError = DefaultError, TData = TQueryFnData, @@ -138,12 +138,12 @@ export type CreateInfiniteQueryOptions< > > -export type CreateInfiniteQueryResult< +export type UseInfiniteQueryResult< TData = unknown, TError = DefaultError, > = InfiniteQueryObserverResult -export type DefinedCreateInfiniteQueryResult< +export type DefinedUseInfiniteQueryResult< TData = unknown, TError = DefaultError, > = DefinedInfiniteQueryObserverResult @@ -159,14 +159,14 @@ export interface SolidMutationOptions< '_defaulted' > {} -export type CreateMutationOptions< +export type UseMutationOptions< TData = unknown, TError = DefaultError, TVariables = void, TContext = unknown, > = Accessor> -export type CreateMutateFunction< +export type UseMutateFunction< TData = unknown, TError = DefaultError, TVariables = void, @@ -175,28 +175,28 @@ export type CreateMutateFunction< ...args: Parameters> ) => void -export type CreateMutateAsyncFunction< +export type UseMutateAsyncFunction< TData = unknown, TError = DefaultError, TVariables = void, TContext = unknown, > = MutateFunction -export type CreateBaseMutationResult< +export type UseBaseMutationResult< TData = unknown, TError = DefaultError, TVariables = unknown, TContext = unknown, > = Override< MutationObserverResult, - { mutate: CreateMutateFunction } + { mutate: UseMutateFunction } > & { - mutateAsync: CreateMutateAsyncFunction + mutateAsync: UseMutateAsyncFunction } -export type CreateMutationResult< +export type UseMutationResult< TData = unknown, TError = DefaultError, TVariables = unknown, TContext = unknown, -> = CreateBaseMutationResult +> = UseBaseMutationResult diff --git a/packages/solid-query/src/createBaseQuery.ts b/packages/solid-query/src/useBaseQuery.ts similarity index 98% rename from packages/solid-query/src/createBaseQuery.ts rename to packages/solid-query/src/useBaseQuery.ts index 120b67dd97..0b504ed0a7 100644 --- a/packages/solid-query/src/createBaseQuery.ts +++ b/packages/solid-query/src/useBaseQuery.ts @@ -15,7 +15,7 @@ import { createStore, reconcile, unwrap } from 'solid-js/store' import { useQueryClient } from './QueryClientProvider' import { shouldThrowError } from './utils' import { useIsRestoring } from './isRestoring' -import type { CreateBaseQueryOptions } from './types' +import type { UseBaseQueryOptions } from './types' import type { Accessor, Signal } from 'solid-js' import type { QueryClient } from './QueryClient' import type { @@ -101,7 +101,7 @@ const hydratableObserverResult = < } // Base Query Function that is used to create the query. -export function createBaseQuery< +export function useBaseQuery< TQueryFnData, TError, TData, @@ -109,7 +109,7 @@ export function createBaseQuery< TQueryKey extends QueryKey, >( options: Accessor< - CreateBaseQueryOptions + UseBaseQueryOptions >, Observer: typeof QueryObserver, queryClient?: Accessor, diff --git a/packages/solid-query/src/createInfiniteQuery.ts b/packages/solid-query/src/useInfiniteQuery.ts similarity index 73% rename from packages/solid-query/src/createInfiniteQuery.ts rename to packages/solid-query/src/useInfiniteQuery.ts index dade59f357..9dcff4b185 100644 --- a/packages/solid-query/src/createInfiniteQuery.ts +++ b/packages/solid-query/src/useInfiniteQuery.ts @@ -1,6 +1,6 @@ import { InfiniteQueryObserver } from '@tanstack/query-core' import { createMemo } from 'solid-js' -import { createBaseQuery } from './createBaseQuery' +import { useBaseQuery } from './useBaseQuery' import type { DefaultError, InfiniteData, @@ -9,9 +9,9 @@ import type { } from '@tanstack/query-core' import type { QueryClient } from './QueryClient' import type { - CreateInfiniteQueryOptions, - CreateInfiniteQueryResult, - DefinedCreateInfiniteQueryResult, + DefinedUseInfiniteQueryResult, + UseInfiniteQueryOptions, + UseInfiniteQueryResult, } from './types' import type { Accessor } from 'solid-js' import type { @@ -19,7 +19,7 @@ import type { UndefinedInitialDataInfiniteOptions, } from './infiniteQueryOptions' -export function createInfiniteQuery< +export function useInfiniteQuery< TQueryFnData, TError = DefaultError, TData = InfiniteData, @@ -34,8 +34,8 @@ export function createInfiniteQuery< TPageParam >, queryClient?: Accessor, -): DefinedCreateInfiniteQueryResult -export function createInfiniteQuery< +): DefinedUseInfiniteQueryResult +export function useInfiniteQuery< TQueryFnData, TError = DefaultError, TData = InfiniteData, @@ -50,16 +50,16 @@ export function createInfiniteQuery< TPageParam >, queryClient?: Accessor, -): CreateInfiniteQueryResult +): UseInfiniteQueryResult -export function createInfiniteQuery< +export function useInfiniteQuery< TQueryFnData, TError = DefaultError, TData = InfiniteData, TQueryKey extends QueryKey = QueryKey, TPageParam = unknown, >( - options: CreateInfiniteQueryOptions< + options: UseInfiniteQueryOptions< TQueryFnData, TError, TData, @@ -67,10 +67,10 @@ export function createInfiniteQuery< TPageParam >, queryClient?: Accessor, -): CreateInfiniteQueryResult { - return createBaseQuery( +): UseInfiniteQueryResult { + return useBaseQuery( createMemo(() => options()), InfiniteQueryObserver as typeof QueryObserver, queryClient, - ) as CreateInfiniteQueryResult + ) as UseInfiniteQueryResult } diff --git a/packages/solid-query/src/createMutation.ts b/packages/solid-query/src/useMutation.ts similarity index 80% rename from packages/solid-query/src/createMutation.ts rename to packages/solid-query/src/useMutation.ts index 39c56ff2e3..6ffcf831a8 100644 --- a/packages/solid-query/src/createMutation.ts +++ b/packages/solid-query/src/useMutation.ts @@ -6,22 +6,22 @@ import { noop, shouldThrowError } from './utils' import type { DefaultError } from '@tanstack/query-core' import type { QueryClient } from './QueryClient' import type { - CreateMutateFunction, - CreateMutationOptions, - CreateMutationResult, + UseMutateFunction, + UseMutationOptions, + UseMutationResult, } from './types' import type { Accessor } from 'solid-js' // HOOK -export function createMutation< +export function useMutation< TData = unknown, TError = DefaultError, TVariables = void, TContext = unknown, >( - options: CreateMutationOptions, + options: UseMutationOptions, queryClient?: Accessor, -): CreateMutationResult { +): UseMutationResult { const client = createMemo(() => useQueryClient(queryClient?.())) const observer = new MutationObserver( @@ -29,7 +29,7 @@ export function createMutation< options(), ) - const mutate: CreateMutateFunction = ( + const mutate: UseMutateFunction = ( variables, mutateOptions, ) => { @@ -37,7 +37,7 @@ export function createMutation< } const [state, setState] = createStore< - CreateMutationResult + UseMutationResult >({ ...observer.getCurrentResult(), mutate, diff --git a/packages/solid-query/src/createQueries.ts b/packages/solid-query/src/useQueries.ts similarity index 88% rename from packages/solid-query/src/createQueries.ts rename to packages/solid-query/src/useQueries.ts index 702630b2fa..1b9e5a0fb8 100644 --- a/packages/solid-query/src/createQueries.ts +++ b/packages/solid-query/src/useQueries.ts @@ -14,7 +14,7 @@ import { import { useQueryClient } from './QueryClientProvider' import { useIsRestoring } from './isRestoring' import { noop } from './utils' -import type { CreateQueryResult, SolidQueryOptions } from './types' +import type { SolidQueryOptions, UseQueryResult } from './types' import type { Accessor } from 'solid-js' import type { QueryClient } from './QueryClient' import type { @@ -31,7 +31,7 @@ import type { // This defines the `UseQueryOptions` that are accepted in `QueriesOptions` & `GetOptions`. // `placeholderData` function does not have a parameter -type CreateQueryOptionsForCreateQueries< +type UseQueryOptionsForUseQueries< TQueryFnData = unknown, TError = DefaultError, TData = TQueryFnData, @@ -43,7 +43,7 @@ type CreateQueryOptionsForCreateQueries< placeholderData?: TQueryFnData | QueriesPlaceholderDataFunction /** * @deprecated The `suspense` option has been deprecated in v5 and will be removed in the next major version. - * The `data` property on createQueries is a plain object and not a SolidJS Resource. + * The `data` property on useQueries is a plain object and not a SolidJS Resource. * It will not suspend when the data is loading. * Setting `suspense` to `true` will be a no-op. */ @@ -63,18 +63,18 @@ type GetOptions = error?: infer TError data: infer TData } - ? CreateQueryOptionsForCreateQueries + ? UseQueryOptionsForUseQueries : T extends { queryFnData: infer TQueryFnData; error?: infer TError } - ? CreateQueryOptionsForCreateQueries + ? UseQueryOptionsForUseQueries : T extends { data: infer TData; error?: infer TError } - ? CreateQueryOptionsForCreateQueries + ? UseQueryOptionsForUseQueries : // Part 2: responsible for applying explicit type parameter to function arguments, if tuple [TQueryFnData, TError, TData] T extends [infer TQueryFnData, infer TError, infer TData] - ? CreateQueryOptionsForCreateQueries + ? UseQueryOptionsForUseQueries : T extends [infer TQueryFnData, infer TError] - ? CreateQueryOptionsForCreateQueries + ? UseQueryOptionsForUseQueries : T extends [infer TQueryFnData] - ? CreateQueryOptionsForCreateQueries + ? UseQueryOptionsForUseQueries : // Part 3: responsible for inferring and enforcing type if no explicit parameter was provided T extends { queryFn?: @@ -83,30 +83,30 @@ type GetOptions = select?: (data: any) => infer TData throwOnError?: ThrowOnError } - ? CreateQueryOptionsForCreateQueries< + ? UseQueryOptionsForUseQueries< TQueryFnData, unknown extends TError ? DefaultError : TError, unknown extends TData ? TQueryFnData : TData, TQueryKey > : // Fallback - CreateQueryOptionsForCreateQueries + UseQueryOptionsForUseQueries type GetResults = // Part 1: responsible for mapping explicit type parameter to function result, if object T extends { queryFnData: any; error?: infer TError; data: infer TData } - ? CreateQueryResult + ? UseQueryResult : T extends { queryFnData: infer TQueryFnData; error?: infer TError } - ? CreateQueryResult + ? UseQueryResult : T extends { data: infer TData; error?: infer TError } - ? CreateQueryResult + ? UseQueryResult : // Part 2: responsible for mapping explicit type parameter to function result, if tuple T extends [any, infer TError, infer TData] - ? CreateQueryResult + ? UseQueryResult : T extends [infer TQueryFnData, infer TError] - ? CreateQueryResult + ? UseQueryResult : T extends [infer TQueryFnData] - ? CreateQueryResult + ? UseQueryResult : // Part 3: responsible for mapping inferred type to results, if no explicit parameter was provided T extends { queryFn?: @@ -115,12 +115,12 @@ type GetResults = select?: (data: any) => infer TData throwOnError?: ThrowOnError } - ? CreateQueryResult< + ? UseQueryResult< unknown extends TData ? TQueryFnData : TData, unknown extends TError ? DefaultError : TError > : // Fallback - CreateQueryResult + UseQueryResult /** * QueriesOptions reducer recursively unwraps function arguments to infer/enforce type param @@ -130,7 +130,7 @@ type QueriesOptions< TResult extends Array = [], TDepth extends ReadonlyArray = [], > = TDepth['length'] extends MAXIMUM_DEPTH - ? Array + ? Array : T extends [] ? [] : T extends [infer Head] @@ -146,7 +146,7 @@ type QueriesOptions< : // If T is *some* array but we couldn't assign unknown[] to it, then it must hold some known/homogenous type! // use this to infer the param types in the case of Array.map() argument T extends Array< - CreateQueryOptionsForCreateQueries< + UseQueryOptionsForUseQueries< infer TQueryFnData, infer TError, infer TData, @@ -154,7 +154,7 @@ type QueriesOptions< > > ? Array< - CreateQueryOptionsForCreateQueries< + UseQueryOptionsForUseQueries< TQueryFnData, TError, TData, @@ -162,7 +162,7 @@ type QueriesOptions< > > : // Fallback - Array + Array /** * QueriesResults reducer recursively maps type param to results @@ -172,7 +172,7 @@ type QueriesResults< TResult extends Array = [], TDepth extends ReadonlyArray = [], > = TDepth['length'] extends MAXIMUM_DEPTH - ? Array + ? Array : T extends [] ? [] : T extends [infer Head] @@ -185,7 +185,7 @@ type QueriesResults< > : { [K in keyof T]: GetResults } -export function createQueries< +export function useQueries< T extends Array, TCombinedResult extends QueriesResults = QueriesResults, >( diff --git a/packages/solid-query/src/createQuery.ts b/packages/solid-query/src/useQuery.ts similarity index 73% rename from packages/solid-query/src/createQuery.ts rename to packages/solid-query/src/useQuery.ts index 46609cbffb..e8efb4796a 100644 --- a/packages/solid-query/src/createQuery.ts +++ b/packages/solid-query/src/useQuery.ts @@ -1,20 +1,20 @@ import { QueryObserver } from '@tanstack/query-core' import { createMemo } from 'solid-js' -import { createBaseQuery } from './createBaseQuery' +import { useBaseQuery } from './useBaseQuery' import type { DefaultError, QueryKey } from '@tanstack/query-core' import type { QueryClient } from './QueryClient' import type { Accessor } from 'solid-js' import type { - CreateQueryOptions, - CreateQueryResult, - DefinedCreateQueryResult, + DefinedUseQueryResult, + UseQueryOptions, + UseQueryResult, } from './types' import type { DefinedInitialDataOptions, UndefinedInitialDataOptions, } from './queryOptions' -export function createQuery< +export function useQuery< TQueryFnData = unknown, TError = DefaultError, TData = TQueryFnData, @@ -22,9 +22,9 @@ export function createQuery< >( options: UndefinedInitialDataOptions, queryClient?: () => QueryClient, -): CreateQueryResult +): UseQueryResult -export function createQuery< +export function useQuery< TQueryFnData = unknown, TError = DefaultError, TData = TQueryFnData, @@ -32,17 +32,17 @@ export function createQuery< >( options: DefinedInitialDataOptions, queryClient?: () => QueryClient, -): DefinedCreateQueryResult -export function createQuery< +): DefinedUseQueryResult +export function useQuery< TQueryFnData, TError = DefaultError, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey, >( - options: CreateQueryOptions, + options: UseQueryOptions, queryClient?: Accessor, ) { - return createBaseQuery( + return useBaseQuery( createMemo(() => options()), QueryObserver, queryClient,