Apollo GraphQL Mutation 为列表中的每个项目单独加载

Question

我有待办事项列表：

item1
item2
item3

每个项目都有一个删除按钮，带有删除单个项目的突变。每个项目都有 loading 来自 deleteMutation

的微调器

问题：一旦我按下单个项目上的删除按钮，微调器就会为列表中的每个项目打开。

我知道这里的问题，但不知道如何正确解决。我们可以为列表的每个项目添加状态，以及打开微调器的逻辑。

但我正在寻找合适的解决方案。也许有办法知道，用什么参数调用了突变，我将添加简单的代码

todos.map(({ id, title }) => (
  <div>
    <p>{title}</p>
    <button onClick={() => deleteMutation({ variables: { id } })}>
      {loading && id === deletedId ? <Spinner color="white" size="sm" /> : Delete}
    </button>
  </div>
))

Answer 1

问题是 using/sharing 相同的变异实例，它的状态 - loading。下一个问题 - 同时删除两个项目可能是不可能的。

可能的解决方案：

如果每个项目都有自己的变异 - 使它成为一个组件（反应中的廉价抽象），在里面定义变异。当然有点多余 - 但适用于更复杂的项目或单独的操作。
...或者你必须使用一些标志（状态）f.e。 itemBeingDeleted 在调用突变（在 'onCompleted' 中清除）以阻止（禁用）其他项目删除按钮并在其中之一中显示加载之前。

Apollo GraphQL Mutation 为列表中的每个项目单独加载

Apollo GraphQL Mutation separate loading for every item in list

javascript

mutation

apollo

reactjs

graphql