从列表中删除记录，Apollo GraphQL Optimistic UI Mutation答案

【问题标题】：Deleting Record from List, Apollo GraphQL Optimistic UI Mutation从列表中删除记录，Apollo GraphQL Optimistic UI Mutation
【发布时间】：2019-02-25 05:08:15
【问题描述】：

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

列表的查询是：

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}
})

【问题讨论】：

example

标签： javascript reactjs graphql apollo

【解决方案1】：

感谢 xadm 在 cmets 中提供示例以供参考

deleteBarItem({
 variables:{
  barInput:{
   id: idToBeDeleted
  }
 },
optimisticResponse:{
  deleteBarItem: true,
  foo:{
   id: idToBeDeleted,
   __typename: "Bar"
  }
},
update: (cache, { data}) => { ...manipulate the list in cache}
})

几个关键点。

缓存：使用 __typename 和 id 来引用对象。使用乐观 ui 来“删除”和 Item，您需要使用没有其他相关信息的对象设置缓存。

更新：此功能运行两次。一次是乐观的结果，然后是突变回来的时候。在我返回布尔值的突变示例中，我根据该布尔值向列表中添加了一个过滤器，以从列表中删除已删除的项目或使其保持原样。

【讨论】：

【解决方案2】：

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

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

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

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

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

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

【讨论】：