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

Posted 2023-03-10

【中文标题】Apollo GraphQL Mutation 为列表中的每个项目单独加载

【英文标题】：Apollo GraphQL Mutation separate loading for every item in list

【发布时间】：2021-02-20 14:00:56

【问题描述】：

我有一份待办事项列表：

项目1 项目2 项目3

每个项目都有一个删除按钮，其中包含用于删除单个项目的突变。 每个项目都有来自deleteMutation的loading的微调器

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

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

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

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

【参考方案1】：

问题是使用/共享相同的突变实例，它的状态 - loading。下一个问题 - 同时删除两个项目可能是不可能的。

可能的解决方案：

如果每个项目都有自己的突变 - 使其成为一个组件（反应中的廉价抽象），在里面定义突变。当然有点多余 - 但适用于更复杂的项目或单独的操作。

... 或者您必须使用一些标志（状态）f.e. itemBeingDeleted 在调用突变之前（在 'onCompleted' 中清除）以阻止（禁用）其他项目删除按钮并在其中一个中显示加载。

【讨论】：

在单独的组件中移动项目逻辑可能是最好的解决方案！