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

Question

当我们从 useQuery 钩子中获取数据时，我需要先将数据解析为特定类型 return 给用户。我想要来自 useQuery 挂钩的 return 的数据应该是“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')
  }
)

Answer 1

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

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

在需要这些数据的地方，您可以调用 const parsedData = useParseData()

Answer 2

我将从 api 获取响应并将其转换到 queryFn 中，然后再 return 将其转换为 react-query。无论您 return 在查询缓存中出现什么，所以：

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

data return 从 useQuery 编辑应该是 MyType[] | undefined

类型

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

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

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

How to get data from react query "useQuery" hook in a specific type

react-query