Typescript

React query 中的数据类型通常可以通过类型推断获得，因此在大多数情况下我们无需提供类型注解：

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

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

如果 queryFn 具有明确的返回值类型，那么 React Query 就可以自动推导出对应的数据类型。但是绝大多数请求库(例如：axios)默认返回any，在这种情况下，我们需要在queryFn中明确指定其返回值类型：

const fetchData = (): Promise<{ list: Array<string> }> => {
    return fetch("http://localhost:8000/api/get").then(res => res.json())
}

const { data } = useQuery({ queryKey: ["test"], queryFn: fetchData })
//      ^ data: { list: Array<string> } | undefined

捕获错误

React Query中错误类型默认为unknown，这也符合 TypeScript 在 catch 子语句中提供的默认类型，请阅读 useUnknownInCatchVariables。因此安全的运行方式是error在执行时运行类型检查；另一种方式是显式定义data和error类型。

const { data, error } = useQuery({ queryKey: ["test"], queryFn: fetchData })

if(error instanceof Error){
    const message = error.message
}

const { data, error } = useQuery<{ Array<string>, Error }>({ queryKey: ["test"], queryFn: fetchData})