Vue Apollo refetch query on event

Question

I have a query in my Component instance:

@Component({
  apollo: {
    cartProducts: {
      query: GET_CART_PRODUCTS,
      loadingKey: "loading",
    },
  }
})

It's loading my data correctly. Then I change data in my DB and want to refetch them on click, which call that function:

  refresh() {
    this.$apollo
      .query({
        query: GET_CART_PRODUCTS,
      })
      .then((res: any) => (this.cartProducts = res.data.cartProducts))
      .catch((err: any) => console.log(err));
  }

But it doesn't update cartProducts property, and doesn't give me any error. Although If I refresh my page new data are there. In my Apollo config I have such property fetchPolicy: "network-only". What could be the reson of such behaviour? Thanx in advance!

Answer 1

The answer is quite simple, sorry to bother, I had to google it more.

   this.$apollo.queries.cartProducts.refetch()