fix(vue-query/queryClient): infer the data and error types of 'getQueryState' from a tagged query key (#11921)

* fix(vue-query/queryClient): infer the data and error types of 'getQueryState' from a tagged query key

* docs(vue-query): regenerate reference docs for 'getQueryState' overloads

Author: sukvvon

.changeset/tidy-states-infer.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/vue-query': patch
+---
+
+fix(vue-query/queryClient): infer the data and error types of 'getQueryState' from a tagged query key

packages/vue-query/src/__tests__/queryClient.test-d.ts

@@ -1,7 +1,8 @@
 import { assertType, describe, expectTypeOf, it } from 'vitest'
+import { ref } from 'vue-demi'
 import { createKey } from '@tanstack/query-test-utils'
 import { QueryClient } from '../queryClient'
-import type { DataTag, InfiniteData } from '@tanstack/query-core'
+import type { DataTag, InfiniteData, QueryState } from '@tanstack/query-core'
 
 describe('getQueryData', () => {
   it('should be typed if key is tagged', () => {
@@ -36,6 +37,51 @@ describe('getQueryData', () => {
   })
 })
 
+describe('getQueryState', () => {
+  it('should be typed if key is tagged', () => {
+    const key = ['key'] as DataTag<Array<string>, number>
+    const queryClient = new QueryClient()
+    const state = queryClient.getQueryState(key)
+
+    expectTypeOf(state).toEqualTypeOf<QueryState<number, Error> | undefined>()
+  })
+
+  it('should be typed including error if key is tagged', () => {
+    type CustomError = Error & { customError: string }
+    const key = ['key'] as DataTag<Array<string>, number, CustomError>
+    const queryClient = new QueryClient()
+    const state = queryClient.getQueryState(key)
+
+    expectTypeOf(state).toEqualTypeOf<
+      QueryState<number, CustomError> | undefined
+    >()
+  })
+
+  it('should infer unknown if key is not tagged', () => {
+    const key = ['key'] as const
+    const queryClient = new QueryClient()
+    const state = queryClient.getQueryState(key)
+
+    expectTypeOf(state).toEqualTypeOf<QueryState<unknown, Error> | undefined>()
+  })
+
+  it('should infer passed generic if passed', () => {
+    const key = ['key'] as const
+    const queryClient = new QueryClient()
+    const state = queryClient.getQueryState<number>(key)
+
+    expectTypeOf(state).toEqualTypeOf<QueryState<number, Error> | undefined>()
+  })
+
+  it('should accept a ref key', () => {
+    const key = ref(['key'])
+    const queryClient = new QueryClient()
+    const state = queryClient.getQueryState<number>(key)
+
+    expectTypeOf(state).toEqualTypeOf<QueryState<number, Error> | undefined>()
+  })
+})
+
 describe('setQueryData', () => {
   it('should type updater if key is tagged', () => {
     const key = ['key'] as DataTag<Array<string>, number>

packages/vue-query/src/__tests__/queryOptions.test-d.ts

@@ -128,6 +128,19 @@ describe('queryOptions', () => {
     expectTypeOf(data).toEqualTypeOf<number | undefined>()
   })
 
+  it('should return the proper type when passed to getQueryState', () => {
+    const key = createKey()
+    const { queryKey: tagged } = queryOptions({
+      queryKey: key,
+      queryFn: () => Promise.resolve(5),
+    })
+
+    const queryClient = new QueryClient()
+    const state = queryClient.getQueryState(tagged)
+
+    expectTypeOf(state?.data).toEqualTypeOf<number | undefined>()
+  })
+
   it('should properly type updaterFn when passed to setQueryData', () => {
     const key = createKey()
     const { queryKey: tagged } = queryOptions({

packages/vue-query/src/queryClient.ts

@@ -14,6 +14,7 @@ import type {
   FetchInfiniteQueryOptions,
   FetchQueryOptions,
   InferDataFromTag,
+  InferErrorFromTag,
   InfiniteData,
   InfiniteQueryExecuteOptions,
   InvalidateOptions,
@@ -181,6 +182,18 @@ export class QueryClient extends QC {
     )
   }
 
+  override getQueryState<
+    TQueryFnData = unknown,
+    TError = DefaultError,
+    TTaggedQueryKey extends QueryKey = QueryKey,
+    TInferredQueryFnData = InferDataFromTag<TQueryFnData, TTaggedQueryKey>,
+    TInferredError = InferErrorFromTag<TError, TTaggedQueryKey>,
+  >(
+    queryKey: TTaggedQueryKey,
+  ): QueryState<TInferredQueryFnData, TInferredError> | undefined
+  override getQueryState<TData = unknown, TError = DefaultError>(
+    queryKey: MaybeRefDeep<QueryKey>,
+  ): QueryState<TData, TError> | undefined
   override getQueryState<TData = unknown, TError = DefaultError>(
     queryKey: MaybeRefDeep<QueryKey>,
   ): QueryState<TData, TError> | undefined {