5

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

为了解释查询和 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
  • 维阿波罗
  • 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 的正确解决方案/最佳实践是什么？

4

1 回答 1

0

如果您查看有关 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,
    },
  },
})

于 2017-03-14T15:21:23.923 回答