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

Question

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

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

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

此查询的结果用于构建这样的 UI：https://d3uepj124s5rcx.cloudfront.net/items/170a0V1j0u0S2p1l290I/Board.png

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

• 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 的 example mutations 既没有解决删除问题，也没有解决深度嵌套的场景。

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

Answer 1

如果您查看 apollo 的 optimistic Response 的文档，您会发现乐观响应“伪造”了突变结果。

因此它将处理具有乐观值的updateQueries 函数。在您的情况下，这意味着如果您添加 optimisticResponse 属性，它应该使用乐观值更改 apollo 存储中的查询：

可能是这样的：

this.$apollo.mutate({
  mutation: gql `
      mutation deleteCard($card: DeleteCardInput!) {
        deleteCard(input: $card) {
          changedCard {
            id
          }
        }
      }
    `,
  variables: {
    'card': {
      id: this.id
    }
  },
  updateQueries: {
    // .... update Board
  },
  optimisticResponse: {
    __typename: 'Mutation',
    deleteCard: {
      __typename: 'Card', // graphQL type of the card
      id: this.id,
    },
  },
})