javascript - 从列表中删除记录，Apollo GraphQL Optimistic UI Mutation

Question

我正在寻找一种让乐观的用户界面从列表中删除项目的方法。

列表的查询是:

myQuery{
 Foo:{
  Bar:{
    id
 }
}

删除突变:

mutation deleteBar(input: barInput!){
 deleteBarItem: (responds Boolean for success)
}

如何构造 optimisticResponse？

deleteBarItem({
 variables:{
  barInput:{
   id: idToBeDeleted
  }
 },
optimisticResponse:{
  ?????
},
update: (cache, { data}) => { ...manipulate the list in cache}
})

Answer 1

Here's a Medium article以一个示例说明如何使用 OptimisticResponse 从列表中删除项目。

查看您的架构会很有帮助，但这里有一个来自 a toy to-do app 的工作示例我使用 OptimisticResponse 进行构建，用于从列表中删除项目:

optimisticResponse: {
  __typename: "Mutation",
  deleteResolution: {
    __typename: "Resolution",
    _id
  }
}

您可以通过在开发控制台中将您的网络速度设置为慢 3G 并确保该项目仍然立即被删除来验证您的 OptimisticResponse 是否正常工作。

旁注 - 您可以在更新函数中使用过滤器而不是 bool 值来干净地创建一个新数组并删除项目。以下是我在上面链接的待办事项应用程序中执行此操作的方法，其中 _id 是作为 Prop 传递给 DeleteResolution 组件的要删除的项目的 ID:

resolutions = resolutions.filter(
  resolution => resolution._id !== _id
);