Question

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

列表查询为：

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

感谢xadm在供参考的注释中提供示例

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，您需要使用没有其他与其关联的信息的对象来设置缓存。

更新：此功能运行两次。一次获得最佳结果，然后在突变再次出现时再次运行。在我的返回布尔值的变异示例中，我基于该布尔值向列表添加了一个过滤器，以从列表中删除已删除的项目或使其保持原样。

Answer 2

Here's a Medium article，并举例说明如何使用OptimisticResponse从列表中删除项目。

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

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

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

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

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

从列表中删除记录，Apollo GraphQL乐观UI突变

2 个答案: