vue-apollo突变触发意外订阅

Question

我的entry组件中有一个智能查询。它将在页面加载时显示项目。

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回调是在加载查询时调用的。

这在您设计乐观UI时非常方便，在这种UI中，您向用户呈现来自服务器的假响应，并在获得实际响应后对其进行更新。

如果你想阻止它，只需这样做：

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