使用 Vue Router 重定向到页面后如何重新获取 apollo 查询？

Question

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.

Answer 1

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))

More on Vue Apollo mutation here .