мутация vue-apollo запускает неожиданную подписку - PullRequest
Новая
       28

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

0 голосов
/ 13 декабря 2018

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

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! сообщение сработало.Есть идеи?Заранее спасибо.

1 Ответ

0 голосов
/ 13 декабря 2018

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

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

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

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