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

分享于2022年07月17日 apollo javascript vue-apollo vue.js 问答
【问题标题】:使用 Vue Router 重定向到页面后如何重新获取 apollo 查询?(How to refetch apollo query after i redirect to page with Vue Router?)
【发布时间】:2022-01-29 16:08:39
【问题描述】:

我通过 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 显示了一个订单列表,因此它应该更新删除我刚刚删除的订单的订单,但它并没有改变。


【解决方案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

  • 那么我在 update 方法中到底做了什么?如何更新在另一个页面中调用的其他查询完全不同?你有任何链接解释吗?
  • @JoãoHamerski 不幸的是,没有针对您的确切问题的确切解决方案。但一般来说:Apollo 缓存数据,你需要在页面更改事件上更新该缓存(通过突变的 update 函数或通过重新查询数据集等)
  • 由于某种原因尝试读取缓存时出现此错误: stackoverflow.com/questions/70908036/…