diff --git a/.changeset/vue-query-generic-querykey-inference.md b/.changeset/vue-query-generic-querykey-inference.md new file mode 100644 index 00000000000..5a24b50f6c6 --- /dev/null +++ b/.changeset/vue-query-generic-querykey-inference.md @@ -0,0 +1,5 @@ +--- +'@tanstack/vue-query': patch +--- + +fix(vue-query): preserve `TQueryKey` inference when wrapping `useQuery` in a composable with a generic param diff --git a/packages/vue-query/src/__tests__/useQuery.test-d.ts b/packages/vue-query/src/__tests__/useQuery.test-d.ts index be9013e222b..7bb8cd8407b 100644 --- a/packages/vue-query/src/__tests__/useQuery.test-d.ts +++ b/packages/vue-query/src/__tests__/useQuery.test-d.ts @@ -1,8 +1,8 @@ -import { describe, expectTypeOf, it } from 'vitest' +import { assertType, describe, expectTypeOf, it } from 'vitest' import { computed, reactive, ref } from 'vue-demi' import { queryKey, sleep } from '@tanstack/query-test-utils' import { queryOptions, useQuery } from '..' -import type { OmitKeyof, UseQueryOptions } from '..' +import type { OmitKeyof, UseQueryOptions, UseQueryReturnType } from '..' describe('useQuery', () => { describe('Config object overload', () => { @@ -152,6 +152,29 @@ describe('useQuery', () => { }) }) + describe('generic queryKey inference (#8199)', () => { + it('should not error when wrapping useQuery in a composable that propagates a generic type to the queryKey', () => { + const basket = { fruit: 'apple', vegetable: 'broccoli' } as const + + function getBasket(type: T) { + return basket[type] + } + + function useBasket(type: T) { + return useQuery({ + queryKey: ['basket', type] as const, + queryFn({ queryKey: [, t] }) { + return getBasket(t) + }, + }) + } + + assertType>( + useBasket('fruit'), + ) + }) + }) + describe('custom composable', () => { it('should allow custom composable using UseQueryOptions', () => { const key = queryKey() diff --git a/packages/vue-query/src/useQuery.ts b/packages/vue-query/src/useQuery.ts index 116e91baefe..bab7f7119e7 100644 --- a/packages/vue-query/src/useQuery.ts +++ b/packages/vue-query/src/useQuery.ts @@ -42,15 +42,25 @@ export type UseQueryOptions< TQueryData, DeepUnwrapRef >) - : MaybeRefDeep< - QueryObserverOptions< - TQueryFnData, - TError, - TData, - TQueryData, - DeepUnwrapRef - >[Property] - > + : Property extends 'queryKey' + ? MaybeRef< + QueryObserverOptions< + TQueryFnData, + TError, + TData, + TQueryData, + TQueryKey + >[Property] + > + : MaybeRefDeep< + QueryObserverOptions< + TQueryFnData, + TError, + TData, + TQueryData, + DeepUnwrapRef + >[Property] + > } & ShallowOption >