vue-apollo mutation trigger unexpected subscription - apollo

Question

I have a smart query in my entry component. It will show items when page loads.
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) {
}
}
}
And I add a standard subscription in created hook, which will refresh items once observing changes.
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);
}
});
},
When I do any mutation like this,
this.$apollo
.mutate({
mutation: ITEM_DELETE_MUTATION,
variables: {
id
}
})
.then(({ data }) => {
console.log("Delete item success!");
})
.catch(error => {
console.error("Delete item fail!");
});
I expect console to log out:
Delete item success!
Observe changes!
Feed success!
but actually it prints
Feed success! <-------- unexpected
Delete item success!
Observe changes!
Feed success!
I don't know how was the first Feed success! message trigged. Any ideas? Thanks in advance.

Answer 1

Well, your result callback is called when a query is loading.
This comes handy when you are designing optimistic UI where you present a fake response from the server to a user and after you get an actual response you update it.
If you want to prevent it just do:
result({data, loading, networkStatus}) {
if (loading) return
console.log('Feed success!')
this.feedItems(data.feed) // sync vuex state
}