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

Question

我有一个待办事项列表：项目1项目2项目3每个项目都有一个删除按钮，其中包含用于删除单个项目的突变。每个项目都有带有loadingfrom 的微调器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

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

可能的解决方案：

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

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