[SOLVED] How to refetch apollo query after i redirect to page with Vue Router?

How to refetch apollo query after i redirect to page with Vue Router?

I delete some resource in a page via apollo mutation:

async delete () {
  await this.$apollo.mutate({
    mutation: orderDelete,
    variables: {
      id: this.order.id
    }
  })

  this.$emit('success')
}

This is the method triggered by success emitter:

onOrderDeleted () {
  this.closeModal('modalOrderDelete')

  this.$nextTick(() => {
    this.redirectToClient()
  })
},
redirectToClient () {
  this.$router.push({
    name: 'clients.show',
    params: { clientKey: this.clientKey }
  })
}

Here is what happen: when the page is redirected to clients.show the order is still being show even if i deleted it, it only updates if i refresh the whole page.

So i would like to know how i trigger a query refresh when i redirect to this page? Apollo is probably keeping data in cache and not updating it, i don't know how to update the cache only of this specific query, but all programatically because the user will be redirect via Vue Router.

Note: clients.show shows a list of orders, so it should update the orders removing that one i just deleted, but it just doesn't change.

Solution

this.$apollo.mutate() has more features than you used:

The object looks like this:

this.$apollo.mutate({
  mutation: someGql,
  variables: {
    label: param1,
  },
  update: function(store, response) => {
    // how to update the store
  },
  optimisticResponse: theResponseYouExpect,
})

So, you sent the gql, but did not handle the response from that query (neither the real response from the server or the optimistic response (that you expect on success))