diff --git a/packages/svelte-query/tests/createQueries/createQueries.svelte.test.ts b/packages/svelte-query/tests/createQueries/createQueries.svelte.test.ts index 03df185c0bc..45a45c9664a 100644 --- a/packages/svelte-query/tests/createQueries/createQueries.svelte.test.ts +++ b/packages/svelte-query/tests/createQueries/createQueries.svelte.test.ts @@ -1,6 +1,6 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' import { render } from '@testing-library/svelte' -import { sleep } from '@tanstack/query-test-utils' +import { queryKey, sleep } from '@tanstack/query-test-utils' import { QueryClient, createQueries } from '../../src/index.js' import { promiseWithResolvers, withEffectRoot } from '../utils.svelte.js' import IsRestoringExample from './IsRestoringExample.svelte' @@ -22,8 +22,8 @@ describe('createQueries', () => { it( 'should return the correct states', withEffectRoot(async () => { - const key1 = ['test-1'] - const key2 = ['test-2'] + const key1 = queryKey() + const key2 = queryKey() const results: Array> = [] const { promise: promise1, resolve: resolve1 } = promiseWithResolvers() const { promise: promise2, resolve: resolve2 } = promiseWithResolvers() @@ -69,7 +69,7 @@ describe('createQueries', () => { it( 'should track results', withEffectRoot(async () => { - const key1 = ['test-track-results'] + const key1 = queryKey() const results: Array> = [] let count = 0 @@ -111,8 +111,8 @@ describe('createQueries', () => { it( 'should combine queries', withEffectRoot(async () => { - const key1 = ['test-combine-1'] - const key2 = ['test-combine-2'] + const key1 = queryKey() + const key2 = queryKey() const { promise: promise1, resolve: resolve1 } = promiseWithResolvers() @@ -169,8 +169,8 @@ describe('createQueries', () => { it( 'should track property access through combine function', withEffectRoot(async () => { - const key1 = ['test-track-combine-1'] - const key2 = ['test-track-combine-2'] + const key1 = queryKey() + const key2 = queryKey() let count = 0 const results: Array = [] diff --git a/packages/svelte-query/tests/createQueries/createQueries.test-d.ts b/packages/svelte-query/tests/createQueries/createQueries.test-d.ts index 44d099c81a2..53deefadea1 100644 --- a/packages/svelte-query/tests/createQueries/createQueries.test-d.ts +++ b/packages/svelte-query/tests/createQueries/createQueries.test-d.ts @@ -1,5 +1,6 @@ import { describe, expectTypeOf, it } from 'vitest' import { QueryClient } from '@tanstack/query-core' +import { queryKey } from '@tanstack/query-test-utils' import { createQueries, queryOptions } from '../../src/index.js' import type { CreateQueryOptions, @@ -12,17 +13,19 @@ import type { describe('createQueries', () => { it('should return correct data for dynamic queries with mixed result types', () => { + const key1 = queryKey() + const key2 = queryKey() const Queries1 = { get: () => queryOptions({ - queryKey: ['key1'], + queryKey: key1, queryFn: () => Promise.resolve(1), }), } const Queries2 = { get: () => queryOptions({ - queryKey: ['key2'], + queryKey: key2, queryFn: () => Promise.resolve(true), }), } @@ -42,9 +45,9 @@ describe('createQueries', () => { it('handles type parameter - tuple of tuples', () => { const queryClient = new QueryClient() - const key1 = ['test-key-1'] - const key2 = ['test-key-2'] - const key3 = ['test-key-3'] + const key1 = queryKey() + const key2 = queryKey() + const key3 = queryKey() const result1 = createQueries< [[number], [string], [Array, boolean]] @@ -157,9 +160,9 @@ describe('createQueries', () => { it('handles type parameter - tuple of objects', () => { const queryClient = new QueryClient() - const key1 = ['test-key-1'] - const key2 = ['test-key-2'] - const key3 = ['test-key-3'] + const key1 = queryKey() + const key2 = queryKey() + const key3 = queryKey() const result1 = createQueries< [ @@ -314,10 +317,10 @@ describe('createQueries', () => { it('handles array literal without type parameter to infer result type', () => { const queryClient = new QueryClient() - const key1 = ['test-key-1'] - const key2 = ['test-key-2'] - const key3 = ['test-key-3'] - const key4 = ['test-key-4'] + const key1 = queryKey() + const key2 = queryKey() + const key3 = queryKey() + const key4 = queryKey() // Array.map preserves TQueryFnData const result1 = createQueries( diff --git a/packages/svelte-query/tests/createQuery.svelte.test.ts b/packages/svelte-query/tests/createQuery.svelte.test.ts index d733970a158..b0cf6916086 100644 --- a/packages/svelte-query/tests/createQuery.svelte.test.ts +++ b/packages/svelte-query/tests/createQuery.svelte.test.ts @@ -8,7 +8,7 @@ import { it, vi, } from 'vitest' -import { sleep } from '@tanstack/query-test-utils' +import { queryKey, sleep } from '@tanstack/query-test-utils' import { QueryClient, createQuery, keepPreviousData } from '../src/index.js' import { promiseWithResolvers, withEffectRoot } from './utils.svelte.js' import type { CreateQueryResult, QueryCache } from '../src/index.js' @@ -31,11 +31,12 @@ describe('createQuery', () => { it( 'should return the correct states for a successful query', withEffectRoot(async () => { + const key = queryKey() const { promise, resolve } = promiseWithResolvers() const query = createQuery( () => ({ - queryKey: ['test'], + queryKey: key, queryFn: () => promise, }), () => queryClient, @@ -120,11 +121,12 @@ describe('createQuery', () => { it( 'should return the correct states for an unsuccessful query', withEffectRoot(async () => { + const key = queryKey() let count = 0 const states: Array = [] const query = createQuery( () => ({ - queryKey: ['test'], + queryKey: key, queryFn: () => { return Promise.reject(new Error('rejected #' + ++count)) }, @@ -231,7 +233,7 @@ describe('createQuery', () => { ) it('should set isFetchedAfterMount to true after a query has been fetched', async () => { - const key = ['test'] + const key = queryKey() await queryClient.prefetchQuery({ queryKey: key, @@ -271,7 +273,7 @@ describe('createQuery', () => { it( 'should not cancel an ongoing fetch when refetch is called with cancelRefetch=false if we have data already', withEffectRoot(async () => { - const key = ['test'] + const key = queryKey() let fetchCount = 0 const { promise, resolve } = promiseWithResolvers() @@ -302,7 +304,7 @@ describe('createQuery', () => { it( 'should cancel an ongoing fetch when refetch is called (cancelRefetch=true) if we have data already', withEffectRoot(async () => { - const key = ['test'] + const key = queryKey() let fetchCount = 0 const { promise, resolve } = promiseWithResolvers() @@ -334,7 +336,7 @@ describe('createQuery', () => { it( 'should not cancel an ongoing fetch when refetch is called (cancelRefetch=true) if we do not have data yet', withEffectRoot(async () => { - const key = ['test'] + const key = queryKey() let fetchCount = 0 const { promise, resolve } = promiseWithResolvers() @@ -365,7 +367,7 @@ describe('createQuery', () => { it( 'should be able to watch a query without providing a query function', withEffectRoot(async () => { - const key = ['test'] + const key = queryKey() const states: Array> = [] queryClient.setQueryDefaults(key, { @@ -391,6 +393,7 @@ describe('createQuery', () => { ) it('should pick up a query when re-mounting with gcTime 0', async () => { + const key = queryKey() // this needs to be split into two different effect roots because // effects won't pick up dependencies created after the first `await` // -- the two roots effectively emulate two consecutive components being rendered @@ -399,7 +402,7 @@ describe('createQuery', () => { const query = createQuery( () => ({ - queryKey: ['test'], + queryKey: key, queryFn: () => promise, gcTime: 0, notifyOnChangeProps: 'all', @@ -429,7 +432,7 @@ describe('createQuery', () => { const query = createQuery( () => ({ - queryKey: ['test'], + queryKey: key, queryFn: () => promise, gcTime: 0, notifyOnChangeProps: 'all', @@ -458,7 +461,7 @@ describe('createQuery', () => { }) it('should not get into an infinite loop when removing a query with gcTime 0 and rerendering', async () => { - const key = ['test'] + const key = queryKey() const states: Array> = [] // First mount: render the query and let it fetch @@ -532,7 +535,7 @@ describe('createQuery', () => { it( 'should fetch when refetchOnMount is false and nothing has been fetched yet', withEffectRoot(async () => { - const key = ['test'] + const key = queryKey() const states: Array> = [] const query = createQuery( @@ -560,7 +563,7 @@ describe('createQuery', () => { it( 'should not fetch when refetchOnMount is false and data has been fetched already', withEffectRoot(async () => { - const key = ['test'] + const key = queryKey() const states: Array> = [] queryClient.setQueryData(key, 'prefetched') @@ -589,7 +592,7 @@ describe('createQuery', () => { it( 'should be able to select a part of the data with select', withEffectRoot(async () => { - const key = ['test'] + const key = queryKey() const states: Array> = [] const query = createQuery<{ name: string }, Error, string>( @@ -617,7 +620,7 @@ describe('createQuery', () => { it( 'should throw an error when a selector throws', withEffectRoot(async () => { - const key = ['test'] + const key = queryKey() const error = new Error('Select Error') const states: Array> = [] @@ -648,7 +651,7 @@ describe('createQuery', () => { it( 'should be able to remove a query', withEffectRoot(async () => { - const key = ['test'] + const key = queryKey() const states: Array> = [] let count = 0 const query = createQuery( @@ -692,12 +695,13 @@ describe('createQuery', () => { it( 'keeps up-to-date with query key changes', withEffectRoot(async () => { + const key = queryKey() let search = $state('') const states: Array> = [] const query = createQuery( () => ({ - queryKey: ['products', search], + queryKey: [...key, search], queryFn: async () => Promise.resolve(search), placeholderData: keepPreviousData, }), @@ -741,7 +745,7 @@ describe('createQuery', () => { it( 'should create a new query when refetching a removed query', withEffectRoot(async () => { - const key = ['test'] + const key = queryKey() const states: Array> = [] let count = 0 @@ -780,7 +784,7 @@ describe('createQuery', () => { it( 'should share equal data structures between query results', withEffectRoot(async () => { - const key = ['test'] + const key = queryKey() const result1 = [ { id: '1', done: false }, @@ -838,7 +842,7 @@ describe('createQuery', () => { it( 'should use query function from hook when the existing query does not have a query function', withEffectRoot(async () => { - const key = ['test'] + const key = queryKey() queryClient.setQueryData(key, 'set') @@ -863,7 +867,7 @@ describe('createQuery', () => { it( 'should update query stale state and refetch when invalidated with invalidateQueries', withEffectRoot(async () => { - const key = ['test'] + const key = queryKey() let count = 0 const query = createQuery( @@ -898,7 +902,7 @@ describe('createQuery', () => { it( 'should not update disabled query when refetching with refetchQueries', withEffectRoot(async () => { - const key = ['test'] + const key = queryKey() const states: Array> = [] let count = 0 @@ -930,7 +934,7 @@ describe('createQuery', () => { it( 'should not refetch disabled query when invalidated with invalidateQueries', withEffectRoot(async () => { - const key = ['test-key'] + const key = queryKey() const states: Array> = [] let count = 0 @@ -965,13 +969,13 @@ describe('createQuery', () => { it( 'should not fetch when switching to a disabled query', withEffectRoot(async () => { - const key = ['test-key'] + const key = queryKey() const states: Array> = [] let count = $state(0) const query = createQuery( () => ({ - queryKey: [key, count], + queryKey: [...key, count], queryFn: () => Promise.resolve(count), enabled: count === 0, }), @@ -1010,13 +1014,13 @@ describe('createQuery', () => { it( 'should keep the previous data when placeholderData is set', withEffectRoot(async () => { - const key = ['test-key'] + const key = queryKey() const states: Array> = [] let count = $state(0) const query = createQuery( () => ({ - queryKey: [key, count], + queryKey: [...key, count], queryFn: () => Promise.resolve(count), placeholderData: keepPreviousData, }), @@ -1072,13 +1076,13 @@ describe('createQuery', () => { it( 'should not show initial data from next query if placeholderData is set', withEffectRoot(async () => { - const key = ['test-key'] + const key = queryKey() const states: Array> = [] let count = $state(0) const query = createQuery( () => ({ - queryKey: [key, count], + queryKey: [...key, count], queryFn: () => Promise.resolve(count), initialData: 99, placeholderData: keepPreviousData, @@ -1138,17 +1142,17 @@ describe('createQuery', () => { it( 'should keep the previous data on disabled query when placeholderData is set and switching query key multiple times', withEffectRoot(async () => { - const key = ['test-key'] + const key = queryKey() const states: Array> = [] // Set initial query data - queryClient.setQueryData([key, 10], 10) + queryClient.setQueryData([...key, 10], 10) let count = $state(10) const query = createQuery( () => ({ - queryKey: [key, count], + queryKey: [...key, count], queryFn: () => Promise.resolve(count), enabled: false, placeholderData: keepPreviousData, @@ -1211,7 +1215,7 @@ describe('createQuery', () => { it( 'should use the correct query function when components use different configurations', withEffectRoot(async () => { - const key = ['test-key'] + const key = queryKey() const states: Array> = [] const { promise, resolve } = promiseWithResolvers() @@ -1268,7 +1272,7 @@ describe('createQuery', () => { ) it('should be able to set different stale times for a query', async () => { - const key = ['test-key'] + const key = queryKey() const states1: Array> = [] const states2: Array> = [] @@ -1362,7 +1366,7 @@ describe('createQuery', () => { it( 'should re-render when a query becomes stale', withEffectRoot(async () => { - const key = ['test-key'] + const key = queryKey() const states: Array> = [] const query = createQuery( @@ -1391,7 +1395,7 @@ describe('createQuery', () => { it( 'should not re-render when it should only re-render on data changes and the data did not change', withEffectRoot(async () => { - const key = ['test-key'] + const key = queryKey() const states: Array> = [] const { promise, resolve } = promiseWithResolvers() @@ -1434,7 +1438,7 @@ describe('createQuery', () => { it( 'should track properties and only re-render when a tracked property changes', withEffectRoot(async () => { - const key = ['test-key'] + const key = queryKey() const states: Array = [] const { promise, resolve } = promiseWithResolvers() @@ -1477,7 +1481,7 @@ describe('createQuery', () => { it( 'should always re-render if we are tracking props but not using any', withEffectRoot(async () => { - const key = ['test-key'] + const key = queryKey() let renderCount = 0 const states: Array> = [] @@ -1513,7 +1517,7 @@ describe('createQuery', () => { it( 'should update query options', withEffectRoot(() => { - const key = ['test-key'] + const key = queryKey() const queryFn = () => sleep(10).then(() => 'data1') @@ -1536,8 +1540,8 @@ describe('createQuery', () => { it( 'should start with status pending, fetchStatus idle if enabled is false', withEffectRoot(async () => { - const key1 = ['test-key-1'] - const key2 = ['test-key-2'] + const key1 = queryKey() + const key2 = queryKey() const states1: Array> = [] const states2: Array> = [] @@ -1584,7 +1588,7 @@ describe('createQuery', () => { it( 'should be in "pending" state by default', withEffectRoot(() => { - const key = ['test-key'] + const key = queryKey() const query = createQuery( () => ({ @@ -1601,7 +1605,7 @@ describe('createQuery', () => { it( 'should not refetch query on focus when `enabled` is set to `false`', withEffectRoot(async () => { - const key = ['test-key'] + const key = queryKey() const queryFn = vi.fn().mockReturnValue('data') const query = createQuery( @@ -1633,7 +1637,7 @@ describe('createQuery', () => { it( 'should not refetch stale query on focus when `refetchOnWindowFocus` is set to `false`', withEffectRoot(async () => { - const key = ['test-key'] + const key = queryKey() const states: Array> = [] let count = 0 @@ -1674,7 +1678,7 @@ describe('createQuery', () => { it( 'should not refetch stale query on focus when `refetchOnWindowFocus` is set to a function that returns `false`', withEffectRoot(async () => { - const key = ['test-key'] + const key = queryKey() const states: Array> = [] let count = 0 @@ -1715,7 +1719,7 @@ describe('createQuery', () => { it( 'should not refetch fresh query on focus when `refetchOnWindowFocus` is set to `true`', withEffectRoot(async () => { - const key = ['test-key'] + const key = queryKey() const states: Array> = [] let count = 0 @@ -1754,7 +1758,7 @@ describe('createQuery', () => { ) it('should refetch fresh query when refetchOnMount is set to always', async () => { - const key = ['test-key'] + const key = queryKey() const states: Array> = [] // Prefetch the query @@ -1798,7 +1802,7 @@ describe('createQuery', () => { }) it('should refetch stale query when refetchOnMount is set to true', async () => { - const key = ['test-key'] + const key = queryKey() const states: Array> = [] // Prefetch the query @@ -1844,7 +1848,7 @@ describe('createQuery', () => { it( 'should set status to error if queryFn throws', withEffectRoot(async () => { - const key = ['test-key'] // Declare key variable + const key = queryKey() const consoleMock = vi .spyOn(console, 'error') .mockImplementation(() => undefined) @@ -1869,7 +1873,7 @@ describe('createQuery', () => { it( 'should set status to error instead of throwing when error should not be thrown', withEffectRoot(async () => { - const key = ['test-key'] // Declare key variable + const key = queryKey() const query = createQuery( () => ({ @@ -1895,7 +1899,7 @@ describe('createQuery', () => { let currentClient = $state(queryClient1) - const key = ['test'] + const key = queryKey() createQuery( () => ({ diff --git a/packages/svelte-query/tests/createQuery.test-d.ts b/packages/svelte-query/tests/createQuery.test-d.ts index 2f25052463d..55115db6665 100644 --- a/packages/svelte-query/tests/createQuery.test-d.ts +++ b/packages/svelte-query/tests/createQuery.test-d.ts @@ -1,12 +1,14 @@ import { describe, expectTypeOf, it } from 'vitest' +import { queryKey } from '@tanstack/query-test-utils' import { createQuery, queryOptions } from '../src/index.js' describe('createQuery', () => { describe('initialData', () => { describe('Config object overload', () => { it('TData should always be defined when initialData is provided as an object', () => { + const key = queryKey() const { data } = createQuery(() => ({ - queryKey: ['key'], + queryKey: key, queryFn: () => ({ wow: true }), initialData: { wow: true }, })) @@ -15,8 +17,9 @@ describe('createQuery', () => { }) it('TData should be defined when passed through queryOptions', () => { + const key = queryKey() const options = queryOptions({ - queryKey: ['key'], + queryKey: key, queryFn: () => ({ wow: true }), initialData: { wow: true }, }) @@ -26,8 +29,9 @@ describe('createQuery', () => { }) it('TData should have undefined in the union when initialData is NOT provided', () => { + const key = queryKey() const { data } = createQuery(() => ({ - queryKey: ['key'], + queryKey: key, queryFn: () => ({ wow: true }), })) @@ -35,8 +39,9 @@ describe('createQuery', () => { }) it('TData should have undefined in the union when initialData is provided as a function which can return undefined', () => { + const key = queryKey() const { data } = createQuery(() => ({ - queryKey: ['key'], + queryKey: key, queryFn: () => ({ wow: true }), initialData: () => undefined as { wow: boolean } | undefined, })) @@ -47,8 +52,9 @@ describe('createQuery', () => { describe('Query key overload', () => { it('TData should always be defined when initialData is provided', () => { + const key = queryKey() const { data } = createQuery(() => ({ - queryKey: ['key'], + queryKey: key, queryFn: () => ({ wow: true }), initialData: { wow: true }, })) @@ -57,8 +63,9 @@ describe('createQuery', () => { }) it('TData should have undefined in the union when initialData is NOT provided', () => { + const key = queryKey() const { data } = createQuery(() => ({ - queryKey: ['key'], + queryKey: key, queryFn: () => ({ wow: true }), })) @@ -68,8 +75,9 @@ describe('createQuery', () => { describe('Query key and func', () => { it('TData should always be defined when initialData is provided', () => { + const key = queryKey() const { data } = createQuery(() => ({ - queryKey: ['key'], + queryKey: key, queryFn: () => ({ wow: true }), initialData: { wow: true }, })) @@ -78,8 +86,9 @@ describe('createQuery', () => { }) it('TData should have undefined in the union when initialData is NOT provided', () => { + const key = queryKey() const { data } = createQuery(() => ({ - queryKey: ['key'], + queryKey: key, queryFn: () => ({ wow: true }), })) diff --git a/packages/svelte-query/tests/infiniteQueryOptions.test-d.ts b/packages/svelte-query/tests/infiniteQueryOptions.test-d.ts index 4dc9d69bf42..38bd9fc6706 100644 --- a/packages/svelte-query/tests/infiniteQueryOptions.test-d.ts +++ b/packages/svelte-query/tests/infiniteQueryOptions.test-d.ts @@ -1,12 +1,14 @@ import { describe, expectTypeOf, test } from 'vitest' import { QueryClient } from '@tanstack/query-core' +import { queryKey } from '@tanstack/query-test-utils' import { createInfiniteQuery, infiniteQueryOptions } from '../src/index.js' import type { InfiniteData } from '@tanstack/query-core' describe('infiniteQueryOptions', () => { test('Should not allow excess properties', () => { + const key = queryKey() infiniteQueryOptions({ - queryKey: ['key'], + queryKey: key, queryFn: () => Promise.resolve('data'), getNextPageParam: () => 1, initialPageParam: 1, @@ -16,8 +18,9 @@ describe('infiniteQueryOptions', () => { }) test('Should infer types for callbacks', () => { + const key = queryKey() infiniteQueryOptions({ - queryKey: ['key'], + queryKey: key, queryFn: () => Promise.resolve('data'), staleTime: 1000, getNextPageParam: () => 1, @@ -29,8 +32,9 @@ describe('infiniteQueryOptions', () => { }) test('Should work when passed to createInfiniteQuery', () => { + const key = queryKey() const options = infiniteQueryOptions({ - queryKey: ['key'], + queryKey: key, queryFn: () => Promise.resolve('string'), getNextPageParam: () => 1, initialPageParam: 1, @@ -45,8 +49,9 @@ describe('infiniteQueryOptions', () => { }) test('Should work when passed to fetchInfiniteQuery', async () => { + const key = queryKey() const options = infiniteQueryOptions({ - queryKey: ['key'], + queryKey: key, queryFn: () => Promise.resolve('string'), getNextPageParam: () => 1, initialPageParam: 1, diff --git a/packages/svelte-query/tests/mutationOptions/mutationOptions.svelte.test.ts b/packages/svelte-query/tests/mutationOptions/mutationOptions.svelte.test.ts index b0443d6726f..5a1367fcaac 100644 --- a/packages/svelte-query/tests/mutationOptions/mutationOptions.svelte.test.ts +++ b/packages/svelte-query/tests/mutationOptions/mutationOptions.svelte.test.ts @@ -1,6 +1,6 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' import { fireEvent, render } from '@testing-library/svelte' -import { sleep } from '@tanstack/query-test-utils' +import { queryKey, sleep } from '@tanstack/query-test-utils' import { mutationOptions } from '../../src/index.js' import BaseExample from './BaseExample.svelte' import MultiExample from './MultiExample.svelte' @@ -32,8 +32,9 @@ describe('mutationOptions', () => { }) it('should return the number of fetching mutations when used with useIsMutating (with mutationKey in mutationOptions)', async () => { + const key = queryKey() const mutationOpts = mutationOptions({ - mutationKey: ['key'], + mutationKey: key, mutationFn: () => sleep(50).then(() => 'data'), }) @@ -69,8 +70,9 @@ describe('mutationOptions', () => { }) it('should return the number of fetching mutations when used with useIsMutating', async () => { + const key = queryKey() const mutationOpts1 = mutationOptions({ - mutationKey: ['key'], + mutationKey: key, mutationFn: () => sleep(50).then(() => 'data1'), }) const mutationOpts2 = mutationOptions({ @@ -95,8 +97,9 @@ describe('mutationOptions', () => { }) it('should return the number of fetching mutations when used with useIsMutating (filter mutationOpts1.mutationKey)', async () => { + const key = queryKey() const mutationOpts1 = mutationOptions({ - mutationKey: ['key'], + mutationKey: key, mutationFn: () => sleep(50).then(() => 'data1'), }) const mutationOpts2 = mutationOptions({ @@ -122,8 +125,9 @@ describe('mutationOptions', () => { }) it('should return the number of fetching mutations when used with queryClient.isMutating (with mutationKey in mutationOptions)', async () => { + const key = queryKey() const mutationOpts = mutationOptions({ - mutationKey: ['mutation'], + mutationKey: key, mutationFn: () => sleep(500).then(() => 'data'), }) @@ -162,8 +166,9 @@ describe('mutationOptions', () => { }) it('should return the number of fetching mutations when used with queryClient.isMutating', async () => { + const key = queryKey() const mutationOpts1 = mutationOptions({ - mutationKey: ['mutation'], + mutationKey: key, mutationFn: () => sleep(500).then(() => 'data1'), }) const mutationOpts2 = mutationOptions({ @@ -188,8 +193,9 @@ describe('mutationOptions', () => { }) it('should return the number of fetching mutations when used with queryClient.isMutating (filter mutationOpts1.mutationKey)', async () => { + const key = queryKey() const mutationOpts1 = mutationOptions({ - mutationKey: ['mutation'], + mutationKey: key, mutationFn: () => sleep(500).then(() => 'data1'), }) const mutationOpts2 = mutationOptions({ @@ -215,8 +221,9 @@ describe('mutationOptions', () => { }) it('should return mutation states when used with useMutationState (with mutationKey in mutationOptions)', async () => { + const key = queryKey() const mutationOpts = mutationOptions({ - mutationKey: ['mutation'], + mutationKey: key, mutationFn: () => sleep(10).then(() => 'data'), }) @@ -261,8 +268,9 @@ describe('mutationOptions', () => { }) it('should return mutation states when used with useMutationState', async () => { + const key = queryKey() const mutationOpts1 = mutationOptions({ - mutationKey: ['mutation'], + mutationKey: key, mutationFn: () => sleep(10).then(() => 'data1'), }) const mutationOpts2 = mutationOptions({ @@ -290,8 +298,9 @@ describe('mutationOptions', () => { }) it('should return mutation states when used with useMutationState (filter mutationOpts1.mutationKey)', async () => { + const key = queryKey() const mutationOpts1 = mutationOptions({ - mutationKey: ['mutation'], + mutationKey: key, mutationFn: () => sleep(10).then(() => 'data1'), }) const mutationOpts2 = mutationOptions({ diff --git a/packages/svelte-query/tests/mutationOptions/mutationOptions.test-d.ts b/packages/svelte-query/tests/mutationOptions/mutationOptions.test-d.ts index cbeddf921ba..94689b6bac7 100644 --- a/packages/svelte-query/tests/mutationOptions/mutationOptions.test-d.ts +++ b/packages/svelte-query/tests/mutationOptions/mutationOptions.test-d.ts @@ -1,5 +1,6 @@ import { assertType, describe, expectTypeOf, test } from 'vitest' import { QueryClient } from '@tanstack/query-core' +import { queryKey } from '@tanstack/query-test-utils' import { createMutation, mutationOptions, @@ -19,10 +20,12 @@ import type { describe('mutationOptions', () => { test('Should not allow excess properties', () => { + const key = queryKey() + // @ts-expect-error this is a good error, because onMutates does not exist! mutationOptions({ mutationFn: () => Promise.resolve(5), - mutationKey: ['key'], + mutationKey: key, onMutates: 1000, onSuccess: (data) => { expectTypeOf(data).toEqualTypeOf() @@ -31,9 +34,11 @@ describe('mutationOptions', () => { }) test('Should infer types for callbacks', () => { + const key = queryKey() + mutationOptions({ mutationFn: () => Promise.resolve(5), - mutationKey: ['key'], + mutationKey: key, onSuccess: (data) => { expectTypeOf(data).toEqualTypeOf() }, @@ -41,11 +46,13 @@ describe('mutationOptions', () => { }) test('Should infer types for onError callback', () => { + const key = queryKey() + mutationOptions({ mutationFn: () => { throw new Error('fail') }, - mutationKey: ['key'], + mutationKey: key, onError: (error) => { expectTypeOf(error).toEqualTypeOf() }, @@ -53,19 +60,23 @@ describe('mutationOptions', () => { }) test('Should infer types for variables', () => { + const key = queryKey() + mutationOptions({ mutationFn: (vars) => { expectTypeOf(vars).toEqualTypeOf<{ id: string }>() return Promise.resolve(5) }, - mutationKey: ['with-vars'], + mutationKey: key, }) }) test('Should infer result type correctly', () => { + const key = queryKey() + mutationOptions({ mutationFn: () => Promise.resolve(5), - mutationKey: ['key'], + mutationKey: key, onMutate: () => { return { name: 'onMutateResult' } }, @@ -76,12 +87,14 @@ describe('mutationOptions', () => { }) test('Should infer context type correctly', () => { + const key = queryKey() + mutationOptions({ mutationFn: (_variables, context) => { expectTypeOf(context).toEqualTypeOf() return Promise.resolve(5) }, - mutationKey: ['key'], + mutationKey: key, onMutate: (_variables, context) => { expectTypeOf(context).toEqualTypeOf() }, @@ -116,10 +129,12 @@ describe('mutationOptions', () => { }) test('Should infer all types when not explicitly provided', () => { + const key = queryKey() + expectTypeOf( mutationOptions({ mutationFn: (id: string) => Promise.resolve(id.length), - mutationKey: ['key'], + mutationKey: key, onSuccess: (data) => { expectTypeOf(data).toEqualTypeOf() }, @@ -143,9 +158,11 @@ describe('mutationOptions', () => { }) test('Should work when used with createMutation', () => { + const key = queryKey() + const mutation = createMutation(() => mutationOptions({ - mutationKey: ['key'], + mutationKey: key, mutationFn: () => Promise.resolve('data'), onSuccess: (data) => { expectTypeOf(data).toEqualTypeOf() @@ -168,9 +185,11 @@ describe('mutationOptions', () => { }) test('Should work when used with useIsMutating', () => { + const key = queryKey() + const isMutating = useIsMutating( mutationOptions({ - mutationKey: ['key'], + mutationKey: key, mutationFn: () => Promise.resolve(5), }), ) @@ -185,11 +204,12 @@ describe('mutationOptions', () => { }) test('Should work when used with queryClient.isMutating', () => { + const key = queryKey() const queryClient = new QueryClient() const isMutating = queryClient.isMutating( mutationOptions({ - mutationKey: ['key'], + mutationKey: key, mutationFn: () => Promise.resolve(5), }), ) @@ -204,9 +224,11 @@ describe('mutationOptions', () => { }) test('Should work when used with useMutationState', () => { + const key = queryKey() + const mutationState = useMutationState({ filters: mutationOptions({ - mutationKey: ['key'], + mutationKey: key, mutationFn: () => Promise.resolve(5), }), }) diff --git a/packages/svelte-query/tests/queryOptions.test-d.ts b/packages/svelte-query/tests/queryOptions.test-d.ts index d8036c3bbf5..968d05409ad 100644 --- a/packages/svelte-query/tests/queryOptions.test-d.ts +++ b/packages/svelte-query/tests/queryOptions.test-d.ts @@ -5,13 +5,15 @@ import { dataTagSymbol, skipToken, } from '@tanstack/query-core' +import { queryKey } from '@tanstack/query-test-utils' import { createQueries, queryOptions } from '../src/index.js' import type { QueryObserverResult } from '@tanstack/query-core' describe('queryOptions', () => { test('Should not allow excess properties', () => { + const key = queryKey() queryOptions({ - queryKey: ['key'], + queryKey: key, queryFn: () => Promise.resolve(5), // @ts-expect-error this is a good error, because stallTime does not exist! stallTime: 1000, @@ -19,8 +21,9 @@ describe('queryOptions', () => { }) test('Should infer types for callbacks', () => { + const key = queryKey() queryOptions({ - queryKey: ['key'], + queryKey: key, queryFn: () => Promise.resolve(5), staleTime: 1000, select: (data) => { @@ -30,8 +33,9 @@ describe('queryOptions', () => { }) test('Should work when passed to fetchQuery', async () => { + const key = queryKey() const options = queryOptions({ - queryKey: ['key'], + queryKey: key, queryFn: () => Promise.resolve(5), }) @@ -40,8 +44,9 @@ describe('queryOptions', () => { }) test('Should work when passed to createQueries', () => { + const key = queryKey() const options = queryOptions({ - queryKey: ['key'], + queryKey: key, queryFn: () => Promise.resolve(5), }) @@ -53,71 +58,78 @@ describe('queryOptions', () => { }) test('Should tag the queryKey with the result type of the QueryFn', () => { - const { queryKey } = queryOptions({ - queryKey: ['key'], + const key = queryKey() + const { queryKey: tagged } = queryOptions({ + queryKey: key, queryFn: () => Promise.resolve(5), }) - expectTypeOf(queryKey[dataTagSymbol]).toEqualTypeOf() + expectTypeOf(tagged[dataTagSymbol]).toEqualTypeOf() }) test('Should tag the queryKey even if no promise is returned', () => { - const { queryKey } = queryOptions({ - queryKey: ['key'], + const key = queryKey() + const { queryKey: tagged } = queryOptions({ + queryKey: key, queryFn: () => 5, }) - expectTypeOf(queryKey[dataTagSymbol]).toEqualTypeOf() + expectTypeOf(tagged[dataTagSymbol]).toEqualTypeOf() }) test('Should tag the queryKey with unknown if there is no queryFn', () => { - const { queryKey } = queryOptions({ - queryKey: ['key'], + const key = queryKey() + const { queryKey: tagged } = queryOptions({ + queryKey: key, }) - expectTypeOf(queryKey[dataTagSymbol]).toEqualTypeOf() + expectTypeOf(tagged[dataTagSymbol]).toEqualTypeOf() }) test('Should tag the queryKey with the result type of the QueryFn if select is used', () => { - const { queryKey } = queryOptions({ - queryKey: ['key'], + const key = queryKey() + const { queryKey: tagged } = queryOptions({ + queryKey: key, queryFn: () => Promise.resolve(5), select: (data) => data.toString(), }) - expectTypeOf(queryKey[dataTagSymbol]).toEqualTypeOf() + expectTypeOf(tagged[dataTagSymbol]).toEqualTypeOf() }) test('Should return the proper type when passed to getQueryData', () => { - const { queryKey } = queryOptions({ - queryKey: ['key'], + const key = queryKey() + const { queryKey: tagged } = queryOptions({ + queryKey: key, queryFn: () => Promise.resolve(5), }) const queryClient = new QueryClient() - const data = queryClient.getQueryData(queryKey) + const data = queryClient.getQueryData(tagged) expectTypeOf(data).toEqualTypeOf() }) test('Should return the proper type when passed to getQueryState', () => { - const { queryKey } = queryOptions({ - queryKey: ['key'], + const key = queryKey() + const { queryKey: tagged } = queryOptions({ + queryKey: key, queryFn: () => Promise.resolve(5), }) const queryClient = new QueryClient() - const state = queryClient.getQueryState(queryKey) + const state = queryClient.getQueryState(tagged) expectTypeOf(state?.data).toEqualTypeOf() }) test('Should properly type updaterFn when passed to setQueryData', () => { - const { queryKey } = queryOptions({ - queryKey: ['key'], + const key = queryKey() + const { queryKey: tagged } = queryOptions({ + queryKey: key, 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 }) @@ -125,25 +137,27 @@ describe('queryOptions', () => { }) test('Should properly type value when passed to setQueryData', () => { - const { queryKey } = queryOptions({ - queryKey: ['key'], + const key = queryKey() + const { queryKey: tagged } = queryOptions({ + queryKey: key, 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() }) test('Should infer even if there is a conditional skipToken', () => { + const key = queryKey() const options = queryOptions({ - queryKey: ['key'], + queryKey: key, queryFn: Math.random() > 0.5 ? skipToken : () => Promise.resolve(5), }) @@ -153,8 +167,9 @@ describe('queryOptions', () => { }) test('Should infer to unknown if we disable a query with just a skipToken', () => { + const key = queryKey() const options = queryOptions({ - queryKey: ['key'], + queryKey: key, queryFn: skipToken, }) @@ -164,8 +179,9 @@ describe('queryOptions', () => { }) test('Should return the proper type when passed to QueriesObserver', () => { + const key = queryKey() const options = queryOptions({ - queryKey: ['key'], + queryKey: key, queryFn: () => Promise.resolve(5), }) diff --git a/packages/svelte-query/tests/useMutationState/useMutationState.svelte.test.ts b/packages/svelte-query/tests/useMutationState/useMutationState.svelte.test.ts index 81a93d040b4..21609c1e7e5 100644 --- a/packages/svelte-query/tests/useMutationState/useMutationState.svelte.test.ts +++ b/packages/svelte-query/tests/useMutationState/useMutationState.svelte.test.ts @@ -1,6 +1,6 @@ import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest' import { fireEvent, render } from '@testing-library/svelte' -import { sleep } from '@tanstack/query-test-utils' +import { queryKey, sleep } from '@tanstack/query-test-utils' import BaseExample from './BaseExample.svelte' import SelectExample from './SelectExample.svelte' import type { Mutation } from '@tanstack/query-core' @@ -15,6 +15,8 @@ describe('useMutationState', () => { }) test('Run few mutation functions and check from useMutationState', async () => { + const successKey = queryKey() + const errorKey = queryKey() const successMutationFn = vi.fn(() => sleep(10).then(() => 'data')) const errorMutationFn = vi .fn() @@ -25,11 +27,11 @@ describe('useMutationState', () => { const rendered = render(BaseExample, { props: { successMutationOpts: () => ({ - mutationKey: ['success'], + mutationKey: successKey, mutationFn: successMutationFn, }), errorMutationOpts: () => ({ - mutationKey: ['error'], + mutationKey: errorKey, mutationFn: errorMutationFn, }), }, @@ -47,6 +49,8 @@ describe('useMutationState', () => { }) test('Can select specific type of mutation ( i.e: error only )', async () => { + const successKey = queryKey() + const errorKey = queryKey() const successMutationFn = vi.fn(() => sleep(10).then(() => 'data')) const errorMutationFn = vi .fn() @@ -57,11 +61,11 @@ describe('useMutationState', () => { const rendered = render(BaseExample, { props: { successMutationOpts: () => ({ - mutationKey: ['success'], + mutationKey: successKey, mutationFn: successMutationFn, }), errorMutationOpts: () => ({ - mutationKey: ['error'], + mutationKey: errorKey, mutationFn: errorMutationFn, }), mutationStateOpts: { @@ -82,7 +86,7 @@ describe('useMutationState', () => { }) test('should return selected value when using select option', async () => { - const mutationKey = ['select'] + const mutationKey = queryKey() const rendered = render(SelectExample, { props: { @@ -108,6 +112,8 @@ describe('useMutationState', () => { }) test('Can select specific mutation using mutation key', async () => { + const successKey = queryKey() + const errorKey = queryKey() const successMutationFn = vi.fn(() => sleep(10).then(() => 'data')) const errorMutationFn = vi .fn() @@ -118,15 +124,15 @@ describe('useMutationState', () => { const rendered = render(BaseExample, { props: { successMutationOpts: () => ({ - mutationKey: ['success'], + mutationKey: successKey, mutationFn: successMutationFn, }), errorMutationOpts: () => ({ - mutationKey: ['error'], + mutationKey: errorKey, mutationFn: errorMutationFn, }), mutationStateOpts: { - filters: { mutationKey: ['success'] }, + filters: { mutationKey: successKey }, }, }, })