Javascript 正在从列表中删除记录，Apollo GraphQL

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

该列表的查询是：

myQuery{
 Foo:{
  Bar:{
    id
 }
}

删除突变：

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

我如何构建乐观的回应

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

---

感谢xadm在参考评论中提供了一个示例

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

几个关键的注释

缓存：使用uuu typename和id引用对象。使用乐观用户界面“删除”和项，您需要使用没有其他相关信息的对象设置缓存。

---

更新：此函数运行两次。一次是乐观的结果，另一次是突变回来。在我的突变返回布尔值的例子中，我基于该布尔值向列表中添加了一个过滤器，以从列表中删除已删除的项或使其保持原样

感谢xadm在参考评论中提供了一个示例

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

几个关键的注释

缓存：使用uuu typename和id引用对象。使用乐观用户界面“删除”和项，您需要使用没有其他相关信息的对象设置缓存。

更新：此函数运行两次。一次是乐观的结果，另一次是突变回来。在我的突变返回布尔值的例子中，我基于该布尔值向列表中添加了一个过滤器，以从列表中删除已删除的项或使其保持原样

以一个示例说明如何使用OptimisticResponse从列表中删除项目

查看您的模式会很有帮助，但下面是我使用OptimisticResponse构建的一个工作示例，用于从列表中删除项目：

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

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

旁注-您可以在update函数中使用filter而不是boolean来干净地创建删除项的新数组。下面是我如何在上面链接的待办事项应用程序中执行此操作的，其中_id是作为道具传递到DeleteResolution组件的要删除的项目的id：

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

下面是一个如何使用OptimisticResponse从列表中删除项目的示例

查看您的模式会很有帮助，但下面是我使用OptimisticResponse构建的一个工作示例，用于从列表中删除项目：

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

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

旁注-您可以在update函数中使用filter而不是boolean来干净地创建删除项的新数组。下面是我如何在上面链接的待办事项应用程序中执行此操作的，其中_id是作为道具传递到DeleteResolution组件的要删除的项目的id：

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