diff --git a/packages/preact-query/src/__tests__/HydrationBoundary.test.tsx b/packages/preact-query/src/__tests__/HydrationBoundary.test.tsx index a15173ce03..56d21306c7 100644 --- a/packages/preact-query/src/__tests__/HydrationBoundary.test.tsx +++ b/packages/preact-query/src/__tests__/HydrationBoundary.test.tsx @@ -1,6 +1,6 @@ import * as coreModule from '@tanstack/query-core' import type { hydrate } from '@tanstack/query-core' -import { sleep } from '@tanstack/query-test-utils' +import { queryKey, sleep } from '@tanstack/query-test-utils' import { render } from '@testing-library/preact' import { Suspense, startTransition } from 'preact/compat' import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest' @@ -14,13 +14,16 @@ import { } from '..' describe('Preact hydration', () => { + const stringKey = queryKey() + const addedKey = queryKey() + const promiseKey = queryKey() let stringifiedState: string beforeEach(async () => { vi.useFakeTimers() const queryClient = new QueryClient() queryClient.prefetchQuery({ - queryKey: ['string'], + queryKey: stringKey, queryFn: () => sleep(10).then(() => ['stringCached']), }) await vi.advanceTimersByTimeAsync(10) @@ -38,7 +41,7 @@ describe('Preact hydration', () => { function Page() { const { data } = useQuery({ - queryKey: ['string'], + queryKey: stringKey, queryFn: () => sleep(20).then(() => ['string']), }) return ( @@ -70,7 +73,7 @@ describe('Preact hydration', () => { function Page() { const { data } = useQuery({ - queryKey: ['string'], + queryKey: stringKey, queryFn: () => sleep(20).then(() => ['string']), }) return ( @@ -103,10 +106,10 @@ describe('Preact hydration', () => { const dehydratedState = JSON.parse(stringifiedState) const queryClient = new QueryClient() - function Page({ queryKey }: { queryKey: [string] }) { + function Page({ queryKey: pageKey }: { queryKey: Array }) { const { data } = useQuery({ - queryKey, - queryFn: () => sleep(20).then(() => queryKey), + queryKey: pageKey, + queryFn: () => sleep(20).then(() => pageKey), }) return (
@@ -118,24 +121,24 @@ describe('Preact hydration', () => { const rendered = render( - + , ) expect(rendered.getByText('stringCached')).toBeInTheDocument() await vi.advanceTimersByTimeAsync(21) - expect(rendered.getByText('string')).toBeInTheDocument() + expect(rendered.getByText(stringKey[0]!)).toBeInTheDocument() const intermediateClient = new QueryClient() intermediateClient.prefetchQuery({ - queryKey: ['string'], + queryKey: stringKey, queryFn: () => sleep(20).then(() => ['should change']), }) intermediateClient.prefetchQuery({ - queryKey: ['added'], - queryFn: () => sleep(20).then(() => ['added']), + queryKey: addedKey, + queryFn: () => sleep(20).then(() => [addedKey[0]]), }) await vi.advanceTimersByTimeAsync(20) const dehydrated = dehydrate(intermediateClient) @@ -144,21 +147,21 @@ describe('Preact hydration', () => { rendered.rerender( - - + + , ) // Existing observer should not have updated at this point, // as that would indicate a side effect in the render phase - expect(rendered.getByText('string')).toBeInTheDocument() + expect(rendered.getByText(stringKey[0]!)).toBeInTheDocument() // New query data should be available immediately - expect(rendered.getByText('added')).toBeInTheDocument() + expect(rendered.getByText(addedKey[0]!)).toBeInTheDocument() await vi.advanceTimersByTimeAsync(0) // After effects phase has had time to run, the observer should have updated - expect(rendered.queryByText('string')).not.toBeInTheDocument() + expect(rendered.queryByText(stringKey[0]!)).not.toBeInTheDocument() expect(rendered.getByText('should change')).toBeInTheDocument() queryClient.clear() @@ -174,10 +177,10 @@ describe('Preact hydration', () => { const initialDehydratedState = JSON.parse(stringifiedState) const queryClient = new QueryClient() - function Page({ queryKey }: { queryKey: [string] }) { + function Page({ queryKey: pageKey }: { queryKey: Array }) { const { data } = useQuery({ - queryKey, - queryFn: () => sleep(20).then(() => queryKey), + queryKey: pageKey, + queryFn: () => sleep(20).then(() => pageKey), }) return (
@@ -189,23 +192,23 @@ describe('Preact hydration', () => { const rendered = render( - + , ) expect(rendered.getByText('stringCached')).toBeInTheDocument() await vi.advanceTimersByTimeAsync(21) - expect(rendered.getByText('string')).toBeInTheDocument() + expect(rendered.getByText(stringKey[0]!)).toBeInTheDocument() const intermediateClient = new QueryClient() intermediateClient.prefetchQuery({ - queryKey: ['string'], + queryKey: stringKey, queryFn: () => sleep(20).then(() => ['should not change']), }) intermediateClient.prefetchQuery({ - queryKey: ['added'], - queryFn: () => sleep(20).then(() => ['added']), + queryKey: addedKey, + queryFn: () => sleep(20).then(() => [addedKey[0]]), }) await vi.advanceTimersByTimeAsync(20) @@ -223,8 +226,8 @@ describe('Preact hydration', () => { - - + + @@ -238,26 +241,26 @@ describe('Preact hydration', () => { rendered.rerender( - - + + , ) // This query existed before the transition so it should stay the same - expect(rendered.getByText('string')).toBeInTheDocument() + expect(rendered.getByText(stringKey[0]!)).toBeInTheDocument() expect( rendered.queryByText('should not change'), ).not.toBeInTheDocument() // New query data should be available immediately because it was // hydrated in the previous transition, even though the new dehydrated // state did not contain it - expect(rendered.getByText('added')).toBeInTheDocument() + expect(rendered.getByText(addedKey[0]!)).toBeInTheDocument() }) await vi.advanceTimersByTimeAsync(20) // It should stay the same even after effects have had a chance to run - expect(rendered.getByText('string')).toBeInTheDocument() + expect(rendered.getByText(stringKey[0]!)).toBeInTheDocument() expect(rendered.queryByText('should not change')).not.toBeInTheDocument() queryClient.clear() @@ -269,7 +272,7 @@ describe('Preact hydration', () => { function Page() { const { data } = useQuery({ - queryKey: ['string'], + queryKey: stringKey, queryFn: () => sleep(20).then(() => ['string']), }) return ( @@ -429,7 +432,7 @@ describe('Preact hydration', () => { // with a dataUpdatedAt earlier than the dehydratedAt of the next query const clientQueryClient = new QueryClient() clientQueryClient.prefetchQuery({ - queryKey: ['promise'], + queryKey: promiseKey, queryFn: () => sleep(20).then(() => 'existing'), }) await vi.advanceTimersByTimeAsync(20) @@ -442,7 +445,7 @@ describe('Preact hydration', () => { }, }) prefetchQueryClient.prefetchQuery({ - queryKey: ['promise'], + queryKey: promiseKey, queryFn: () => sleep(10).then(() => Promise.reject(new Error('Query failed'))), }) @@ -455,7 +458,7 @@ describe('Preact hydration', () => { function Page() { const { data } = useQuery({ - queryKey: ['promise'], + queryKey: promiseKey, queryFn: () => sleep(20).then(() => ['new']), }) return ( diff --git a/packages/preact-query/src/__tests__/infiniteQueryOptions.test-d.tsx b/packages/preact-query/src/__tests__/infiniteQueryOptions.test-d.tsx index 5c27ced8ee..bf3daec335 100644 --- a/packages/preact-query/src/__tests__/infiniteQueryOptions.test-d.tsx +++ b/packages/preact-query/src/__tests__/infiniteQueryOptions.test-d.tsx @@ -4,6 +4,7 @@ import type { InfiniteData, InitialDataFunction, } from '@tanstack/query-core' +import { queryKey } from '@tanstack/query-test-utils' import { assertType, describe, expectTypeOf, it, test } from 'vitest' import { infiniteQueryOptions } from '../infiniteQueryOptions' @@ -15,7 +16,7 @@ describe('infiniteQueryOptions', () => { it('should not allow excess properties', () => { assertType( infiniteQueryOptions({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve('data'), getNextPageParam: () => 1, initialPageParam: 1, @@ -26,7 +27,7 @@ describe('infiniteQueryOptions', () => { }) it('should infer types for callbacks', () => { infiniteQueryOptions({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve('data'), staleTime: 1000, getNextPageParam: () => 1, @@ -38,7 +39,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, @@ -53,7 +54,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, @@ -65,7 +66,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, @@ -76,61 +77,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 >() @@ -143,7 +144,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, @@ -157,7 +158,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, @@ -183,7 +184,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: [] }) @@ -201,7 +202,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/preact-query/src/__tests__/infiniteQueryOptions.test.tsx b/packages/preact-query/src/__tests__/infiniteQueryOptions.test.tsx index 88017ced53..4ba6cddbcb 100644 --- a/packages/preact-query/src/__tests__/infiniteQueryOptions.test.tsx +++ b/packages/preact-query/src/__tests__/infiniteQueryOptions.test.tsx @@ -1,3 +1,4 @@ +import { queryKey } from '@tanstack/query-test-utils' import { describe, expect, it } from 'vitest' import { infiniteQueryOptions } from '../infiniteQueryOptions' @@ -5,8 +6,9 @@ import type { UseInfiniteQueryOptions } from '../types' describe('infiniteQueryOptions', () => { it('should return the object received as a parameter without any modification.', () => { + const key = queryKey() const object: UseInfiniteQueryOptions = { - queryKey: ['key'], + queryKey: key, queryFn: () => Promise.resolve(5), getNextPageParam: () => null, initialPageParam: null, diff --git a/packages/preact-query/src/__tests__/mutationOptions.test-d.tsx b/packages/preact-query/src/__tests__/mutationOptions.test-d.tsx index b945477f8d..86f48506a5 100644 --- a/packages/preact-query/src/__tests__/mutationOptions.test-d.tsx +++ b/packages/preact-query/src/__tests__/mutationOptions.test-d.tsx @@ -5,6 +5,7 @@ import type { MutationState, WithRequired, } from '@tanstack/query-core' +import { queryKey } from '@tanstack/query-test-utils' import { assertType, describe, expectTypeOf, it } from 'vitest' import { useIsMutating, useMutation, useMutationState } from '..' @@ -16,7 +17,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() @@ -27,7 +28,7 @@ describe('mutationOptions', () => { it('should infer types for callbacks', () => { mutationOptions({ mutationFn: () => Promise.resolve(5), - mutationKey: ['key'], + mutationKey: queryKey(), onSuccess: (data) => { expectTypeOf(data).toEqualTypeOf() }, @@ -39,7 +40,7 @@ describe('mutationOptions', () => { mutationFn: () => { throw new Error('fail') }, - mutationKey: ['key'], + mutationKey: queryKey(), onError: (error) => { expectTypeOf(error).toEqualTypeOf() }, @@ -52,14 +53,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' } }, @@ -75,7 +76,7 @@ describe('mutationOptions', () => { expectTypeOf(context).toEqualTypeOf() return Promise.resolve(5) }, - mutationKey: ['key'], + mutationKey: queryKey(), onMutate: (_variables, context) => { expectTypeOf(context).toEqualTypeOf() }, @@ -113,7 +114,7 @@ describe('mutationOptions', () => { expectTypeOf( mutationOptions({ mutationFn: (id: string) => Promise.resolve(id.length), - mutationKey: ['key'], + mutationKey: queryKey(), onSuccess: (data) => { expectTypeOf(data).toEqualTypeOf() }, @@ -139,7 +140,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() @@ -164,7 +165,7 @@ describe('mutationOptions', () => { it('should infer types when used with useIsMutating', () => { const isMutating = useIsMutating( mutationOptions({ - mutationKey: ['key'], + mutationKey: queryKey(), mutationFn: () => Promise.resolve(5), }), ) @@ -183,7 +184,7 @@ describe('mutationOptions', () => { const isMutating = queryClient.isMutating( mutationOptions({ - mutationKey: ['key'], + mutationKey: queryKey(), mutationFn: () => Promise.resolve(5), }), ) @@ -200,7 +201,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/preact-query/src/__tests__/mutationOptions.test.tsx b/packages/preact-query/src/__tests__/mutationOptions.test.tsx index 359919d121..8b3864b468 100644 --- a/packages/preact-query/src/__tests__/mutationOptions.test.tsx +++ b/packages/preact-query/src/__tests__/mutationOptions.test.tsx @@ -1,6 +1,6 @@ import { QueryClient } from '@tanstack/query-core' import type { MutationState } from '@tanstack/query-core' -import { sleep } from '@tanstack/query-test-utils' +import { queryKey, sleep } from '@tanstack/query-test-utils' import { fireEvent } from '@testing-library/preact' import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' @@ -38,8 +38,9 @@ describe('mutationOptions', () => { it('should return the number of fetching mutations when used with useIsMutating (with mutationKey in mutationOptions)', async () => { const isMutatingArray: Array = [] const queryClient = new QueryClient() + const key = queryKey() const mutationOpts = mutationOptions({ - mutationKey: ['key'], + mutationKey: key, mutationFn: () => sleep(50).then(() => 'data'), }) @@ -129,8 +130,9 @@ describe('mutationOptions', () => { it('should return the number of fetching mutations when used with useIsMutating', async () => { const isMutatingArray: Array = [] const queryClient = new QueryClient() + const key = queryKey() const mutationOpts1 = mutationOptions({ - mutationKey: ['key'], + mutationKey: key, mutationFn: () => sleep(50).then(() => 'data1'), }) const mutationOpts2 = mutationOptions({ @@ -181,8 +183,9 @@ describe('mutationOptions', () => { it('should return the number of fetching mutations when used with useIsMutating (filter mutationOpts1.mutationKey)', async () => { const isMutatingArray: Array = [] const queryClient = new QueryClient() + const key = queryKey() const mutationOpts1 = mutationOptions({ - mutationKey: ['key'], + mutationKey: key, mutationFn: () => sleep(50).then(() => 'data1'), }) const mutationOpts2 = mutationOptions({ @@ -235,8 +238,9 @@ describe('mutationOptions', () => { it('should return the number of fetching mutations when used with queryClient.isMutating (with mutationKey in mutationOptions)', async () => { const isMutatingArray: Array = [] const queryClient = new QueryClient() + const key = queryKey() const mutationOpts = mutationOptions({ - mutationKey: ['mutation'], + mutationKey: key, mutationFn: () => sleep(500).then(() => 'data'), }) @@ -298,8 +302,9 @@ describe('mutationOptions', () => { it('should return the number of fetching mutations when used with queryClient.isMutating', async () => { const isMutatingArray: Array = [] const queryClient = new QueryClient() + const key = queryKey() const mutationOpts1 = mutationOptions({ - mutationKey: ['mutation'], + mutationKey: key, mutationFn: () => sleep(500).then(() => 'data1'), }) const mutationOpts2 = mutationOptions({ @@ -336,8 +341,9 @@ describe('mutationOptions', () => { it('should return the number of fetching mutations when used with queryClient.isMutating (filter mutationOpt1.mutationKey)', async () => { const isMutatingArray: Array = [] const queryClient = new QueryClient() + const key = queryKey() const mutationOpts1 = mutationOptions({ - mutationKey: ['mutation'], + mutationKey: key, mutationFn: () => sleep(500).then(() => 'data1'), }) const mutationOpts2 = mutationOptions({ @@ -378,8 +384,9 @@ describe('mutationOptions', () => { MutationState > = [] const queryClient = new QueryClient() + const key = queryKey() const mutationOpts = mutationOptions({ - mutationKey: ['mutation'], + mutationKey: key, mutationFn: () => sleep(10).then(() => 'data'), }) @@ -447,8 +454,9 @@ describe('mutationOptions', () => { MutationState > = [] const queryClient = new QueryClient() + const key = queryKey() const mutationOpts1 = mutationOptions({ - mutationKey: ['mutation'], + mutationKey: key, mutationFn: () => sleep(10).then(() => 'data1'), }) const mutationOpts2 = mutationOptions({ @@ -489,8 +497,9 @@ describe('mutationOptions', () => { MutationState > = [] const queryClient = new QueryClient() + const key = queryKey() const mutationOpts1 = mutationOptions({ - mutationKey: ['mutation'], + mutationKey: key, mutationFn: () => sleep(10).then(() => 'data1'), }) const mutationOpts2 = mutationOptions({ diff --git a/packages/preact-query/src/__tests__/queryOptions.test-d.tsx b/packages/preact-query/src/__tests__/queryOptions.test-d.tsx index 1e44792264..6f0d34c6ba 100644 --- a/packages/preact-query/src/__tests__/queryOptions.test-d.tsx +++ b/packages/preact-query/src/__tests__/queryOptions.test-d.tsx @@ -9,6 +9,7 @@ import type { InitialDataFunction, QueryObserverResult, } from '@tanstack/query-core' +import { queryKey } from '@tanstack/query-test-utils' import { assertType, describe, expectTypeOf, it } from 'vitest' import { queryOptions } from '../queryOptions' @@ -21,7 +22,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, @@ -30,7 +31,7 @@ describe('queryOptions', () => { }) it('should infer types for callbacks', () => { queryOptions({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(5), staleTime: 1000, select: (data) => { @@ -40,7 +41,7 @@ describe('queryOptions', () => { }) it('should work when passed to useQuery', () => { const options = queryOptions({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(5), }) @@ -49,7 +50,7 @@ describe('queryOptions', () => { }) it('should work when passed to useSuspenseQuery', () => { const options = queryOptions({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(5), }) @@ -59,7 +60,7 @@ describe('queryOptions', () => { it('should work when passed to fetchQuery', async () => { const options = queryOptions({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(5), }) @@ -68,7 +69,7 @@ describe('queryOptions', () => { }) it('should work when passed to useQueries', () => { const options = queryOptions({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(5), }) @@ -79,90 +80,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), }) @@ -173,7 +174,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, }) @@ -184,7 +185,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 @@ -194,7 +195,7 @@ describe('queryOptions', () => { it('should return the proper type when passed to QueriesObserver', () => { const options = queryOptions({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(5), }) @@ -208,7 +209,7 @@ describe('queryOptions', () => { it('should allow undefined response in initialData', () => { assertType((id: string | null) => queryOptions({ - queryKey: ['todo', id], + queryKey: [...queryKey(), id], queryFn: () => Promise.resolve({ id: '1', @@ -228,7 +229,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, }) @@ -248,7 +249,7 @@ describe('queryOptions', () => { } const options = queryOptions({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(1), }) diff --git a/packages/preact-query/src/__tests__/ssr-hydration.test.tsx b/packages/preact-query/src/__tests__/ssr-hydration.test.tsx index 10154d0189..c090696811 100644 --- a/packages/preact-query/src/__tests__/ssr-hydration.test.tsx +++ b/packages/preact-query/src/__tests__/ssr-hydration.test.tsx @@ -1,3 +1,4 @@ +import { queryKey } from '@tanstack/query-test-utils' import { act } from '@testing-library/preact' import { hydrate as preactHydrate, render } from 'preact' import type { VNode } from 'preact' @@ -36,6 +37,9 @@ function PrintStateComponent({ componentName, result }: any): any { } describe('Server side rendering with de/rehydration', () => { + const successKey = queryKey() + const errorKey = queryKey() + beforeAll(() => { vi.useFakeTimers() }) @@ -53,7 +57,7 @@ describe('Server side rendering with de/rehydration', () => { // -- Shared part -- function SuccessComponent() { const result = useQuery({ - queryKey: ['success'], + queryKey: successKey, queryFn: () => fetchDataSuccess('success!'), }) return ( @@ -69,7 +73,7 @@ describe('Server side rendering with de/rehydration', () => { queryCache: prefetchCache, }) await prefetchClient.prefetchQuery({ - queryKey: ['success'], + queryKey: successKey, queryFn: () => fetchDataSuccess('success'), }) const dehydratedStateServer = dehydrate(prefetchClient) @@ -130,7 +134,7 @@ describe('Server side rendering with de/rehydration', () => { // -- Shared part -- function ErrorComponent() { const result = useQuery({ - queryKey: ['error'], + queryKey: errorKey, queryFn: () => fetchDataError(), retry: false, }) @@ -146,7 +150,7 @@ describe('Server side rendering with de/rehydration', () => { queryCache: prefetchCache, }) await prefetchClient.prefetchQuery({ - queryKey: ['error'], + queryKey: errorKey, queryFn: () => fetchDataError(), }) const dehydratedStateServer = dehydrate(prefetchClient) @@ -207,7 +211,7 @@ describe('Server side rendering with de/rehydration', () => { // -- Shared part -- function SuccessComponent() { const result = useQuery({ - queryKey: ['success'], + queryKey: successKey, queryFn: () => fetchDataSuccess('success!'), }) return ( diff --git a/packages/preact-query/src/__tests__/suspense.test.tsx b/packages/preact-query/src/__tests__/suspense.test.tsx index 05f50d0abe..237919de17 100644 --- a/packages/preact-query/src/__tests__/suspense.test.tsx +++ b/packages/preact-query/src/__tests__/suspense.test.tsx @@ -59,7 +59,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, }) @@ -85,7 +85,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/preact-query/src/__tests__/useInfiniteQuery.test-d.tsx b/packages/preact-query/src/__tests__/useInfiniteQuery.test-d.tsx index ec858b1703..b11002c9e2 100644 --- a/packages/preact-query/src/__tests__/useInfiniteQuery.test-d.tsx +++ b/packages/preact-query/src/__tests__/useInfiniteQuery.test-d.tsx @@ -1,5 +1,6 @@ import { QueryClient } from '@tanstack/query-core' import type { InfiniteData } from '@tanstack/query-core' +import { queryKey } from '@tanstack/query-test-utils' import { describe, expectTypeOf, it } from 'vitest' import { useInfiniteQuery } from '../useInfiniteQuery' @@ -7,7 +8,7 @@ import { useInfiniteQuery } from '../useInfiniteQuery' describe('pageParam', () => { it('initialPageParam should define type of param passed to queryFunctionContext', () => { useInfiniteQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: ({ pageParam }) => { expectTypeOf(pageParam).toEqualTypeOf() }, @@ -18,7 +19,7 @@ describe('pageParam', () => { it('direction should be passed to queryFn of useInfiniteQuery', () => { useInfiniteQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: ({ direction }) => { expectTypeOf(direction).toEqualTypeOf<'forward' | 'backward'>() }, @@ -30,7 +31,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() }, @@ -41,7 +42,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() }, @@ -52,7 +53,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 }, @@ -68,7 +69,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 }, @@ -86,7 +87,7 @@ describe('select', () => { describe('getNextPageParam / getPreviousPageParam', () => { it('should get typed params', () => { const infiniteQuery = useInfiniteQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: ({ pageParam }) => { return String(pageParam) }, @@ -127,7 +128,7 @@ describe('error booleans', () => { isLoadingError, isRefetchError, } = useInfiniteQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: ({ pageParam }) => { return pageParam * 5 }, diff --git a/packages/preact-query/src/__tests__/useMutationState.test.tsx b/packages/preact-query/src/__tests__/useMutationState.test.tsx index 8618a5d9fd..33ff004f32 100644 --- a/packages/preact-query/src/__tests__/useMutationState.test.tsx +++ b/packages/preact-query/src/__tests__/useMutationState.test.tsx @@ -1,4 +1,4 @@ -import { sleep } from '@tanstack/query-test-utils' +import { queryKey, sleep } from '@tanstack/query-test-utils' import { fireEvent, render } from '@testing-library/preact' import { useEffect } from 'preact/hooks' import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' @@ -18,6 +18,8 @@ describe('useIsMutating', () => { it('should return the number of fetching mutations', async () => { const isMutatingArray: Array = [] const queryClient = new QueryClient() + const mutationKey1 = queryKey() + const mutationKey2 = queryKey() function IsMutating() { const isMutating = useIsMutating() @@ -29,11 +31,11 @@ describe('useIsMutating', () => { function Mutations() { const { mutate: mutate1 } = useMutation({ - mutationKey: ['mutation1'], + mutationKey: mutationKey1, mutationFn: () => sleep(50).then(() => 'data'), }) const { mutate: mutate2 } = useMutation({ - mutationKey: ['mutation2'], + mutationKey: mutationKey2, mutationFn: () => sleep(10).then(() => 'data'), }) @@ -79,20 +81,22 @@ describe('useIsMutating', () => { it('should filter correctly by mutationKey', async () => { const isMutatingArray: Array = [] const queryClient = new QueryClient() + const mutationKey1 = queryKey() + const mutationKey2 = queryKey() function IsMutating() { - const isMutating = useIsMutating({ mutationKey: ['mutation1'] }) + const isMutating = useIsMutating({ mutationKey: mutationKey1 }) isMutatingArray.push(isMutating) return null } function Page() { const { mutate: mutate1 } = useMutation({ - mutationKey: ['mutation1'], + mutationKey: mutationKey1, mutationFn: () => sleep(100).then(() => 'data'), }) const { mutate: mutate2 } = useMutation({ - mutationKey: ['mutation2'], + mutationKey: mutationKey2, mutationFn: () => sleep(100).then(() => 'data'), }) @@ -113,11 +117,13 @@ describe('useIsMutating', () => { it('should filter correctly by predicate', async () => { const isMutatingArray: Array = [] const queryClient = new QueryClient() + const mutationKey1 = queryKey() + const mutationKey2 = queryKey() function IsMutating() { const isMutating = useIsMutating({ predicate: (mutation) => - mutation.options.mutationKey?.[0] === 'mutation1', + mutation.options.mutationKey?.[0] === mutationKey1[0], }) isMutatingArray.push(isMutating) return null @@ -125,11 +131,11 @@ describe('useIsMutating', () => { function Page() { const { mutate: mutate1 } = useMutation({ - mutationKey: ['mutation1'], + mutationKey: mutationKey1, mutationFn: () => sleep(100).then(() => 'data'), }) const { mutate: mutate2 } = useMutation({ - mutationKey: ['mutation2'], + mutationKey: mutationKey2, mutationFn: () => sleep(100).then(() => 'data'), }) @@ -149,12 +155,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, @@ -190,7 +197,7 @@ describe('useMutationState', () => { it('should return variables after calling mutate', async () => { const queryClient = new QueryClient() const variables: Array> = [] - const mutationKey = ['mutation'] + const mutationKey = queryKey() function Variables() { variables.push( diff --git a/packages/preact-query/src/__tests__/usePrefetchInfiniteQuery.test-d.tsx b/packages/preact-query/src/__tests__/usePrefetchInfiniteQuery.test-d.tsx index 83f2a537c7..048f340991 100644 --- a/packages/preact-query/src/__tests__/usePrefetchInfiniteQuery.test-d.tsx +++ b/packages/preact-query/src/__tests__/usePrefetchInfiniteQuery.test-d.tsx @@ -1,3 +1,4 @@ +import { queryKey } from '@tanstack/query-test-utils' import { assertType, describe, expectTypeOf, it } from 'vitest' import { usePrefetchInfiniteQuery } from '..' @@ -5,7 +6,7 @@ import { usePrefetchInfiniteQuery } from '..' describe('usePrefetchInfiniteQuery', () => { it('should return nothing', () => { const result = usePrefetchInfiniteQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(5), initialPageParam: 1, getNextPageParam: () => 1, @@ -18,7 +19,7 @@ describe('usePrefetchInfiniteQuery', () => { assertType( // @ts-expect-error TS2345 usePrefetchInfiniteQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(5), }), ) @@ -27,7 +28,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, @@ -38,7 +39,7 @@ describe('usePrefetchInfiniteQuery', () => { assertType( usePrefetchInfiniteQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(5), initialPageParam: 1, getNextPageParam: () => 1, @@ -49,7 +50,7 @@ describe('usePrefetchInfiniteQuery', () => { assertType( usePrefetchInfiniteQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(5), initialPageParam: 1, getNextPageParam: () => 1, diff --git a/packages/preact-query/src/__tests__/usePrefetchQuery.test-d.tsx b/packages/preact-query/src/__tests__/usePrefetchQuery.test-d.tsx index 17f0dc5437..6f5d510251 100644 --- a/packages/preact-query/src/__tests__/usePrefetchQuery.test-d.tsx +++ b/packages/preact-query/src/__tests__/usePrefetchQuery.test-d.tsx @@ -1,3 +1,4 @@ +import { queryKey } from '@tanstack/query-test-utils' import { assertType, describe, expectTypeOf, it } from 'vitest' import { skipToken, usePrefetchQuery } from '..' @@ -5,7 +6,7 @@ import { skipToken, usePrefetchQuery } from '..' describe('usePrefetchQuery', () => { it('should return nothing', () => { const result = usePrefetchQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(5), }) @@ -15,7 +16,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, @@ -24,7 +25,7 @@ describe('usePrefetchQuery', () => { assertType( usePrefetchQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(5), // @ts-expect-error TS2345 enabled: true, @@ -33,7 +34,7 @@ describe('usePrefetchQuery', () => { assertType( usePrefetchQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(5), // @ts-expect-error TS2345 throwOnError: true, @@ -44,14 +45,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/preact-query/src/__tests__/useQueries.test-d.tsx b/packages/preact-query/src/__tests__/useQueries.test-d.tsx index ca6cd0cb45..b9a12ab009 100644 --- a/packages/preact-query/src/__tests__/useQueries.test-d.tsx +++ b/packages/preact-query/src/__tests__/useQueries.test-d.tsx @@ -1,3 +1,4 @@ +import { queryKey } from '@tanstack/query-test-utils' import { describe, expectTypeOf, it } from 'vitest' import { skipToken } from '..' @@ -9,7 +10,7 @@ import { useQueries } from '../useQueries' 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, @@ -21,13 +22,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', } @@ -44,7 +45,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, @@ -63,13 +64,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, } @@ -86,7 +87,7 @@ describe('UseQueries config object overload', () => { const queryResults = useQueries({ queries: [ { - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => { return { wow: true, @@ -113,7 +114,7 @@ describe('UseQueries config object overload', () => { queries: [ { ...options, - queryKey: ['todos-key'], + queryKey: queryKey(), queryFn: () => Promise.resolve('data'), }, ], @@ -131,7 +132,7 @@ describe('UseQueries config object overload', () => { const queryResults = useQueries({ queries: [ { - queryKey: ['withSkipToken'], + queryKey: queryKey(), queryFn: Math.random() > 0.5 ? skipToken : () => Promise.resolve(5), }, ], @@ -147,14 +148,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/preact-query/src/__tests__/useQueries.test.tsx b/packages/preact-query/src/__tests__/useQueries.test.tsx index 4a59b4e338..6b5d393435 100644 --- a/packages/preact-query/src/__tests__/useQueries.test.tsx +++ b/packages/preact-query/src/__tests__/useQueries.test.tsx @@ -389,7 +389,7 @@ describe('useQueries', () => { const result4 = useQueries({ queries: [ queryOptions({ - queryKey: ['key1'], + queryKey: queryKey(), queryFn: () => 'string', select: (a) => { expectTypeOf(a).toEqualTypeOf() @@ -397,7 +397,7 @@ describe('useQueries', () => { }, }), queryOptions({ - queryKey: ['key2'], + queryKey: queryKey(), queryFn: () => 'string', select: (a) => { expectTypeOf(a).toEqualTypeOf() @@ -1697,15 +1697,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] = useState([ { - queryKey: ['query1'], + queryKey: key1, queryFn: () => 'data1', }, { - queryKey: ['query2'], + queryKey: key2, queryFn: () => 'data2', }, ]) @@ -1721,7 +1723,7 @@ describe('useQueries', () => { onClick={() => { setQueries([ { - queryKey: ['query1'], + queryKey: key1, queryFn: () => 'data1', }, ]) @@ -1733,7 +1735,7 @@ describe('useQueries', () => { onClick={() => { setQueries([ { - queryKey: ['query2'], + queryKey: key2, queryFn: () => 'data2', }, ]) diff --git a/packages/preact-query/src/__tests__/useQuery.test-d.tsx b/packages/preact-query/src/__tests__/useQuery.test-d.tsx index d304b90d69..55461084db 100644 --- a/packages/preact-query/src/__tests__/useQuery.test-d.tsx +++ b/packages/preact-query/src/__tests__/useQuery.test-d.tsx @@ -180,7 +180,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 }, }) @@ -190,7 +190,7 @@ describe('useQuery', () => { it('TData should be defined when passed through queryOptions', () => { const options = queryOptions({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => { return { wow: true, @@ -207,7 +207,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), }) @@ -221,7 +221,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, @@ -237,7 +237,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, @@ -250,7 +250,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, @@ -264,7 +264,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, @@ -283,7 +283,7 @@ describe('useQuery', () => { // @ts-expect-error // eslint-disable-next-line const result: UseQueryResult<{ wow: string }> = useQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => { return { wow: true, @@ -297,7 +297,7 @@ describe('useQuery', () => { it('data should not have undefined when initialData is provided', () => { const { data } = useQuery({ - queryKey: ['query-key'], + queryKey: queryKey(), initialData: 42, }) @@ -314,7 +314,7 @@ describe('useQuery', () => { ) => { return useQuery({ ...options, - queryKey: ['todos-key'], + queryKey: queryKey(), queryFn: () => Promise.resolve('data'), }) } @@ -329,7 +329,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/preact-query/src/__tests__/useQuery.test.tsx b/packages/preact-query/src/__tests__/useQuery.test.tsx index ed569d5293..1f26a86395 100644 --- a/packages/preact-query/src/__tests__/useQuery.test.tsx +++ b/packages/preact-query/src/__tests__/useQuery.test.tsx @@ -4907,6 +4907,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'))), @@ -4914,7 +4915,7 @@ describe('useQuery', () => { function Page({ enabled }: { enabled: boolean }) { const { error, isPending } = useQuery({ - queryKey: ['key'], + queryKey: key, queryFn, enabled, retry: false, diff --git a/packages/preact-query/src/__tests__/useSuspenseInfiniteQuery.test-d.tsx b/packages/preact-query/src/__tests__/useSuspenseInfiniteQuery.test-d.tsx index 9487a50049..d2b3835de0 100644 --- a/packages/preact-query/src/__tests__/useSuspenseInfiniteQuery.test-d.tsx +++ b/packages/preact-query/src/__tests__/useSuspenseInfiniteQuery.test-d.tsx @@ -1,5 +1,6 @@ import { skipToken } from '@tanstack/query-core' import type { InfiniteData } from '@tanstack/query-core' +import { queryKey } from '@tanstack/query-test-utils' import { assertType, describe, expectTypeOf, it } from 'vitest' import { useSuspenseInfiniteQuery } from '../useSuspenseInfiniteQuery' @@ -7,7 +8,7 @@ import { useSuspenseInfiniteQuery } from '../useSuspenseInfiniteQuery' describe('useSuspenseInfiniteQuery', () => { it('should always have data defined', () => { const { data } = useSuspenseInfiniteQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(5), initialPageParam: 1, getNextPageParam: () => 1, @@ -19,7 +20,7 @@ describe('useSuspenseInfiniteQuery', () => { it('should not allow skipToken in queryFn', () => { assertType( useSuspenseInfiniteQuery({ - queryKey: ['key'], + queryKey: queryKey(), // @ts-expect-error queryFn: skipToken, }), @@ -27,7 +28,7 @@ describe('useSuspenseInfiniteQuery', () => { assertType( useSuspenseInfiniteQuery({ - queryKey: ['key'], + queryKey: queryKey(), // @ts-expect-error queryFn: Math.random() > 0.5 ? skipToken : () => Promise.resolve(5), }), @@ -36,7 +37,7 @@ describe('useSuspenseInfiniteQuery', () => { it('should not have pending status', () => { const { status } = useSuspenseInfiniteQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(5), initialPageParam: 1, getNextPageParam: () => 1, @@ -48,7 +49,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, @@ -60,7 +61,7 @@ describe('useSuspenseInfiniteQuery', () => { assertType( useSuspenseInfiniteQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(5), initialPageParam: 1, getNextPageParam: () => 1, @@ -71,7 +72,7 @@ describe('useSuspenseInfiniteQuery', () => { assertType( useSuspenseInfiniteQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(5), initialPageParam: 1, getNextPageParam: () => 1, @@ -83,7 +84,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/preact-query/src/__tests__/useSuspenseQueries.test-d.tsx b/packages/preact-query/src/__tests__/useSuspenseQueries.test-d.tsx index 99dd4a9e2d..9101d203ce 100644 --- a/packages/preact-query/src/__tests__/useSuspenseQueries.test-d.tsx +++ b/packages/preact-query/src/__tests__/useSuspenseQueries.test-d.tsx @@ -1,3 +1,4 @@ +import { queryKey } from '@tanstack/query-test-utils' import { assertType, describe, expectTypeOf, it } from 'vitest' import { skipToken, useSuspenseQueries } from '..' @@ -8,7 +9,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, @@ -20,7 +21,7 @@ describe('UseSuspenseQueries config object overload', () => { } const query2 = { - queryKey: ['key2'], + queryKey: queryKey(), queryFn: () => 'Query Data', } @@ -35,7 +36,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, @@ -51,13 +52,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, } @@ -74,7 +75,7 @@ describe('UseSuspenseQueries config object overload', () => { const queryResults = useSuspenseQueries({ queries: [ { - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => { return { wow: true, @@ -95,7 +96,7 @@ describe('UseSuspenseQueries config object overload', () => { useSuspenseQueries({ queries: [ { - queryKey: ['key'], + queryKey: queryKey(), // @ts-expect-error queryFn: skipToken, }, @@ -107,7 +108,7 @@ describe('UseSuspenseQueries config object overload', () => { useSuspenseQueries({ queries: [ { - queryKey: ['key'], + queryKey: queryKey(), // @ts-expect-error queryFn: Math.random() > 0.5 ? skipToken : () => Promise.resolve(5), }, @@ -120,7 +121,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), }, @@ -146,7 +147,7 @@ describe('UseSuspenseQueries config object overload', () => { queries: [ { ...options, - queryKey: ['todos-key'], + queryKey: queryKey(), queryFn: () => Promise.resolve('data'), }, ], @@ -164,14 +165,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), }), } @@ -199,7 +200,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', }) @@ -216,7 +217,7 @@ describe('UseSuspenseQueries config object overload', () => { queries: [ // @ts-expect-error queryOptions({ - queryKey: ['key1'], + queryKey: queryKey(), queryFn: Math.random() > 0.5 ? skipToken : () => Promise.resolve(5), }), ], @@ -228,7 +229,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, }), @@ -243,7 +244,7 @@ describe('UseSuspenseQueries config object overload', () => { queries: [ { ...queryOptions({ - queryKey: ['key1'], + queryKey: queryKey(), queryFn: () => 'Query Data', }), select(data: string) { diff --git a/packages/preact-query/src/__tests__/useSuspenseQuery.test-d.tsx b/packages/preact-query/src/__tests__/useSuspenseQuery.test-d.tsx index 310d2a4924..53adae9066 100644 --- a/packages/preact-query/src/__tests__/useSuspenseQuery.test-d.tsx +++ b/packages/preact-query/src/__tests__/useSuspenseQuery.test-d.tsx @@ -1,4 +1,5 @@ import { skipToken } from '@tanstack/query-core' +import { queryKey } from '@tanstack/query-test-utils' import { assertType, describe, expectTypeOf, it } from 'vitest' import { useSuspenseQuery } from '../useSuspenseQuery' @@ -6,7 +7,7 @@ import { useSuspenseQuery } from '../useSuspenseQuery' describe('useSuspenseQuery', () => { it('should always have data defined', () => { const { data } = useSuspenseQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(5), }) @@ -15,7 +16,7 @@ describe('useSuspenseQuery', () => { it('should not have pending status', () => { const { status } = useSuspenseQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(5), }) @@ -25,14 +26,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), }), @@ -42,7 +43,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, @@ -51,7 +52,7 @@ describe('useSuspenseQuery', () => { ) assertType( useSuspenseQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(5), // @ts-expect-error TS2345 enabled: true, @@ -59,7 +60,7 @@ describe('useSuspenseQuery', () => { ) assertType( useSuspenseQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(5), // @ts-expect-error TS2345 throwOnError: true, @@ -70,7 +71,7 @@ describe('useSuspenseQuery', () => { it('should not return isPlaceholderData', () => { expectTypeOf( useSuspenseQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(5), }), ).not.toHaveProperty('isPlaceholderData') @@ -78,7 +79,7 @@ describe('useSuspenseQuery', () => { it('should type-narrow the error field', () => { const query = useSuspenseQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(5), })