diff --git a/packages/react-query/src/__tests__/infiniteQueryOptions.test-d.tsx b/packages/react-query/src/__tests__/infiniteQueryOptions.test-d.tsx index 01e1cca41b..aaa38f4aa3 100644 --- a/packages/react-query/src/__tests__/infiniteQueryOptions.test-d.tsx +++ b/packages/react-query/src/__tests__/infiniteQueryOptions.test-d.tsx @@ -1,5 +1,6 @@ import { assertType, describe, expectTypeOf, it, test } from 'vitest' import { QueryClient, dataTagSymbol, skipToken } from '@tanstack/query-core' +import { queryKey } from '@tanstack/query-test-utils' import { infiniteQueryOptions } from '../infiniteQueryOptions' import { useInfiniteQuery } from '../useInfiniteQuery' import { useSuspenseInfiniteQuery } from '../useSuspenseInfiniteQuery' @@ -14,7 +15,7 @@ describe('infiniteQueryOptions', () => { it('should not allow excess properties', () => { assertType( infiniteQueryOptions({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve('data'), getNextPageParam: () => 1, initialPageParam: 1, @@ -25,7 +26,7 @@ describe('infiniteQueryOptions', () => { }) it('should infer types for callbacks', () => { infiniteQueryOptions({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve('data'), staleTime: 1000, getNextPageParam: () => 1, @@ -37,7 +38,7 @@ describe('infiniteQueryOptions', () => { }) it('should work when passed to useInfiniteQuery', () => { const options = infiniteQueryOptions({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve('string'), getNextPageParam: () => 1, initialPageParam: 1, @@ -52,7 +53,7 @@ describe('infiniteQueryOptions', () => { }) it('should work when passed to useSuspenseInfiniteQuery', () => { const options = infiniteQueryOptions({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve('string'), getNextPageParam: () => 1, initialPageParam: 1, @@ -64,7 +65,7 @@ describe('infiniteQueryOptions', () => { }) it('should work when passed to fetchInfiniteQuery', async () => { const options = infiniteQueryOptions({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve('string'), getNextPageParam: () => 1, initialPageParam: 1, @@ -75,61 +76,61 @@ describe('infiniteQueryOptions', () => { expectTypeOf(data).toEqualTypeOf>() }) it('should tag the queryKey with the result type of the QueryFn', () => { - const { queryKey } = infiniteQueryOptions({ - queryKey: ['key'], + const { queryKey: tagged } = infiniteQueryOptions({ + queryKey: queryKey(), queryFn: () => Promise.resolve('string'), getNextPageParam: () => 1, initialPageParam: 1, }) - expectTypeOf(queryKey[dataTagSymbol]).toEqualTypeOf>() + expectTypeOf(tagged[dataTagSymbol]).toEqualTypeOf>() }) it('should tag the queryKey even if no promise is returned', () => { - const { queryKey } = infiniteQueryOptions({ - queryKey: ['key'], + const { queryKey: tagged } = infiniteQueryOptions({ + queryKey: queryKey(), queryFn: () => 'string', getNextPageParam: () => 1, initialPageParam: 1, }) - expectTypeOf(queryKey[dataTagSymbol]).toEqualTypeOf>() + expectTypeOf(tagged[dataTagSymbol]).toEqualTypeOf>() }) it('should tag the queryKey with the result type of the QueryFn if select is used', () => { - const { queryKey } = infiniteQueryOptions({ - queryKey: ['key'], + const { queryKey: tagged } = infiniteQueryOptions({ + queryKey: queryKey(), queryFn: () => Promise.resolve('string'), select: (data) => data.pages, getNextPageParam: () => 1, initialPageParam: 1, }) - expectTypeOf(queryKey[dataTagSymbol]).toEqualTypeOf>() + expectTypeOf(tagged[dataTagSymbol]).toEqualTypeOf>() }) it('should return the proper type when passed to getQueryData', () => { - const { queryKey } = infiniteQueryOptions({ - queryKey: ['key'], + const { queryKey: tagged } = infiniteQueryOptions({ + queryKey: queryKey(), queryFn: () => Promise.resolve('string'), getNextPageParam: () => 1, initialPageParam: 1, }) const queryClient = new QueryClient() - const data = queryClient.getQueryData(queryKey) + const data = queryClient.getQueryData(tagged) expectTypeOf(data).toEqualTypeOf< InfiniteData | undefined >() }) it('should properly type when passed to setQueryData', () => { - const { queryKey } = infiniteQueryOptions({ - queryKey: ['key'], + const { queryKey: tagged } = infiniteQueryOptions({ + queryKey: queryKey(), queryFn: () => Promise.resolve('string'), getNextPageParam: () => 1, initialPageParam: 1, }) const queryClient = new QueryClient() - const data = queryClient.setQueryData(queryKey, (prev) => { + const data = queryClient.setQueryData(tagged, (prev) => { expectTypeOf(prev).toEqualTypeOf< InfiniteData | undefined >() @@ -142,7 +143,7 @@ describe('infiniteQueryOptions', () => { }) it('should throw a type error when using queryFn with skipToken in a suspense query', () => { const options = infiniteQueryOptions({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: Math.random() > 0.5 ? skipToken : () => Promise.resolve('string'), getNextPageParam: () => 1, @@ -156,7 +157,7 @@ describe('infiniteQueryOptions', () => { test('should not be allowed to be passed to non-infinite query functions', () => { const queryClient = new QueryClient() const options = infiniteQueryOptions({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve('string'), getNextPageParam: () => 1, initialPageParam: 1, @@ -182,7 +183,7 @@ describe('infiniteQueryOptions', () => { test('allow optional initialData function', () => { const initialData: { example: boolean } | undefined = { example: true } const queryOptions = infiniteQueryOptions({ - queryKey: ['example'], + queryKey: queryKey(), queryFn: () => initialData, initialData: initialData ? () => ({ pages: [initialData], pageParams: [] }) @@ -200,7 +201,7 @@ describe('infiniteQueryOptions', () => { test('allow optional initialData object', () => { const initialData: { example: boolean } | undefined = { example: true } const queryOptions = infiniteQueryOptions({ - queryKey: ['example'], + queryKey: queryKey(), queryFn: () => initialData, initialData: initialData ? { pages: [initialData], pageParams: [] } diff --git a/packages/react-query/src/__tests__/infiniteQueryOptions.test.tsx b/packages/react-query/src/__tests__/infiniteQueryOptions.test.tsx index 88017ced53..d48fd50437 100644 --- a/packages/react-query/src/__tests__/infiniteQueryOptions.test.tsx +++ b/packages/react-query/src/__tests__/infiniteQueryOptions.test.tsx @@ -1,4 +1,5 @@ import { describe, expect, it } from 'vitest' +import { queryKey } from '@tanstack/query-test-utils' import { infiniteQueryOptions } from '../infiniteQueryOptions' import type { UseInfiniteQueryOptions } from '../types' @@ -6,7 +7,7 @@ import type { UseInfiniteQueryOptions } from '../types' describe('infiniteQueryOptions', () => { it('should return the object received as a parameter without any modification.', () => { const object: UseInfiniteQueryOptions = { - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(5), getNextPageParam: () => null, initialPageParam: null, diff --git a/packages/react-query/src/__tests__/mutationOptions.test-d.tsx b/packages/react-query/src/__tests__/mutationOptions.test-d.tsx index 2988426d65..5163fb210c 100644 --- a/packages/react-query/src/__tests__/mutationOptions.test-d.tsx +++ b/packages/react-query/src/__tests__/mutationOptions.test-d.tsx @@ -1,5 +1,6 @@ import { assertType, describe, expectTypeOf, it } from 'vitest' import { QueryClient } from '@tanstack/query-core' +import { queryKey } from '@tanstack/query-test-utils' import { useIsMutating, useMutation, useMutationState } from '..' import { mutationOptions } from '../mutationOptions' import type { @@ -15,7 +16,7 @@ describe('mutationOptions', () => { // @ts-expect-error this is a good error, because onMutates does not exist! mutationOptions({ mutationFn: () => Promise.resolve(5), - mutationKey: ['key'], + mutationKey: queryKey(), onMutates: 1000, onSuccess: (data) => { expectTypeOf(data).toEqualTypeOf() @@ -26,7 +27,7 @@ describe('mutationOptions', () => { it('should infer types for callbacks', () => { mutationOptions({ mutationFn: () => Promise.resolve(5), - mutationKey: ['key'], + mutationKey: queryKey(), onSuccess: (data) => { expectTypeOf(data).toEqualTypeOf() }, @@ -38,7 +39,7 @@ describe('mutationOptions', () => { mutationFn: () => { throw new Error('fail') }, - mutationKey: ['key'], + mutationKey: queryKey(), onError: (error) => { expectTypeOf(error).toEqualTypeOf() }, @@ -51,14 +52,14 @@ describe('mutationOptions', () => { expectTypeOf(vars).toEqualTypeOf<{ id: string }>() return Promise.resolve(5) }, - mutationKey: ['with-vars'], + mutationKey: queryKey(), }) }) it('should infer result type correctly', () => { mutationOptions({ mutationFn: () => Promise.resolve(5), - mutationKey: ['key'], + mutationKey: queryKey(), onMutate: () => { return { name: 'onMutateResult' } }, @@ -74,7 +75,7 @@ describe('mutationOptions', () => { expectTypeOf(context).toEqualTypeOf() return Promise.resolve(5) }, - mutationKey: ['key'], + mutationKey: queryKey(), onMutate: (_variables, context) => { expectTypeOf(context).toEqualTypeOf() }, @@ -112,7 +113,7 @@ describe('mutationOptions', () => { expectTypeOf( mutationOptions({ mutationFn: (id: string) => Promise.resolve(id.length), - mutationKey: ['key'], + mutationKey: queryKey(), onSuccess: (data) => { expectTypeOf(data).toEqualTypeOf() }, @@ -138,7 +139,7 @@ describe('mutationOptions', () => { it('should infer types when used with useMutation', () => { const mutation = useMutation( mutationOptions({ - mutationKey: ['key'], + mutationKey: queryKey(), mutationFn: () => Promise.resolve('data'), onSuccess: (data) => { expectTypeOf(data).toEqualTypeOf() @@ -163,7 +164,7 @@ describe('mutationOptions', () => { it('should infer types when used with useIsMutating', () => { const isMutating = useIsMutating( mutationOptions({ - mutationKey: ['key'], + mutationKey: queryKey(), mutationFn: () => Promise.resolve(5), }), ) @@ -182,7 +183,7 @@ describe('mutationOptions', () => { const isMutating = queryClient.isMutating( mutationOptions({ - mutationKey: ['key'], + mutationKey: queryKey(), mutationFn: () => Promise.resolve(5), }), ) @@ -199,7 +200,7 @@ describe('mutationOptions', () => { it('should infer types when used with useMutationState', () => { const mutationState = useMutationState({ filters: mutationOptions({ - mutationKey: ['key'], + mutationKey: queryKey(), mutationFn: () => Promise.resolve(5), }), }) diff --git a/packages/react-query/src/__tests__/mutationOptions.test.tsx b/packages/react-query/src/__tests__/mutationOptions.test.tsx index 0e43a14959..45129a398d 100644 --- a/packages/react-query/src/__tests__/mutationOptions.test.tsx +++ b/packages/react-query/src/__tests__/mutationOptions.test.tsx @@ -1,6 +1,6 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' import { QueryClient } from '@tanstack/query-core' -import { sleep } from '@tanstack/query-test-utils' +import { queryKey, sleep } from '@tanstack/query-test-utils' import { fireEvent } from '@testing-library/react' import { mutationOptions } from '../mutationOptions' import { useIsMutating, useMutation, useMutationState } from '..' @@ -38,7 +38,7 @@ describe('mutationOptions', () => { const isMutatingArray: Array = [] const queryClient = new QueryClient() const mutationOpts = mutationOptions({ - mutationKey: ['key'], + mutationKey: queryKey(), mutationFn: () => sleep(50).then(() => 'data'), }) @@ -129,7 +129,7 @@ describe('mutationOptions', () => { const isMutatingArray: Array = [] const queryClient = new QueryClient() const mutationOpts1 = mutationOptions({ - mutationKey: ['key'], + mutationKey: queryKey(), mutationFn: () => sleep(50).then(() => 'data1'), }) const mutationOpts2 = mutationOptions({ @@ -181,7 +181,7 @@ describe('mutationOptions', () => { const isMutatingArray: Array = [] const queryClient = new QueryClient() const mutationOpts1 = mutationOptions({ - mutationKey: ['key'], + mutationKey: queryKey(), mutationFn: () => sleep(50).then(() => 'data1'), }) const mutationOpts2 = mutationOptions({ @@ -235,7 +235,7 @@ describe('mutationOptions', () => { const isMutatingArray: Array = [] const queryClient = new QueryClient() const mutationOpts = mutationOptions({ - mutationKey: ['mutation'], + mutationKey: queryKey(), mutationFn: () => sleep(500).then(() => 'data'), }) @@ -298,7 +298,7 @@ describe('mutationOptions', () => { const isMutatingArray: Array = [] const queryClient = new QueryClient() const mutationOpts1 = mutationOptions({ - mutationKey: ['mutation'], + mutationKey: queryKey(), mutationFn: () => sleep(500).then(() => 'data1'), }) const mutationOpts2 = mutationOptions({ @@ -336,7 +336,7 @@ describe('mutationOptions', () => { const isMutatingArray: Array = [] const queryClient = new QueryClient() const mutationOpts1 = mutationOptions({ - mutationKey: ['mutation'], + mutationKey: queryKey(), mutationFn: () => sleep(500).then(() => 'data1'), }) const mutationOpts2 = mutationOptions({ @@ -378,7 +378,7 @@ describe('mutationOptions', () => { > = [] const queryClient = new QueryClient() const mutationOpts = mutationOptions({ - mutationKey: ['mutation'], + mutationKey: queryKey(), mutationFn: () => sleep(10).then(() => 'data'), }) @@ -447,7 +447,7 @@ describe('mutationOptions', () => { > = [] const queryClient = new QueryClient() const mutationOpts1 = mutationOptions({ - mutationKey: ['mutation'], + mutationKey: queryKey(), mutationFn: () => sleep(10).then(() => 'data1'), }) const mutationOpts2 = mutationOptions({ @@ -489,7 +489,7 @@ describe('mutationOptions', () => { > = [] const queryClient = new QueryClient() const mutationOpts1 = mutationOptions({ - mutationKey: ['mutation'], + mutationKey: queryKey(), mutationFn: () => sleep(10).then(() => 'data1'), }) const mutationOpts2 = mutationOptions({ diff --git a/packages/react-query/src/__tests__/queryOptions.test-d.tsx b/packages/react-query/src/__tests__/queryOptions.test-d.tsx index b9c8602b5e..dcfaeab658 100644 --- a/packages/react-query/src/__tests__/queryOptions.test-d.tsx +++ b/packages/react-query/src/__tests__/queryOptions.test-d.tsx @@ -5,6 +5,7 @@ import { dataTagSymbol, skipToken, } from '@tanstack/query-core' +import { queryKey } from '@tanstack/query-test-utils' import { queryOptions } from '../queryOptions' import { useQuery } from '../useQuery' import { useQueries } from '../useQueries' @@ -20,7 +21,7 @@ describe('queryOptions', () => { it('should not allow excess properties', () => { assertType( queryOptions({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(5), // @ts-expect-error this is a good error, because stallTime does not exist! stallTime: 1000, @@ -29,7 +30,7 @@ describe('queryOptions', () => { }) it('should infer types for callbacks', () => { queryOptions({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(5), staleTime: 1000, select: (data) => { @@ -39,7 +40,7 @@ describe('queryOptions', () => { }) it('should work when passed to useQuery', () => { const options = queryOptions({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(5), }) @@ -48,7 +49,7 @@ describe('queryOptions', () => { }) it('should work when passed to useSuspenseQuery', () => { const options = queryOptions({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(5), }) @@ -58,7 +59,7 @@ describe('queryOptions', () => { it('should work when passed to fetchQuery', async () => { const options = queryOptions({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(5), }) @@ -67,7 +68,7 @@ describe('queryOptions', () => { }) it('should work when passed to useQueries', () => { const options = queryOptions({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(5), }) @@ -78,90 +79,90 @@ describe('queryOptions', () => { expectTypeOf(data).toEqualTypeOf() }) it('should tag the queryKey with the result type of the QueryFn', () => { - const { queryKey } = queryOptions({ - queryKey: ['key'], + const { queryKey: tagged } = queryOptions({ + queryKey: queryKey(), queryFn: () => Promise.resolve(5), }) - expectTypeOf(queryKey[dataTagSymbol]).toEqualTypeOf() + expectTypeOf(tagged[dataTagSymbol]).toEqualTypeOf() }) it('should tag the queryKey even if no promise is returned', () => { - const { queryKey } = queryOptions({ - queryKey: ['key'], + const { queryKey: tagged } = queryOptions({ + queryKey: queryKey(), queryFn: () => 5, }) - expectTypeOf(queryKey[dataTagSymbol]).toEqualTypeOf() + expectTypeOf(tagged[dataTagSymbol]).toEqualTypeOf() }) it('should tag the queryKey with unknown if there is no queryFn', () => { - const { queryKey } = queryOptions({ - queryKey: ['key'], + const { queryKey: tagged } = queryOptions({ + queryKey: queryKey(), }) - expectTypeOf(queryKey[dataTagSymbol]).toEqualTypeOf() + expectTypeOf(tagged[dataTagSymbol]).toEqualTypeOf() }) it('should tag the queryKey with the result type of the QueryFn if select is used', () => { - const { queryKey } = queryOptions({ - queryKey: ['key'], + const { queryKey: tagged } = queryOptions({ + queryKey: queryKey(), queryFn: () => Promise.resolve(5), select: (data) => data.toString(), }) - expectTypeOf(queryKey[dataTagSymbol]).toEqualTypeOf() + expectTypeOf(tagged[dataTagSymbol]).toEqualTypeOf() }) it('should return the proper type when passed to getQueryData', () => { - const { queryKey } = queryOptions({ - queryKey: ['key'], + const { queryKey: tagged } = queryOptions({ + queryKey: queryKey(), queryFn: () => Promise.resolve(5), }) const queryClient = new QueryClient() - const data = queryClient.getQueryData(queryKey) + const data = queryClient.getQueryData(tagged) expectTypeOf(data).toEqualTypeOf() }) it('should return the proper type when passed to getQueryState', () => { - const { queryKey } = queryOptions({ - queryKey: ['key'], + const { queryKey: tagged } = queryOptions({ + queryKey: queryKey(), queryFn: () => Promise.resolve(5), }) const queryClient = new QueryClient() - const state = queryClient.getQueryState(queryKey) + const state = queryClient.getQueryState(tagged) expectTypeOf(state?.data).toEqualTypeOf() }) it('should properly type updaterFn when passed to setQueryData', () => { - const { queryKey } = queryOptions({ - queryKey: ['key'], + const { queryKey: tagged } = queryOptions({ + queryKey: queryKey(), queryFn: () => Promise.resolve(5), }) const queryClient = new QueryClient() - const data = queryClient.setQueryData(queryKey, (prev) => { + const data = queryClient.setQueryData(tagged, (prev) => { expectTypeOf(prev).toEqualTypeOf() return prev }) expectTypeOf(data).toEqualTypeOf() }) it('should properly type value when passed to setQueryData', () => { - const { queryKey } = queryOptions({ - queryKey: ['key'], + const { queryKey: tagged } = queryOptions({ + queryKey: queryKey(), queryFn: () => Promise.resolve(5), }) const queryClient = new QueryClient() // @ts-expect-error value should be a number - queryClient.setQueryData(queryKey, '5') + queryClient.setQueryData(tagged, '5') // @ts-expect-error value should be a number - queryClient.setQueryData(queryKey, () => '5') + queryClient.setQueryData(tagged, () => '5') - const data = queryClient.setQueryData(queryKey, 5) + const data = queryClient.setQueryData(tagged, 5) expectTypeOf(data).toEqualTypeOf() }) it('should infer even if there is a conditional skipToken', () => { const options = queryOptions({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: Math.random() > 0.5 ? skipToken : () => Promise.resolve(5), }) @@ -172,7 +173,7 @@ describe('queryOptions', () => { it('should infer to unknown if we disable a query with just a skipToken', () => { const options = queryOptions({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: skipToken, }) @@ -183,7 +184,7 @@ describe('queryOptions', () => { it('should throw a type error when using queryFn with skipToken in a suspense query', () => { const options = queryOptions({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: Math.random() > 0.5 ? skipToken : () => Promise.resolve(5), }) // @ts-expect-error TS2345 @@ -193,7 +194,7 @@ describe('queryOptions', () => { it('should return the proper type when passed to QueriesObserver', () => { const options = queryOptions({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(5), }) @@ -227,7 +228,7 @@ describe('queryOptions', () => { it('should allow optional initialData object', () => { const testFn = (id?: string) => { const options = queryOptions({ - queryKey: ['test'], + queryKey: queryKey(), queryFn: () => Promise.resolve('something string'), initialData: id ? 'initial string' : undefined, }) @@ -247,7 +248,7 @@ describe('queryOptions', () => { } const options = queryOptions({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(1), }) diff --git a/packages/react-query/src/__tests__/ssr-hydration.test.tsx b/packages/react-query/src/__tests__/ssr-hydration.test.tsx index 07f469b568..587726b362 100644 --- a/packages/react-query/src/__tests__/ssr-hydration.test.tsx +++ b/packages/react-query/src/__tests__/ssr-hydration.test.tsx @@ -2,6 +2,7 @@ import { afterAll, beforeAll, describe, expect, it, vi } from 'vitest' import { hydrateRoot } from 'react-dom/client' import { act } from 'react' import * as ReactDOMServer from 'react-dom/server' +import { queryKey } from '@tanstack/query-test-utils' import { QueryCache, QueryClient, @@ -50,11 +51,12 @@ describe('Server side rendering with de/rehydration', () => { consoleMock.mockImplementation(() => undefined) const fetchDataSuccess = vi.fn(fetchData) + const key = queryKey() // -- Shared part -- function SuccessComponent() { const result = useQuery({ - queryKey: ['success'], + queryKey: key, queryFn: () => fetchDataSuccess('success!'), }) return ( @@ -70,7 +72,7 @@ describe('Server side rendering with de/rehydration', () => { queryCache: prefetchCache, }) await prefetchClient.prefetchQuery({ - queryKey: ['success'], + queryKey: key, queryFn: () => fetchDataSuccess('success'), }) const dehydratedStateServer = dehydrate(prefetchClient) @@ -127,11 +129,12 @@ describe('Server side rendering with de/rehydration', () => { const fetchDataError = vi.fn(() => { throw new Error('fetchDataError') }) + const key = queryKey() // -- Shared part -- function ErrorComponent() { const result = useQuery({ - queryKey: ['error'], + queryKey: key, queryFn: () => fetchDataError(), retry: false, }) @@ -147,7 +150,7 @@ describe('Server side rendering with de/rehydration', () => { queryCache: prefetchCache, }) await prefetchClient.prefetchQuery({ - queryKey: ['error'], + queryKey: key, queryFn: () => fetchDataError(), }) const dehydratedStateServer = dehydrate(prefetchClient) @@ -204,11 +207,12 @@ describe('Server side rendering with de/rehydration', () => { consoleMock.mockImplementation(() => undefined) const fetchDataSuccess = vi.fn(fetchData) + const key = queryKey() // -- Shared part -- function SuccessComponent() { const result = useQuery({ - queryKey: ['success'], + queryKey: key, queryFn: () => fetchDataSuccess('success!'), }) return ( diff --git a/packages/react-query/src/__tests__/suspense.test.tsx b/packages/react-query/src/__tests__/suspense.test.tsx index 99e9ff7fe9..2290cd2104 100644 --- a/packages/react-query/src/__tests__/suspense.test.tsx +++ b/packages/react-query/src/__tests__/suspense.test.tsx @@ -57,7 +57,7 @@ describe('Suspense Timer Tests', () => { it('should enforce minimum staleTime of 1000ms when using suspense with number', async () => { const TestComponent = createTestQuery({ fetchCount, - queryKey: ['test'], + queryKey: queryKey(), staleTime: 10, }) @@ -83,7 +83,7 @@ describe('Suspense Timer Tests', () => { it('should enforce minimum staleTime of 1000ms when using suspense with function', async () => { const TestComponent = createTestQuery({ fetchCount, - queryKey: ['test-func'], + queryKey: queryKey(), staleTime: () => 10, }) diff --git a/packages/react-query/src/__tests__/useInfiniteQuery.test-d.tsx b/packages/react-query/src/__tests__/useInfiniteQuery.test-d.tsx index a231d20600..b4784aa4b0 100644 --- a/packages/react-query/src/__tests__/useInfiniteQuery.test-d.tsx +++ b/packages/react-query/src/__tests__/useInfiniteQuery.test-d.tsx @@ -1,12 +1,13 @@ import { describe, expectTypeOf, it } from 'vitest' import { QueryClient } from '@tanstack/query-core' +import { queryKey } from '@tanstack/query-test-utils' import { useInfiniteQuery } from '../useInfiniteQuery' import type { InfiniteData } from '@tanstack/query-core' describe('pageParam', () => { it('initialPageParam should define type of param passed to queryFunctionContext', () => { useInfiniteQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: ({ pageParam }) => { expectTypeOf(pageParam).toEqualTypeOf() }, @@ -17,7 +18,7 @@ describe('pageParam', () => { it('direction should be passed to queryFn of useInfiniteQuery', () => { useInfiniteQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: ({ direction }) => { expectTypeOf(direction).toEqualTypeOf<'forward' | 'backward'>() }, @@ -29,7 +30,7 @@ describe('pageParam', () => { it('initialPageParam should define type of param passed to queryFunctionContext for fetchInfiniteQuery', () => { const queryClient = new QueryClient() queryClient.fetchInfiniteQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: ({ pageParam }) => { expectTypeOf(pageParam).toEqualTypeOf() }, @@ -40,7 +41,7 @@ describe('pageParam', () => { it('initialPageParam should define type of param passed to queryFunctionContext for prefetchInfiniteQuery', () => { const queryClient = new QueryClient() queryClient.prefetchInfiniteQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: ({ pageParam }) => { expectTypeOf(pageParam).toEqualTypeOf() }, @@ -51,7 +52,7 @@ describe('pageParam', () => { describe('select', () => { it('should still return paginated data if no select result', () => { const infiniteQuery = useInfiniteQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: ({ pageParam }) => { return pageParam * 5 }, @@ -67,7 +68,7 @@ describe('select', () => { it('should be able to transform data to arbitrary result', () => { const infiniteQuery = useInfiniteQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: ({ pageParam }) => { return pageParam * 5 }, @@ -85,7 +86,7 @@ describe('select', () => { describe('getNextPageParam / getPreviousPageParam', () => { it('should get typed params', () => { const infiniteQuery = useInfiniteQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: ({ pageParam }) => { return String(pageParam) }, @@ -126,7 +127,7 @@ describe('error booleans', () => { isLoadingError, isRefetchError, } = useInfiniteQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: ({ pageParam }) => { return pageParam * 5 }, diff --git a/packages/react-query/src/__tests__/useMutationState.test.tsx b/packages/react-query/src/__tests__/useMutationState.test.tsx index e80b9c10f9..69bd972090 100644 --- a/packages/react-query/src/__tests__/useMutationState.test.tsx +++ b/packages/react-query/src/__tests__/useMutationState.test.tsx @@ -1,7 +1,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' import { fireEvent, render } from '@testing-library/react' import * as React from 'react' -import { sleep } from '@tanstack/query-test-utils' +import { queryKey, sleep } from '@tanstack/query-test-utils' import { QueryClient, useIsMutating, useMutation, useMutationState } from '..' import { renderWithClient } from './utils' @@ -17,6 +17,8 @@ describe('useIsMutating', () => { it('should return the number of fetching mutations', async () => { const isMutatingArray: Array = [] const queryClient = new QueryClient() + const key1 = queryKey() + const key2 = queryKey() function IsMutating() { const isMutating = useIsMutating() @@ -28,11 +30,11 @@ describe('useIsMutating', () => { function Mutations() { const { mutate: mutate1 } = useMutation({ - mutationKey: ['mutation1'], + mutationKey: key1, mutationFn: () => sleep(50).then(() => 'data'), }) const { mutate: mutate2 } = useMutation({ - mutationKey: ['mutation2'], + mutationKey: key2, mutationFn: () => sleep(10).then(() => 'data'), }) @@ -78,20 +80,22 @@ describe('useIsMutating', () => { it('should filter correctly by mutationKey', async () => { const isMutatingArray: Array = [] const queryClient = new QueryClient() + const key1 = queryKey() + const key2 = queryKey() function IsMutating() { - const isMutating = useIsMutating({ mutationKey: ['mutation1'] }) + const isMutating = useIsMutating({ mutationKey: key1 }) isMutatingArray.push(isMutating) return null } function Page() { const { mutate: mutate1 } = useMutation({ - mutationKey: ['mutation1'], + mutationKey: key1, mutationFn: () => sleep(100).then(() => 'data'), }) const { mutate: mutate2 } = useMutation({ - mutationKey: ['mutation2'], + mutationKey: key2, mutationFn: () => sleep(100).then(() => 'data'), }) @@ -112,11 +116,12 @@ describe('useIsMutating', () => { it('should filter correctly by predicate', async () => { const isMutatingArray: Array = [] const queryClient = new QueryClient() + const key1 = queryKey() + const key2 = queryKey() function IsMutating() { const isMutating = useIsMutating({ - predicate: (mutation) => - mutation.options.mutationKey?.[0] === 'mutation1', + predicate: (mutation) => mutation.options.mutationKey?.[0] === key1[0], }) isMutatingArray.push(isMutating) return null @@ -124,11 +129,11 @@ describe('useIsMutating', () => { function Page() { const { mutate: mutate1 } = useMutation({ - mutationKey: ['mutation1'], + mutationKey: key1, mutationFn: () => sleep(100).then(() => 'data'), }) const { mutate: mutate2 } = useMutation({ - mutationKey: ['mutation2'], + mutationKey: key2, mutationFn: () => sleep(100).then(() => 'data'), }) @@ -148,12 +153,13 @@ describe('useIsMutating', () => { it('should use provided custom queryClient', async () => { const queryClient = new QueryClient() + const key = queryKey() function Page() { const isMutating = useIsMutating({}, queryClient) const { mutate } = useMutation( { - mutationKey: ['mutation1'], + mutationKey: key, mutationFn: () => sleep(10).then(() => 'data'), }, queryClient, diff --git a/packages/react-query/src/__tests__/usePrefetchInfiniteQuery.test-d.tsx b/packages/react-query/src/__tests__/usePrefetchInfiniteQuery.test-d.tsx index 03af450c93..231c47cedb 100644 --- a/packages/react-query/src/__tests__/usePrefetchInfiniteQuery.test-d.tsx +++ b/packages/react-query/src/__tests__/usePrefetchInfiniteQuery.test-d.tsx @@ -1,10 +1,11 @@ import { assertType, describe, expectTypeOf, it } from 'vitest' +import { queryKey } from '@tanstack/query-test-utils' import { usePrefetchInfiniteQuery } from '..' describe('usePrefetchInfiniteQuery', () => { it('should return nothing', () => { const result = usePrefetchInfiniteQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(5), initialPageParam: 1, getNextPageParam: () => 1, @@ -17,7 +18,7 @@ describe('usePrefetchInfiniteQuery', () => { assertType( // @ts-expect-error TS2345 usePrefetchInfiniteQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(5), }), ) @@ -26,7 +27,7 @@ describe('usePrefetchInfiniteQuery', () => { it('should not allow refetchInterval, enabled or throwOnError options', () => { assertType( usePrefetchInfiniteQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(5), initialPageParam: 1, getNextPageParam: () => 1, @@ -37,7 +38,7 @@ describe('usePrefetchInfiniteQuery', () => { assertType( usePrefetchInfiniteQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(5), initialPageParam: 1, getNextPageParam: () => 1, @@ -48,7 +49,7 @@ describe('usePrefetchInfiniteQuery', () => { assertType( usePrefetchInfiniteQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(5), initialPageParam: 1, getNextPageParam: () => 1, diff --git a/packages/react-query/src/__tests__/usePrefetchQuery.test-d.tsx b/packages/react-query/src/__tests__/usePrefetchQuery.test-d.tsx index 09dbaf18c1..d5c1d7c235 100644 --- a/packages/react-query/src/__tests__/usePrefetchQuery.test-d.tsx +++ b/packages/react-query/src/__tests__/usePrefetchQuery.test-d.tsx @@ -1,10 +1,11 @@ import { assertType, describe, expectTypeOf, it } from 'vitest' +import { queryKey } from '@tanstack/query-test-utils' import { skipToken, usePrefetchQuery } from '..' describe('usePrefetchQuery', () => { it('should return nothing', () => { const result = usePrefetchQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(5), }) @@ -14,7 +15,7 @@ describe('usePrefetchQuery', () => { it('should not allow refetchInterval, enabled or throwOnError options', () => { assertType( usePrefetchQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(5), // @ts-expect-error TS2345 refetchInterval: 1000, @@ -23,7 +24,7 @@ describe('usePrefetchQuery', () => { assertType( usePrefetchQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(5), // @ts-expect-error TS2345 enabled: true, @@ -32,7 +33,7 @@ describe('usePrefetchQuery', () => { assertType( usePrefetchQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(5), // @ts-expect-error TS2345 throwOnError: true, @@ -43,14 +44,14 @@ describe('usePrefetchQuery', () => { it('should not allow skipToken in queryFn', () => { assertType( usePrefetchQuery({ - queryKey: ['key'], + queryKey: queryKey(), // @ts-expect-error queryFn: skipToken, }), ) assertType( usePrefetchQuery({ - queryKey: ['key'], + queryKey: queryKey(), // @ts-expect-error queryFn: Math.random() > 0.5 ? skipToken : () => Promise.resolve(5), }), diff --git a/packages/react-query/src/__tests__/useQueries.test-d.tsx b/packages/react-query/src/__tests__/useQueries.test-d.tsx index 9aaeb45dc2..7c064d5534 100644 --- a/packages/react-query/src/__tests__/useQueries.test-d.tsx +++ b/packages/react-query/src/__tests__/useQueries.test-d.tsx @@ -1,4 +1,5 @@ import { describe, expectTypeOf, it } from 'vitest' +import { queryKey } from '@tanstack/query-test-utils' import { skipToken } from '..' import { useQueries } from '../useQueries' import { queryOptions } from '../queryOptions' @@ -8,7 +9,7 @@ import type { UseQueryOptions, UseQueryResult } from '../types' describe('UseQueries config object overload', () => { it('TData should always be defined when initialData is provided as an object', () => { const query1 = { - queryKey: ['key1'], + queryKey: queryKey(), queryFn: () => { return { wow: true, @@ -20,13 +21,13 @@ describe('UseQueries config object overload', () => { } const query2 = { - queryKey: ['key2'], + queryKey: queryKey(), queryFn: () => 'Query Data', initialData: 'initial data', } const query3 = { - queryKey: ['key2'], + queryKey: queryKey(), queryFn: () => 'Query Data', } @@ -43,7 +44,7 @@ describe('UseQueries config object overload', () => { it('TData should be defined when passed through queryOptions', () => { const options = queryOptions({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => { return { wow: true, @@ -62,13 +63,13 @@ describe('UseQueries config object overload', () => { it('should be possible to define a different TData than TQueryFnData using select with queryOptions spread into useQuery', () => { const query1 = queryOptions({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(1), select: (data) => data > 1, }) const query2 = { - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(1), select: (data: number) => data > 1, } @@ -85,7 +86,7 @@ describe('UseQueries config object overload', () => { const queryResults = useQueries({ queries: [ { - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => { return { wow: true, @@ -112,7 +113,7 @@ describe('UseQueries config object overload', () => { queries: [ { ...options, - queryKey: ['todos-key'], + queryKey: queryKey(), queryFn: () => Promise.resolve('data'), }, ], @@ -130,7 +131,7 @@ describe('UseQueries config object overload', () => { const queryResults = useQueries({ queries: [ { - queryKey: ['withSkipToken'], + queryKey: queryKey(), queryFn: Math.random() > 0.5 ? skipToken : () => Promise.resolve(5), }, ], @@ -146,14 +147,14 @@ describe('UseQueries config object overload', () => { const Queries1 = { get: () => queryOptions({ - queryKey: ['key1'], + queryKey: queryKey(), queryFn: () => Promise.resolve(1), }), } const Queries2 = { get: () => queryOptions({ - queryKey: ['key2'], + queryKey: queryKey(), queryFn: () => Promise.resolve(true), }), } diff --git a/packages/react-query/src/__tests__/useQueries.test.tsx b/packages/react-query/src/__tests__/useQueries.test.tsx index 6587076474..0dfd61f2b2 100644 --- a/packages/react-query/src/__tests__/useQueries.test.tsx +++ b/packages/react-query/src/__tests__/useQueries.test.tsx @@ -388,7 +388,7 @@ describe('useQueries', () => { const result4 = useQueries({ queries: [ queryOptions({ - queryKey: ['key1'], + queryKey: queryKey(), queryFn: () => 'string', select: (a) => { expectTypeOf(a).toEqualTypeOf() @@ -396,7 +396,7 @@ describe('useQueries', () => { }, }), queryOptions({ - queryKey: ['key2'], + queryKey: queryKey(), queryFn: () => 'string', select: (a) => { expectTypeOf(a).toEqualTypeOf() @@ -1696,15 +1696,17 @@ describe('useQueries', () => { it('should not cause infinite re-renders when removing last query', async () => { let renderCount = 0 + const key1 = queryKey() + const key2 = queryKey() function Page() { const [queries, setQueries] = React.useState([ { - queryKey: ['query1'], + queryKey: key1, queryFn: () => 'data1', }, { - queryKey: ['query2'], + queryKey: key2, queryFn: () => 'data2', }, ]) @@ -1720,7 +1722,7 @@ describe('useQueries', () => { onClick={() => { setQueries([ { - queryKey: ['query1'], + queryKey: key1, queryFn: () => 'data1', }, ]) @@ -1732,7 +1734,7 @@ describe('useQueries', () => { onClick={() => { setQueries([ { - queryKey: ['query2'], + queryKey: key2, queryFn: () => 'data2', }, ]) @@ -1766,6 +1768,7 @@ describe('useQueries', () => { it('should return correct results when queries count changes with stable combine reference', async () => { const combine = (results: Array) => results + const key = queryKey() const results: Array<{ n: number; length: number }> = [] @@ -1775,7 +1778,7 @@ describe('useQueries', () => { const queries = useQueries( { queries: [...Array(n).keys()].map((i) => ({ - queryKey: ['dynamic', i], + queryKey: [...key, i], queryFn: () => i, })), combine, diff --git a/packages/react-query/src/__tests__/useQuery.test-d.tsx b/packages/react-query/src/__tests__/useQuery.test-d.tsx index 7e99666beb..9eabb3a2ef 100644 --- a/packages/react-query/src/__tests__/useQuery.test-d.tsx +++ b/packages/react-query/src/__tests__/useQuery.test-d.tsx @@ -179,7 +179,7 @@ describe('useQuery', () => { describe('Config object overload', () => { it('TData should always be defined when initialData is provided as an object', () => { const { data } = useQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => ({ wow: true }), initialData: { wow: true }, }) @@ -189,7 +189,7 @@ describe('useQuery', () => { it('TData should be defined when passed through queryOptions', () => { const options = queryOptions({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => { return { wow: true, @@ -206,7 +206,7 @@ describe('useQuery', () => { it('should be possible to define a different TData than TQueryFnData using select with queryOptions spread into useQuery', () => { const options = queryOptions({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(1), }) @@ -220,7 +220,7 @@ describe('useQuery', () => { it('TData should always be defined when initialData is provided as a function which ALWAYS returns the data', () => { const { data } = useQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => { return { wow: true, @@ -236,7 +236,7 @@ describe('useQuery', () => { it('TData should have undefined in the union when initialData is NOT provided', () => { const { data } = useQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => { return { wow: true, @@ -249,7 +249,7 @@ describe('useQuery', () => { it('TData should have undefined in the union when initialData is provided as a function which can return undefined', () => { const { data } = useQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => { return { wow: true, @@ -263,7 +263,7 @@ describe('useQuery', () => { it('TData should be narrowed after an isSuccess check when initialData is provided as a function which can return undefined', () => { const { data, isSuccess } = useQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => { return { wow: true, @@ -281,7 +281,7 @@ describe('useQuery', () => { it('TData should depend from only arguments, not the result', () => { // @ts-expect-error const result: UseQueryResult<{ wow: string }> = useQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => { return { wow: true, @@ -295,7 +295,7 @@ describe('useQuery', () => { it('data should not have undefined when initialData is provided', () => { const { data } = useQuery({ - queryKey: ['query-key'], + queryKey: queryKey(), initialData: 42, }) @@ -312,7 +312,7 @@ describe('useQuery', () => { ) => { return useQuery({ ...options, - queryKey: ['todos-key'], + queryKey: queryKey(), queryFn: () => Promise.resolve('data'), }) } @@ -327,7 +327,7 @@ describe('useQuery', () => { it('should be able to use structuralSharing with unknown types', () => { // https://github.com/TanStack/query/issues/6525#issuecomment-1938411343 useQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => 5, structuralSharing: (oldData, newData) => { expectTypeOf(oldData).toBeUnknown() diff --git a/packages/react-query/src/__tests__/useQuery.test.tsx b/packages/react-query/src/__tests__/useQuery.test.tsx index c89c5513c8..66e8ed2728 100644 --- a/packages/react-query/src/__tests__/useQuery.test.tsx +++ b/packages/react-query/src/__tests__/useQuery.test.tsx @@ -4886,6 +4886,7 @@ describe('useQuery', () => { }) it('should refetch when changed enabled to true in error state', async () => { + const key = queryKey() const queryFn = vi.fn<(...args: Array) => unknown>() queryFn.mockImplementation(() => sleep(10).then(() => Promise.reject(new Error('Suspense Error Bingo'))), @@ -4893,7 +4894,7 @@ describe('useQuery', () => { function Page({ enabled }: { enabled: boolean }) { const { error, isPending } = useQuery({ - queryKey: ['key'], + queryKey: key, queryFn, enabled, retry: false, diff --git a/packages/react-query/src/__tests__/useSuspenseInfiniteQuery.test-d.tsx b/packages/react-query/src/__tests__/useSuspenseInfiniteQuery.test-d.tsx index 49cdb7939b..e656e8cb50 100644 --- a/packages/react-query/src/__tests__/useSuspenseInfiniteQuery.test-d.tsx +++ b/packages/react-query/src/__tests__/useSuspenseInfiniteQuery.test-d.tsx @@ -1,12 +1,13 @@ import { assertType, describe, expectTypeOf, it } from 'vitest' import { skipToken } from '@tanstack/query-core' +import { queryKey } from '@tanstack/query-test-utils' import { useSuspenseInfiniteQuery } from '../useSuspenseInfiniteQuery' import type { InfiniteData } from '@tanstack/query-core' describe('useSuspenseInfiniteQuery', () => { it('should always have data defined', () => { const { data } = useSuspenseInfiniteQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(5), initialPageParam: 1, getNextPageParam: () => 1, @@ -18,7 +19,7 @@ describe('useSuspenseInfiniteQuery', () => { it('should not allow skipToken in queryFn', () => { assertType( useSuspenseInfiniteQuery({ - queryKey: ['key'], + queryKey: queryKey(), // @ts-expect-error queryFn: skipToken, }), @@ -26,7 +27,7 @@ describe('useSuspenseInfiniteQuery', () => { assertType( useSuspenseInfiniteQuery({ - queryKey: ['key'], + queryKey: queryKey(), // @ts-expect-error queryFn: Math.random() > 0.5 ? skipToken : () => Promise.resolve(5), }), @@ -35,7 +36,7 @@ describe('useSuspenseInfiniteQuery', () => { it('should not have pending status', () => { const { status } = useSuspenseInfiniteQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(5), initialPageParam: 1, getNextPageParam: () => 1, @@ -47,7 +48,7 @@ describe('useSuspenseInfiniteQuery', () => { it('should not allow placeholderData, enabled or throwOnError props', () => { assertType( useSuspenseInfiniteQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(5), initialPageParam: 1, getNextPageParam: () => 1, @@ -59,7 +60,7 @@ describe('useSuspenseInfiniteQuery', () => { assertType( useSuspenseInfiniteQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(5), initialPageParam: 1, getNextPageParam: () => 1, @@ -70,7 +71,7 @@ describe('useSuspenseInfiniteQuery', () => { assertType( useSuspenseInfiniteQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(5), initialPageParam: 1, getNextPageParam: () => 1, @@ -82,7 +83,7 @@ describe('useSuspenseInfiniteQuery', () => { it('should not return isPlaceholderData', () => { const query = useSuspenseInfiniteQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(5), initialPageParam: 1, getNextPageParam: () => 1, diff --git a/packages/react-query/src/__tests__/useSuspenseQueries.test-d.tsx b/packages/react-query/src/__tests__/useSuspenseQueries.test-d.tsx index 76fb13a9f5..98bf336c8d 100644 --- a/packages/react-query/src/__tests__/useSuspenseQueries.test-d.tsx +++ b/packages/react-query/src/__tests__/useSuspenseQueries.test-d.tsx @@ -1,4 +1,5 @@ import { assertType, describe, expectTypeOf, it } from 'vitest' +import { queryKey } from '@tanstack/query-test-utils' import { skipToken, useSuspenseQueries } from '..' import { queryOptions } from '../queryOptions' import type { OmitKeyof } from '..' @@ -7,7 +8,7 @@ import type { UseQueryOptions, UseSuspenseQueryResult } from '../types' describe('UseSuspenseQueries config object overload', () => { it('TData should always be defined', () => { const query1 = { - queryKey: ['key1'], + queryKey: queryKey(), queryFn: () => { return { wow: true, @@ -19,7 +20,7 @@ describe('UseSuspenseQueries config object overload', () => { } const query2 = { - queryKey: ['key2'], + queryKey: queryKey(), queryFn: () => 'Query Data', } @@ -34,7 +35,7 @@ describe('UseSuspenseQueries config object overload', () => { it('TData should be defined when passed through queryOptions', () => { const options = queryOptions({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => { return { wow: true, @@ -50,13 +51,13 @@ describe('UseSuspenseQueries config object overload', () => { it('should be possible to define a different TData than TQueryFnData using select with queryOptions spread into useQuery', () => { const query1 = queryOptions({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(1), select: (data) => data > 1, }) const query2 = { - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(1), select: (data: number) => data > 1, } @@ -73,7 +74,7 @@ describe('UseSuspenseQueries config object overload', () => { const queryResults = useSuspenseQueries({ queries: [ { - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => { return { wow: true, @@ -94,7 +95,7 @@ describe('UseSuspenseQueries config object overload', () => { useSuspenseQueries({ queries: [ { - queryKey: ['key'], + queryKey: queryKey(), // @ts-expect-error queryFn: skipToken, }, @@ -106,7 +107,7 @@ describe('UseSuspenseQueries config object overload', () => { useSuspenseQueries({ queries: [ { - queryKey: ['key'], + queryKey: queryKey(), // @ts-expect-error queryFn: Math.random() > 0.5 ? skipToken : () => Promise.resolve(5), }, @@ -119,7 +120,7 @@ describe('UseSuspenseQueries config object overload', () => { const queryResults = useSuspenseQueries({ queries: [ { - queryKey: ['withSkipToken'], + queryKey: queryKey(), // @ts-expect-error queryFn: Math.random() > 0.5 ? skipToken : () => Promise.resolve(5), }, @@ -145,7 +146,7 @@ describe('UseSuspenseQueries config object overload', () => { queries: [ { ...options, - queryKey: ['todos-key'], + queryKey: queryKey(), queryFn: () => Promise.resolve('data'), }, ], @@ -163,14 +164,14 @@ describe('UseSuspenseQueries config object overload', () => { const Queries1 = { get: () => queryOptions({ - queryKey: ['key1'], + queryKey: queryKey(), queryFn: () => Promise.resolve(1), }), } const Queries2 = { get: () => queryOptions({ - queryKey: ['key2'], + queryKey: queryKey(), queryFn: () => Promise.resolve(true), }), } @@ -198,7 +199,7 @@ describe('UseSuspenseQueries config object overload', () => { it('queryOptions with initialData works on useSuspenseQueries', () => { const query1 = queryOptions({ - queryKey: ['key1'], + queryKey: queryKey(), queryFn: () => 'Query Data', initialData: 'initial data', }) @@ -215,7 +216,7 @@ describe('UseSuspenseQueries config object overload', () => { queries: [ // @ts-expect-error queryOptions({ - queryKey: ['key1'], + queryKey: queryKey(), queryFn: Math.random() > 0.5 ? skipToken : () => Promise.resolve(5), }), ], @@ -227,7 +228,7 @@ describe('UseSuspenseQueries config object overload', () => { queries: [ // @ts-expect-error queryOptions({ - queryKey: ['key1'], + queryKey: queryKey(), queryFn: Math.random() > 0.5 ? skipToken : () => Promise.resolve(5), initialData: 5, }), @@ -242,7 +243,7 @@ describe('UseSuspenseQueries config object overload', () => { queries: [ { ...queryOptions({ - queryKey: ['key1'], + queryKey: queryKey(), queryFn: () => 'Query Data', }), select(data: string) { diff --git a/packages/react-query/src/__tests__/useSuspenseQuery.test-d.tsx b/packages/react-query/src/__tests__/useSuspenseQuery.test-d.tsx index e78b8a907d..6e0fb5534b 100644 --- a/packages/react-query/src/__tests__/useSuspenseQuery.test-d.tsx +++ b/packages/react-query/src/__tests__/useSuspenseQuery.test-d.tsx @@ -1,11 +1,12 @@ import { assertType, describe, expectTypeOf, it } from 'vitest' import { skipToken } from '@tanstack/query-core' +import { queryKey } from '@tanstack/query-test-utils' import { useSuspenseQuery } from '../useSuspenseQuery' describe('useSuspenseQuery', () => { it('should always have data defined', () => { const { data } = useSuspenseQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(5), }) @@ -14,7 +15,7 @@ describe('useSuspenseQuery', () => { it('should not have pending status', () => { const { status } = useSuspenseQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(5), }) @@ -24,14 +25,14 @@ describe('useSuspenseQuery', () => { it('should not allow skipToken in queryFn', () => { assertType( useSuspenseQuery({ - queryKey: ['key'], + queryKey: queryKey(), // @ts-expect-error queryFn: skipToken, }), ) assertType( useSuspenseQuery({ - queryKey: ['key'], + queryKey: queryKey(), // @ts-expect-error queryFn: Math.random() > 0.5 ? skipToken : () => Promise.resolve(5), }), @@ -41,7 +42,7 @@ describe('useSuspenseQuery', () => { it('should not allow placeholderData, enabled or throwOnError props', () => { assertType( useSuspenseQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(5), // @ts-expect-error TS2345 placeholderData: 5, @@ -50,7 +51,7 @@ describe('useSuspenseQuery', () => { ) assertType( useSuspenseQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(5), // @ts-expect-error TS2345 enabled: true, @@ -58,7 +59,7 @@ describe('useSuspenseQuery', () => { ) assertType( useSuspenseQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(5), // @ts-expect-error TS2345 throwOnError: true, @@ -69,7 +70,7 @@ describe('useSuspenseQuery', () => { it('should not return isPlaceholderData', () => { expectTypeOf( useSuspenseQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(5), }), ).not.toHaveProperty('isPlaceholderData') @@ -77,7 +78,7 @@ describe('useSuspenseQuery', () => { it('should type-narrow the error field', () => { const query = useSuspenseQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(5), })