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

问题是使用/共享相同的突变实例，它的状态 -&nbsp;loading。下一个问题 - 同时删除两个项目可能是不可能的。可能的解决方案：如果每个项目都有自己的突变 - 使其成为一个组件（反应中的廉价抽象），在内部定义突变。当然有点多余 - 但适合更复杂的项目或单独的操作。...或者您必须itemBeingDeleted在调用突变（在“onCompleted”中清除）之前使用一些标志（状态）fe 来阻止（禁用）其他项目删除按钮并在其中之一中显示加载。