apollo - 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加载查询时会调用您的回调。

当您设计乐观的 UI 时，这很方便，您在其中向用户呈现来自服务器的虚假响应，并在获得实际响应后更新它。

如果您想阻止它，请执行以下操作：

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