Question

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

为了解释查询和用户界面，我将使用类似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更新而言太慢。

我想做的是乐观地更新用户界面，但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,
    },
  },
})

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

1 个答案: