我正在寻找一种让乐观的用户界面从列表中删除项目的方法。
列表的查询是:
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}
})
最佳答案
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
);
关于javascript - 从列表中删除记录,Apollo GraphQL Optimistic UI Mutation,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52432723/