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

Question

我通过 apollo 突变删除了页面中的一些资源：

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

  this.$emit('success')
}

这是success发射器触发的方法：

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

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

这是发生了什么：当页面被重定向到 clients.show 时，即使我删除了它，订单仍然显示，它只会在我刷新整个页面时更新。

所以我想知道当我重定向到此页面时如何触发查询刷新？ Apollo 可能将数据保存在缓存中而不更新它，我不知道如何只更新这个特定查询的缓存，但都是编程方式，因为用户将通过 Vue Router 重定向。

注意：clients.show 显示订单列表，因此它应该更新订单以删除我刚刚删除的订单，但它并没有改变。

Answer 1

this.$apollo.mutate() 的功能比您使用的要多：

对象看起来像这样：

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

因此，您发送了 gql，但没有处理来自该查询的响应（无论是来自服务器的真实响应还是乐观响应（您期望成功））

有关 Vue Apollo 突变的更多信息 here。

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

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

javascript

apollo

vue.js

vue-apollo