如何从特定类型的反应查询“useQuery”挂钩中获取数据答案

【问题标题】：How to get data from react query "useQuery" hook in a specific type如何从特定类型的反应查询“useQuery”挂钩中获取数据
【发布时间】：2021-12-28 09:11:20
【问题描述】：

当我们从 useQuery 钩子获取数据时，我需要在返回给用户之前将数据解析为特定类型。我希望使用我在下面创建的解析函数从 useQuery 挂钩返回的数据应该是“MyType”。我找不到使用解析功能的方法。有什么办法吗？我不想依赖模式结构来获取数据类型。

type MyType = {
id: number;
//some more properties
}

function parseData(arr: any[]): MyType[]{
  return arr.map((obj, index)=>{
    return {
      id: arr.id,
      //some more properties
    }
  })
}

const {data} = await useQuery('fetchMyData', async ()=>{
    return await axios.get('https://fake-domain.com')
  }
)

【问题讨论】：

标签： react-query

【解决方案1】：

我会从 api 获取响应并在 queryFn 中对其进行转换，然后再将其返回给 react-query。无论您返回什么，都会在查询缓存中结束，所以：

const { data } = await useQuery('fetchMyData', async () => {
    const response = await axios.get('https://fake-domain.com')
    return parseData(response.data)
  }
)

从useQuery 返回的data 应该是MyType[] | undefined 类型

还有很多其他选项可以进行数据转换，我在这里写过它们：

https://tkdodo.eu/blog/react-query-data-transformations

【讨论】：

【解决方案2】：

我认为你应该创建自己的钩子并在那里执行规范化：

const useParseData = () => {
 const { data } = await useQuery('fetchMyData', async () => {
    return await axios.get('https://fake-domain.com')
 }
 
 return parseData(data)  
}

如果您需要这些数据，您可以拨打const parsedData = useParseData()

【讨论】：