Vue.js 如何使用深度嵌套查询处理Vue Apollo中的删除？

我有一个查询，它返回多个嵌套对象以呈现一个充满信息的屏幕。我想删除其中一个深度嵌套的对象，并乐观地更新屏幕（即不运行完整的查询）

为了解释查询和UI，我将使用类似Trello board的查询作为示例：

query everything {
  getBoard(id: "foo") {
    name
    cardLists {        
      edges {
        node {
          id
          name
          cards {
            edges {
              node {
                id
                name
              }
            }
          }
        }
      }
    }
  }
}

此查询的结果用于构建如下所示的UI：

我正在使用以下方法构建应用程序：

• VueJS
• Vue阿波罗
• Scaphold.io作为我的GraphQL存储

当我想删除其中一张卡时，我会调用：

deleteCard: function () {
  this.$apollo.mutate({
    mutation: gql`
      mutation deleteCard($card: DeleteCardInput!) {
        deleteCard(input: $card) {
          changedCard {
            id
          }
        }
      }
    `,
    variables: {
      'card': {
        id: this.id
      }
    },
  })
  .then(data => {
    // Success
  })
}

变异正在成功删除卡片，但我想根据变异立即更新UI。执行此操作的简单选项是调用

refetchQueries:['everything']

——但是这是一个昂贵的查询，对于快速的UI更新来说太慢了

我想做的是乐观地更新UI，但Vue Apollo的版本既不能解决删除问题，也不能解决深度嵌套的问题

---

从深度嵌套查询中删除项并乐观地更新UI的正确解决方案/最佳实践是什么？

如果您查看阿波罗的文档，您会发现乐观的响应“伪造”了突变结果

因此，它将使用乐观值处理

updateQueries

函数。在您的情况下，这意味着如果添加

optimisticResponse

属性，它将使用乐观值更改apollo存储区内的查询：

可能是这样的：

这个。$apollo.mutate({
突变：gql`
突变删除卡（$card:DeleteCardInput！）{
deleteCard（输入：$card）{
兑换卡{
身份证件
}
}
}
`,
变量：{
“卡片”：{
id:这个是
}
},
UpdateSeries：{
//…更新板
},
乐观回应：{
__typename:'突变'，
删除卡：{
__typename:'卡'，//卡的图形类型
id:this.id，
},
},
})

突变后如何使用apollo客户端的

UpdateSeries

或

dataIdFromObject

属性更新查询？@Locco0\u 0–我使用的是

UpdateSeries

。我是否可以使用

dataIdFromObject

直接从存储中删除该对象，而不是更新查询？如果在突变的返回值中添加更深的嵌套（例如，添加卡片列表的id和其中的卡片），则可以。当然慢了，谢谢。但我不清楚的是如何编写

updateQueries

，这样我就可以非常有效地从现有查询中删除相应的节点，而不是重新查询整个电路板，这很慢。我明白了。那你可能想找一个。然后必须在深度嵌套查询中搜索正确的元素。汉克斯在找指针，我去看看。我正在使用Vue，但阅读React的不变性助手可能会有帮助。与此同时，我意识到我可以轻松地在突变查询中加载父列表（及其子卡），让Apollo自动更新UI。这仍然是一个过于昂贵的查询，但总比重新加载整个板要好。是的，我想加载这么多树太昂贵了。但正如你所说，这比重新蚀刻整个电路板要好。