reactjs - 如何在迭代数据数组时使用 react-query 中的 { useQuery }

Question

我正在尝试将 react-query 集成到我的 React 项目中。我有一个自定义 Hook - useBundles它从 GraphQl 端点获取数据，如下所示 -

function useBundles() {

  const { data, status, isSuccess } = useQuery(
    'SaleBundles',
    async () => await request(endpoint, gql`query {${saleQuery}}`),
  );

  return { data, status, isSuccess };
}

我在组件中像这样使用返回值 const { data, status, isSuccess } = useBundles();效果很好。

现在，我想做的是，对于 data 中的每一项我想调用另一个端点(这次是一个 REST 端点)，我有一个单独的异步函数，称为 getData(data: Array)它使用 async-await 从我的 REST 端点获取数据。

我可以调用 getData在 useBundles传递给它 data作为论据。但是因为 getData是异步的，需要使用 await用它(我不能，因为我不能将钩子(Hook)定义为异步)。

作为替代方案，我尝试不使用 getData在 useBundles但像这样使用 axios 直接调用端点 - data.forEach((item) => useQuery("some-unique-key", axios.get(<endpoint>)))

这给了我一个错误，说 useQuery不能在循环中使用。

我有点卡在这一点上如何继续。将不胜感激任何帮助。谢谢。

Answer 1

基本上有两种方法可以解决这个问题:

1. useQueries

useQueries 可以与固定数组一起使用，也可以与动态数组一起使用，因此:

useQueries(data.map(item => ...))

会起作用。它会给你一个查询结果数组。

1. 映射并创建组件

data.map(item => <Item {...item} />

然后，您可以在Item 组件中调用useQuery。

---

这两种方法都会产生并发请求，区别主要在于您可以访问响应数据的位置:使用 useQueries，您可以在根组件中访问所有这些数据。使用第二种方法，每个项目只能访问自己的数据。因此，这仅取决于您的需求/用例您更喜欢哪个版本。