如何在 forEach 中运行 useQuery？

Posted 2023-03-10

【中文标题】如何在 forEach 中运行 useQuery？

【英文标题】：How to run useQuery inside forEach?

【发布时间】：2020-07-04 21:33:12

【问题描述】：

我有循环 - forEach - 为数组的每个元素找到 productId。我想使用 apollo 查询按 productId 获取我的数据库。 怎么做？

products.forEach(( productId, quantity ) =>
    // fetch by 'productId'

);

【问题讨论】：

请注意，这可能表明您的 API 存在更大的问题。如果您已经从 API 获取产品列表，您应该能够只在该查询中请求产品详细信息，而不必为每个产品进行单独的额外查询。

我的应用是具有不同数据库的微服务。我认为这是问题

我有服务：api-gateway分类-app carts-service orders-service products-service users-service 上面这4个服务有不同的数据库。这就是对每个产品进行单独的附加查询的原因。但我不知道如何处理它。无论如何，谢谢你的回复。这真的对我有帮助！最美好的祝愿！

【参考方案1】：

来自the rules of hooks：

不要在循环、条件或嵌套函数中调用 Hooks。 相反，始终在 React 函数的顶层使用 Hooks。通过遵循此规则，您可以确保每次组件呈现时都以相同的顺序调用 Hook。

钩子不能在循环中使用，所以你不能在forEach回调中使用它们。

您应该为每个产品创建一个单独的组件，该组件只使用一次useQuery 挂钩。然后，您可以map 覆盖产品并返回每个产品的组件：

const YourComponent = () => 
  ...
  return products.map(( productId, quantity ) => (
    <Product key=productId productId=productId quantity=quantity />
  ))


const Product = () => 
  const  data, error, loading  = useQuery(...)
  // render your data accordingly

【讨论】：

谢谢！但我有疑问；）“单独的组件”这会是什么样子？我不知道

使用扩展示例更新问题

谢谢，我也遇到了同样的问题，你帮了我很多

【参考方案2】：

通过将 refetchOnWindowFocus 和 enable 属性设置为 false，然后调用方法 refetch，根据逻辑或手动 多次 运行 useQuery ()。示例如下。

const RefetchExample = () => 

const manualFetch = 
  refetchOnWindowFocus: false,
  enabled: false


const GetAssetImage = async () => 
  const data = await axiosInstance.get("Your API")
  return data


const assetImage, refetch = useQuery('assetImage', GetAssetImage, manualFetch)

const imageFetch = () => 
    refetch();

return (
   <Button onClick=imageFetch>Refetch</Button>
)


export default RefetchExample