Как обрабатывать удаление в Vue Apollo с глубоко вложенными запросами?

У меня есть запрос, который возвращает несколько вложенных объектов для отображения экрана, полного информации. Я хочу удалить один из глубоко вложенных объектов и оптимистично обновить экран (т. Е. Без выполнения полного запроса).

Чтобы объяснить запрос и пользовательский интерфейс, я буду использовать в качестве примера запрос, похожий на доску Trello:

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

Результат этого запроса используется для создания такого пользовательского интерфейса: 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
  })
}

Мутация успешно удаляет карту, но я хочу немедленно обновить пользовательский интерфейс на основе мутации. Самый простой вариант сделать это - вызвать refetchQueries: ['everything'], но это дорогостоящий запрос и слишком медленный для быстрого обновления пользовательского интерфейса.

Я хочу оптимистично обновить пользовательский интерфейс, но пример мутаций для Vue Apollo don Не обращаются ни к удалению, ни к глубоко вложенному сценарию.

Какое решение / лучшие практики для удаления элемента из глубоко вложенного запроса и оптимистичного обновления пользовательского интерфейса?