如何在 react-querie 的 useQuery 钩子的查询函数中满足 typescript

Question

我正在使用 react-query 中的 useQuery 钩子，当我尝试在查询函数中访问我的键时，即 useQuery 的第二个参数，我遇到了 typescript 的问题，它正在抱怨这个声明

const postId = queryKey[1].id as any

那个

Property 'id' does not exist on type 'string | { id: string | undefined; comments: boolean; }'.
  Property 'id' does not exist on type 'string'.ts(2339)

一切正常，我在 postId 中定义了一个，请求被发送到服务器，我得到了回复，问题出在打字稿上，我什至尝试断言类型但没有工作

  const { data } = useQuery(['post', { id: post?.id, comments: true }], async ({ queryKey }) => {
    const postId = queryKey[1].id as any
     const { data } = await axios.get(`/post/${postId}`, {
       headers: {
         Authorization: `Bearer ${user?.idToken}`,
       },
     })
     return data
  })

有什么打字稿方法可以解决这个问题吗？

Answer 1

queryKey 的类型在 react-query 中流传得很好，但是你必须给你的键一个明确的类型。如果你这样做：

['post', { id: post?.id, comments: true }]

Typescript 将尝试推断出最好的东西，即字符串或对象数组。就 Typescript 而言，每个位置都可以有一个字符串或一个对象，所以你不能那样访问第二个元素。您需要为您的密钥提供更具体的类型。最简单的方法是使用 const 断言：

['post', { id: post?.id, comments: true }] as const

这样，typescript 将推断出一个只读的 Tulpe，其中第一个元素是一个字符串，第二个元素是一个对象。这样，您的访问应该就可以正常工作了。

如何在 react-querie 的 useQuery 钩子的查询函数中满足 typescript

how to satisfy typescript in query function of react-querie's useQuery hook

typescript

reactjs

react-query