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

Question

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

为了解释查询和UI,我将使用类似Trello板的查询作为示例:

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 Apollo
• 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的正确解决方案/最佳实践是什么？

Answer 1

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

因此它将处理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,
    },
  },
})