vue.js - 如何处理具有多个参数(例如表格数据)的查询的 Apollo 缓存更新

Question

我的问题的快速总结

我有一个 getTracks 查询，它将获取轨道数据，并采用一些参数进行排序/过滤(限制、偏移、搜索、排序、顺序)。不幸的是，Apollo 单独缓存所有这些，因此当在一个 View 中删除一个项目时，用户更改排序顺序并且删除的项目仍然存在(因为它在缓存中用于一组不同的参数)。

详情

这是 getTracks 查询以及相关的输入类型(在我的服务器端 AppSync 架构中):

input SelectOptions {
  limit: Int
  offset: Int
  sort: String
  order: String
  search: String
}

type Query {
  getTracks(options: SelectOptions): TrackList!
}

type TrackList {
  total: Int!
  items: [Track!]!
}

在 Vue 客户端中，查询如下所示:

query GetTracks($options: SelectOptions) {
  getTracks(options: $options) {
    total
    items {
      id
      name
      runtime
      createdAt
      metadata {
        trackNum
        trackName
        artistName
        albumName
        year
      }
    }
  }
}

第一次显示表格时，项目加载并显示正常(默认排序顺序为 createdAt/desc)。如果我按 createdAt/asc 排序，则会发出网络请求以获取结果，并且它们显示正常。现在，如果我删除其中一条记录，然后再次按 createdAt/desc 排序，则会显示已删除的项目，因为它是从缓存中提取的。

即使查询有不同的参数，Apollo 也没有办法让它智能地遍历并从缓存中删除(或添加/修改)项目吗？我确实尝试了 @connection 指令 as documented here , 但它只是让表格排序没有效果(它根本不会从服务器获取)。

我完全被卡住了，准备完全禁用缓存，因为它似乎在现实场景中不起作用。如何保留默认的 cache-and-network 策略，同时让我的表在数据更改时正常运行？

Answer 1

不幸的是，this issue has been brought up before并且没有一个好的现有解决方案。最大的问题是客户端和缓存都没有公开任何方法来获取给定查询的所有请求——如果您有该信息，您可以遍历请求并适本地更新缓存。

您可以做的下一个最好的事情是利用 apollo-link-watched-mutation .该链接使我们能够有效地识别一个或多个需要根据突变更新的查询，但它使用操作名称来识别查询(以及哪些突变应该触发它们)。这样，您甚至不需要知道相关变量来更新查询——您只需要一致地命名您的操作。

new WatchedMutationLink(
  cache,
  {
    SaveTodo: {
      TodoList: ({ mutation, query }) => {
        // update logic here
      }
    }
  }
)

这种方法的一个缺点是您无法在每个组件的基础上定义您的 update 逻辑。但是，您也可以通过使用不同名称的突变来绕过该限制。