Question

以下React组件是一种允许用户同时更新数百条记录的形式。为了维持服务器的可伸缩性，我决定遵循本文中的建议pLimit库，以限制命中服务器的并发请求数：What is the best way to limit concurrency when using ES6's Promise.all()?。

但是，我无法解决这两个错误：

与以前的渲染相比，渲染了更多的钩子
只能在函数组件的主体内部调用钩子

我尝试使用useMutation挂钩为每个记录调用变异。问题是我无法在pLimit Promise包装器的函数中使用useMutation钩子，除非该函数是组件。但是我不能让函数成为组件，否则会遇到上面的第二个错误。

所以我一直在努力寻找解决方案。

https://www.apollographql.com/docs/react/api/link/apollo-link-batch-http/#options
具有字典React状态，该状态通过并发调用受pLimit限制的updateIndividual逐渐更新。

import pLimit from 'p-limit'

function updateIndividual(x) {
  let [update, {called, loading, error}] = useMutation(UpdateMutation, {
    client: client,
    variables: {...},
  });
  update()
  let label = x.name + " ";
  label += loading ? "updating..." : error ? `error... ${error}` : called ? "updated" : "start";
  return label
}

export default function Form(props) {
  const [rows, setRows] = useState(props.data.reduce(function(map, val) {
    map[val] = undefined;  // { 'one': undefined, 'two': undefined...}
    return map;
  }, {}));

  const limit = pLimit(3);
  const promises = data?.map(x => {
    return limit(() => updateIndividual(x));
  });

  (async () => {
    setRows(await Promise.all(promises));
  })();

  return <div id='update-rows'>
  {rows.map((k, v) => (
    <div id={k}>{rows}</div>
  ))}
</div>
}

使用useMutation挂钩时，限制并发请求（Apollo客户端GraphQL）的最佳方法是什么？

0 个答案: