0

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.

39ecneret
  • 661
  • 3
  • 7
  • 17

1 Answers1

0

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
}
Jan Tajovsky
  • 1,162
  • 2
  • 13
  • 34