Мутация vue-apollo запускает неожиданную подписку

Question

У меня есть умный запрос в моем компоненте ввода. Он покажет элементы при загрузке страницы.

apollo: {
    feed: {
      query: FEED_QUERY,
      result({ data, loading, networkStatus }) {
        console.log("Feed success!");
        this.feedItems(data.feed); // sync vuex state
      },
      error(error) {
        console.error("Feed error!", error);
      },
      watchLoading(isLoading, countModifier) {

      }
    }
}

И я добавляю стандартную подписку в created крючок, который будет обновлять элементы после наблюдения изменений.

  created: function() {
    const _this = this;
    const observer = this.$apollo.subscribe({
      query: ITEM_SUBSCRIPTION
    });
    observer.subscribe({
      next(data) {
        _this.$apollo.queries.feed.refetch();
      },
      error(error) {
        console.error(error);
      }
    });
  },

Когда я делаю любую мутацию, как это,

this.$apollo
    .mutate({
      mutation: ITEM_DELETE_MUTATION,
      variables: {
        id
      }
    })
    .then(({ data }) => {
      console.log("Delete item success!");
    })
    .catch(error => {
      console.error("Delete item fail!");
    });

Я ожидаю, что консоль выйдет из системы:

Delete item success!
Observe changes!
Feed success!

но на самом деле это печатает

Feed success!    <-------- unexpected
Delete item success!
Observe changes!
Feed success!

Не знаю как прошел первый Feed success! сообщение сработало. Есть идеи? Заранее спасибо.

Answer 1

Ну твой result обратный вызов вызывается при загрузке запроса.

Это удобно, когда вы разрабатываете оптимистичный пользовательский интерфейс, в котором вы представляете ложный ответ от сервера пользователю, а после получения реального ответа вы обновляете его.

Если вы хотите предотвратить это, просто сделайте:

result({data, loading, networkStatus}) {
  if (loading) return
  console.log('Feed success!')
  this.feedItems(data.feed) // sync vuex state
}