From 599e51d922db4c50eb4b05fcc9fed05cc59f59ef Mon Sep 17 00:00:00 2001 From: Wonsuk Choi Date: Mon, 20 Apr 2026 14:08:40 +0900 Subject: [PATCH] test(vue-query): replace hardcoded query keys with 'queryKey()' utility (#10524) --- .../__tests__/infiniteQueryOptions.test.ts | 3 ++- .../src/__tests__/queryOptions.test-d.ts | 14 +++++----- .../src/__tests__/queryOptions.test.ts | 3 ++- .../usePrefetchInfiniteQuery.test-d.ts | 17 ++++++------ .../usePrefetchInfiniteQuery.test.ts | 26 ++++++++++++------- .../src/__tests__/usePrefetchQuery.test-d.ts | 15 ++++++----- .../src/__tests__/usePrefetchQuery.test.ts | 25 +++++++++++------- .../src/__tests__/useQueries.test-d.ts | 4 +-- .../src/__tests__/useQuery.test-d.ts | 6 ++--- 9 files changed, 64 insertions(+), 49 deletions(-) diff --git a/packages/vue-query/src/__tests__/infiniteQueryOptions.test.ts b/packages/vue-query/src/__tests__/infiniteQueryOptions.test.ts index b00138d204b..334fa5ca4f6 100644 --- a/packages/vue-query/src/__tests__/infiniteQueryOptions.test.ts +++ b/packages/vue-query/src/__tests__/infiniteQueryOptions.test.ts @@ -1,10 +1,11 @@ import { describe, expect, it } from 'vitest' +import { queryKey } from '@tanstack/query-test-utils' import { infiniteQueryOptions } from '../infiniteQueryOptions' describe('infiniteQueryOptions', () => { it('should return the object received as a parameter without any modification.', () => { const object = { - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(5), getNextPageParam: () => null, initialPageParam: null, diff --git a/packages/vue-query/src/__tests__/queryOptions.test-d.ts b/packages/vue-query/src/__tests__/queryOptions.test-d.ts index 0b87e1dd204..481dd808fc5 100644 --- a/packages/vue-query/src/__tests__/queryOptions.test-d.ts +++ b/packages/vue-query/src/__tests__/queryOptions.test-d.ts @@ -123,7 +123,7 @@ describe('queryOptions', () => { const ref1 = ref(1) const ref2 = ref(2) const options = queryOptions(() => ({ - queryKey: ['key', ref1.value, { nested: ref2.value }], + queryKey: [...queryKey(), ref1.value, { nested: ref2.value }], queryFn: () => Promise.resolve(5), })) @@ -233,7 +233,7 @@ describe('queryOptions', () => { it('should allow accessing queryFn and other properties on the returned options object', () => { const options = queryOptions({ - queryKey: ['groups'], + queryKey: queryKey(), queryFn: () => Promise.resolve([]), }) @@ -244,7 +244,7 @@ describe('queryOptions', () => { it('should allow accessing queryFn and other properties on the returned options when used with getter', () => { const options = queryOptions(() => ({ - queryKey: ['groups'], + queryKey: queryKey(), queryFn: () => Promise.resolve([]), })) @@ -259,7 +259,7 @@ describe('queryOptions', () => { // This was broken in #10452, fixed in #10458 const options = queryOptions({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(1), enabled, }) @@ -271,7 +271,7 @@ describe('queryOptions', () => { const enabled = ref(true) const options = queryOptions({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(1), enabled, }) @@ -281,7 +281,7 @@ describe('queryOptions', () => { it('should allow boolean as enabled property', () => { const options = queryOptions({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(1), enabled: true, }) @@ -291,7 +291,7 @@ describe('queryOptions', () => { it('should allow getter function as enabled property', () => { const options = queryOptions({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(1), enabled: () => true, }) diff --git a/packages/vue-query/src/__tests__/queryOptions.test.ts b/packages/vue-query/src/__tests__/queryOptions.test.ts index 4f5eb2963c1..a514de4a536 100644 --- a/packages/vue-query/src/__tests__/queryOptions.test.ts +++ b/packages/vue-query/src/__tests__/queryOptions.test.ts @@ -1,11 +1,12 @@ import { describe, expect, it } from 'vitest' +import { queryKey } from '@tanstack/query-test-utils' import { queryOptions } from '../queryOptions' import type { QueryOptions } from '../queryOptions' describe('queryOptions', () => { it('should return the object received as a parameter without any modification.', () => { const object: QueryOptions = { - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(5), } as const diff --git a/packages/vue-query/src/__tests__/usePrefetchInfiniteQuery.test-d.ts b/packages/vue-query/src/__tests__/usePrefetchInfiniteQuery.test-d.ts index 99dbb8db4ae..45fe98e1511 100644 --- a/packages/vue-query/src/__tests__/usePrefetchInfiniteQuery.test-d.ts +++ b/packages/vue-query/src/__tests__/usePrefetchInfiniteQuery.test-d.ts @@ -1,12 +1,13 @@ import { assertType, describe, expectTypeOf, it } from 'vitest' import { ref } from 'vue-demi' import { skipToken } from '@tanstack/query-core' +import { queryKey } from '@tanstack/query-test-utils' import { usePrefetchInfiniteQuery } from '..' describe('usePrefetchInfiniteQuery', () => { it('should return nothing', () => { const result = usePrefetchInfiniteQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(5), initialPageParam: 1, getNextPageParam: () => 1, @@ -19,7 +20,7 @@ describe('usePrefetchInfiniteQuery', () => { assertType( // @ts-expect-error TS2345 usePrefetchInfiniteQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(5), }), ) @@ -28,7 +29,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, @@ -39,7 +40,7 @@ describe('usePrefetchInfiniteQuery', () => { assertType( usePrefetchInfiniteQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(5), initialPageParam: 1, getNextPageParam: () => 1, @@ -50,7 +51,7 @@ describe('usePrefetchInfiniteQuery', () => { assertType( usePrefetchInfiniteQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(5), initialPageParam: 1, getNextPageParam: () => 1, @@ -63,7 +64,7 @@ describe('usePrefetchInfiniteQuery', () => { it('should accept refs in infinite query options', () => { assertType( usePrefetchInfiniteQuery({ - queryKey: ['key', ref('id')], + queryKey: [...queryKey(), ref('id')], queryFn: () => Promise.resolve(5), initialPageParam: ref(1), getNextPageParam: () => 1, @@ -75,7 +76,7 @@ describe('usePrefetchInfiniteQuery', () => { it('should not allow skipToken in queryFn', () => { assertType( usePrefetchInfiniteQuery({ - queryKey: ['key'], + queryKey: queryKey(), initialPageParam: 1, getNextPageParam: () => 1, // @ts-expect-error @@ -85,7 +86,7 @@ describe('usePrefetchInfiniteQuery', () => { assertType( usePrefetchInfiniteQuery({ - queryKey: ['key'], + queryKey: queryKey(), initialPageParam: 1, getNextPageParam: () => 1, // @ts-expect-error diff --git a/packages/vue-query/src/__tests__/usePrefetchInfiniteQuery.test.ts b/packages/vue-query/src/__tests__/usePrefetchInfiniteQuery.test.ts index 63a4486f39a..353030f9ae0 100644 --- a/packages/vue-query/src/__tests__/usePrefetchInfiniteQuery.test.ts +++ b/packages/vue-query/src/__tests__/usePrefetchInfiniteQuery.test.ts @@ -1,5 +1,6 @@ import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest' import { nextTick, ref } from 'vue-demi' +import { queryKey } from '@tanstack/query-test-utils' import { QueryClient } from '../queryClient' import { usePrefetchInfiniteQuery } from '../usePrefetchInfiniteQuery' @@ -22,9 +23,11 @@ describe('usePrefetchInfiniteQuery', () => { Promise.resolve({ data: 'prefetched', currentPage: 1 }), ) + const key = queryKey() + usePrefetchInfiniteQuery( { - queryKey: ['prefetch-infinite-query'], + queryKey: key, queryFn, initialPageParam: 1, getNextPageParam: () => undefined, @@ -34,7 +37,7 @@ describe('usePrefetchInfiniteQuery', () => { expect(prefetchInfiniteQuerySpy).toHaveBeenCalledTimes(1) expect(prefetchInfiniteQuerySpy).toHaveBeenCalledWith({ - queryKey: ['prefetch-infinite-query'], + queryKey: key, queryFn, initialPageParam: 1, getNextPageParam: expect.any(Function), @@ -51,14 +54,15 @@ describe('usePrefetchInfiniteQuery', () => { Promise.resolve({ data: 'prefetched', currentPage: 1 }), ) - queryClient.setQueryData(['prefetch-infinite-query-existing'], { + const key = queryKey() + queryClient.setQueryData(key, { pages: [{ data: 'existing', currentPage: 1 }], pageParams: [1], }) usePrefetchInfiniteQuery( { - queryKey: ['prefetch-infinite-query-existing'], + queryKey: key, queryFn, initialPageParam: 1, getNextPageParam: () => undefined, @@ -76,10 +80,11 @@ describe('usePrefetchInfiniteQuery', () => { 'prefetchInfiniteQuery', ) const nestedRef = ref('value') + const key = queryKey() usePrefetchInfiniteQuery( { - queryKey: ['prefetch-infinite-query-ref', nestedRef], + queryKey: [...key, nestedRef], queryFn: () => Promise.resolve({ data: 'prefetched', currentPage: 1 }), initialPageParam: 1, getNextPageParam: () => undefined, @@ -89,7 +94,7 @@ describe('usePrefetchInfiniteQuery', () => { expect(prefetchInfiniteQuerySpy).toHaveBeenCalledWith( expect.objectContaining({ - queryKey: ['prefetch-infinite-query-ref', 'value'], + queryKey: [...key, 'value'], }), ) }) @@ -101,10 +106,11 @@ describe('usePrefetchInfiniteQuery', () => { 'prefetchInfiniteQuery', ) const keyRef = ref('first') + const key = queryKey() usePrefetchInfiniteQuery( () => ({ - queryKey: ['prefetch-infinite-query-reactive', keyRef.value], + queryKey: [...key, keyRef.value], queryFn: () => Promise.resolve({ data: keyRef.value, currentPage: 1 }), initialPageParam: 1, getNextPageParam: () => undefined, @@ -115,7 +121,7 @@ describe('usePrefetchInfiniteQuery', () => { expect(prefetchInfiniteQuerySpy).toHaveBeenCalledTimes(1) expect(prefetchInfiniteQuerySpy).toHaveBeenLastCalledWith( expect.objectContaining({ - queryKey: ['prefetch-infinite-query-reactive', 'first'], + queryKey: [...key, 'first'], }), ) @@ -125,7 +131,7 @@ describe('usePrefetchInfiniteQuery', () => { expect(prefetchInfiniteQuerySpy).toHaveBeenCalledTimes(2) expect(prefetchInfiniteQuerySpy).toHaveBeenLastCalledWith( expect.objectContaining({ - queryKey: ['prefetch-infinite-query-reactive', 'second'], + queryKey: [...key, 'second'], }), ) }) @@ -137,7 +143,7 @@ describe('usePrefetchInfiniteQuery', () => { try { usePrefetchInfiniteQuery( { - queryKey: ['outside-scope-prefetch-infinite-query'], + queryKey: queryKey(), queryFn: () => Promise.resolve({ data: 'prefetched', currentPage: 1 }), initialPageParam: 1, diff --git a/packages/vue-query/src/__tests__/usePrefetchQuery.test-d.ts b/packages/vue-query/src/__tests__/usePrefetchQuery.test-d.ts index fd2f4cda1eb..85067bc94bb 100644 --- a/packages/vue-query/src/__tests__/usePrefetchQuery.test-d.ts +++ b/packages/vue-query/src/__tests__/usePrefetchQuery.test-d.ts @@ -1,12 +1,13 @@ import { assertType, describe, expectTypeOf, it } from 'vitest' import { ref } from 'vue-demi' import { skipToken } from '@tanstack/query-core' +import { queryKey } from '@tanstack/query-test-utils' import { usePrefetchQuery } from '..' describe('usePrefetchQuery', () => { it('should return nothing', () => { const result = usePrefetchQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(5), }) @@ -16,7 +17,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 TS2353 refetchInterval: 1000, @@ -25,7 +26,7 @@ describe('usePrefetchQuery', () => { assertType( usePrefetchQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(5), // @ts-expect-error TS2353 enabled: true, @@ -34,7 +35,7 @@ describe('usePrefetchQuery', () => { assertType( usePrefetchQuery({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(5), // @ts-expect-error TS2353 throwOnError: true, @@ -45,7 +46,7 @@ describe('usePrefetchQuery', () => { it('should accept refs in query options', () => { assertType( usePrefetchQuery({ - queryKey: ['key', ref('id')], + queryKey: [...queryKey(), ref('id')], queryFn: () => Promise.resolve(5), staleTime: ref(1000), }), @@ -55,7 +56,7 @@ describe('usePrefetchQuery', () => { it('should not allow skipToken in queryFn', () => { assertType( usePrefetchQuery({ - queryKey: ['key'], + queryKey: queryKey(), // @ts-expect-error queryFn: skipToken, }), @@ -63,7 +64,7 @@ describe('usePrefetchQuery', () => { assertType( usePrefetchQuery({ - queryKey: ['key'], + queryKey: queryKey(), // @ts-expect-error queryFn: Math.random() > 0.5 ? skipToken : () => Promise.resolve(5), }), diff --git a/packages/vue-query/src/__tests__/usePrefetchQuery.test.ts b/packages/vue-query/src/__tests__/usePrefetchQuery.test.ts index 996d853ef64..88274da0411 100644 --- a/packages/vue-query/src/__tests__/usePrefetchQuery.test.ts +++ b/packages/vue-query/src/__tests__/usePrefetchQuery.test.ts @@ -1,5 +1,6 @@ import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest' import { nextTick, ref } from 'vue-demi' +import { queryKey } from '@tanstack/query-test-utils' import { QueryClient } from '../queryClient' import { usePrefetchQuery } from '../usePrefetchQuery' @@ -16,10 +17,11 @@ describe('usePrefetchQuery', () => { const queryClient = new QueryClient() const prefetchQuerySpy = vi.spyOn(queryClient, 'prefetchQuery') const queryFn = vi.fn(() => Promise.resolve('prefetched')) + const key = queryKey() usePrefetchQuery( { - queryKey: ['prefetch-query'], + queryKey: key, queryFn, }, queryClient, @@ -27,7 +29,7 @@ describe('usePrefetchQuery', () => { expect(prefetchQuerySpy).toHaveBeenCalledTimes(1) expect(prefetchQuerySpy).toHaveBeenCalledWith({ - queryKey: ['prefetch-query'], + queryKey: key, queryFn, }) }) @@ -36,11 +38,12 @@ describe('usePrefetchQuery', () => { const queryClient = new QueryClient() const prefetchQuerySpy = vi.spyOn(queryClient, 'prefetchQuery') const queryFn = vi.fn(() => Promise.resolve('prefetched')) - queryClient.setQueryData(['prefetch-query-existing'], 'existing') + const key = queryKey() + queryClient.setQueryData(key, 'existing') usePrefetchQuery( { - queryKey: ['prefetch-query-existing'], + queryKey: key, queryFn, }, queryClient, @@ -53,10 +56,11 @@ describe('usePrefetchQuery', () => { const queryClient = new QueryClient() const prefetchQuerySpy = vi.spyOn(queryClient, 'prefetchQuery') const nestedRef = ref('value') + const key = queryKey() usePrefetchQuery( { - queryKey: ['prefetch-query-ref', nestedRef], + queryKey: [...key, nestedRef], queryFn: () => Promise.resolve('prefetched'), }, queryClient, @@ -64,7 +68,7 @@ describe('usePrefetchQuery', () => { expect(prefetchQuerySpy).toHaveBeenCalledWith( expect.objectContaining({ - queryKey: ['prefetch-query-ref', 'value'], + queryKey: [...key, 'value'], }), ) }) @@ -73,10 +77,11 @@ describe('usePrefetchQuery', () => { const queryClient = new QueryClient() const prefetchQuerySpy = vi.spyOn(queryClient, 'prefetchQuery') const keyRef = ref('first') + const key = queryKey() usePrefetchQuery( () => ({ - queryKey: ['prefetch-query-reactive', keyRef.value], + queryKey: [...key, keyRef.value], queryFn: () => Promise.resolve(keyRef.value), }), queryClient, @@ -84,7 +89,7 @@ describe('usePrefetchQuery', () => { expect(prefetchQuerySpy).toHaveBeenCalledTimes(1) expect(prefetchQuerySpy).toHaveBeenLastCalledWith({ - queryKey: ['prefetch-query-reactive', 'first'], + queryKey: [...key, 'first'], queryFn: expect.any(Function), }) @@ -93,7 +98,7 @@ describe('usePrefetchQuery', () => { expect(prefetchQuerySpy).toHaveBeenCalledTimes(2) expect(prefetchQuerySpy).toHaveBeenLastCalledWith({ - queryKey: ['prefetch-query-reactive', 'second'], + queryKey: [...key, 'second'], queryFn: expect.any(Function), }) }) @@ -105,7 +110,7 @@ describe('usePrefetchQuery', () => { try { usePrefetchQuery( { - queryKey: ['outside-scope-prefetch-query'], + queryKey: queryKey(), queryFn: () => Promise.resolve('prefetched'), }, new QueryClient(), diff --git a/packages/vue-query/src/__tests__/useQueries.test-d.ts b/packages/vue-query/src/__tests__/useQueries.test-d.ts index 09feb97e371..93566cb36ea 100644 --- a/packages/vue-query/src/__tests__/useQueries.test-d.ts +++ b/packages/vue-query/src/__tests__/useQueries.test-d.ts @@ -266,7 +266,7 @@ describe('UseQueries config object overload', () => { it('should infer correct data type from queryOptions without initialData in useQueries', () => { const options = queryOptions({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(5), }) @@ -277,7 +277,7 @@ describe('UseQueries config object overload', () => { it('should infer correct data type from queryOptions with select in useQueries', () => { const options = queryOptions({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => Promise.resolve(5), select: (data) => data.toString(), }) diff --git a/packages/vue-query/src/__tests__/useQuery.test-d.ts b/packages/vue-query/src/__tests__/useQuery.test-d.ts index 12dbb4a41cc..be9013e222b 100644 --- a/packages/vue-query/src/__tests__/useQuery.test-d.ts +++ b/packages/vue-query/src/__tests__/useQuery.test-d.ts @@ -271,7 +271,7 @@ describe('useQuery', () => { describe('accept ref options', () => { it('should accept ref options', () => { const options = ref({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => sleep(0).then(() => 'Some data'), }) @@ -284,7 +284,7 @@ describe('useQuery', () => { it('should accept computed options', () => { const options = computed(() => ({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => sleep(0).then(() => 'Some data'), })) @@ -298,7 +298,7 @@ describe('useQuery', () => { it('should accept computed query options', () => { const options = computed(() => queryOptions({ - queryKey: ['key'], + queryKey: queryKey(), queryFn: () => sleep(0).then(() => 'Some data'), }), )