TypeScript

const { data } = useQuery({
  //    ^? const data: Ref<number> | Ref<undefined>
  queryKey: ['test'],
  queryFn: () => Promise.resolve(5),
})

TypeScript 플레이그라운드

const { data } = useQuery({
  //      ^? const data: Ref<string> | Ref<undefined>
  queryKey: ['test'],
  queryFn: () => Promise.resolve(5),
  select: (data) => data.toString(),
})

TypeScript 플레이그라운드

const fetchGroups = (): Promise<Group[]> =>
  axios.get('/groups').then((response) => response.data)

const { data } = useQuery({ queryKey: ['groups'], queryFn: fetchGroups })
//      ^? const data: Ref<Group[]> | Ref<undefined>

TypeScript 플레이그라운드

const { data, isSuccess } = reactive(
  useQuery({
    queryKey: ['test'],
    queryFn: () => Promise.resolve(5),
  }),
)

if (isSuccess) {
  data
  // ^? const data: number
}

TypeScript 플레이그라운드

이 기능을 가능하게 하는 것은 reactive() 래퍼입니다. 이 래퍼는 결과를 다음 형태로 평탄화합니다 일반 값이므로 isSuccess와 data는 동일한 판별 유니온의 일부로 유지됩니다 유니온입니다. useQuery()를 직접 구조 분해하면 독립적인 ref를 얻게 되며, TypeScript는 한 ref에서 다른 ref로 타입 좁히기를 전달할 수 없습니다 — if (isSuccess.value) data.value를 Group[] | undefined로 유지합니다. reactive() 없이 범위를 좁힙니다 값 ref 자체:

const { data } = useQuery({ queryKey: ['groups'], queryFn: fetchGroups })

if (data.value !== undefined) {
  data.value
  // ^? const data: Group[]
}

const { error } = useQuery({ queryKey: ['groups'], queryFn: fetchGroups })
//      ^? const error: Ref<unknown>

if (error.value instanceof Error) {
  error.value
  //     ^? const error: Error
}

TypeScript 플레이그라운드

import '@tanstack/vue-query'

declare module '@tanstack/vue-query' {
  interface Register {
    // Use unknown so call sites must narrow explicitly.
    defaultError: unknown
  }
}

const { error } = useQuery({ queryKey: ['groups'], queryFn: fetchGroups })
//      ^? const error: unknown | null