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
}

vue-apollo突变触发意外订阅

1 个答案: