Using Apollo mutation, I delete a resource on a page:
async delete () {
await this.$apollo.mutate({
mutation: orderDelete,
variables: {
id: this.order.id
}
})
this.$emit('success')
}
This function is called by the success emitter:
onOrderDeleted () {
this.closeModal('modalOrderDelete')
this.$nextTick(() => {
this.redirectToClient()
})
},
redirectToClient () {
this.$router.push({
name: 'clients.show',
params: { clientKey: this.clientKey }
})
}
The issue arises when redirecting to the clients.show page, as the deleted order still appears until the whole page is refreshed.
I would like to find a way to trigger a query refresh upon redirection. It seems that Apollo's cache may be retaining outdated data and not updating it. Is there a way to programmatically update only the specific query cache upon redirection via Vue Router?
Note: The clients.show displays a list of orders and should reflect the deletion of the order upon redirection, which currently does not happen.