Apollo Client分页场景下mutation后如何清除指定查询的全量缓存数据

实现方案 #

你可以直接在mutation的update回调中调用Apollo Client缓存的evict接口，清除指定查询所有变量组合的缓存条目，不需要提前获知所有skip取值，也不会完全禁用该查询的缓存能力：

1. 首先确认你的GET_MY_ITEMS查询对应的根字段名（即查询语句中第一层的字段名，例如下方查询中的myItems）：

# 示例GET_MY_ITEMS查询结构，根字段为myItems
query GET_MY_ITEMS($where: MyItemWhereInput, $skip: Int, $take: Int) {
  myItems(where: $where, skip: $skip, take: $take) {
    id
    # 其他字段
  }
}

2. 在你的mutation配置中新增update回调，清理对应字段的所有缓存：

mutate({
  // 你原来的其他mutation配置
  refetchQueries: ({ data }) => [
    {
      query: GET_MY_ITEMS,
      variables: {
        where: { type: { eq: data.updateMyItem.myType } },
      },
    },
  ],
  awaitRefetchQueries: true,
  // 新增update回调清理缓存
  update: (cache, { data }) => {
    const targetType = data.updateMyItem.myType
    // 清除ROOT_QUERY下myItems字段所有符合当前type的缓存条目
    cache.evict({
      id: 'ROOT_QUERY',
      fieldName: 'myItems' // 替换为你实际的查询根字段名
    }, (field) => {
      // 仅清理当前操作的type对应的缓存，不影响其他类型的列表缓存，不需要可以去掉这个过滤函数
      return field.args?.where?.type?.eq === targetType
    })
    // 清理无引用的缓存对象，可选
    cache.gc()
  }
})

原理解释 #

Apollo Client 3.x的缓存会将同一个根字段不同变量组合的查询结果，全部存在ROOT_QUERY下对应字段名的条目里。直接调用evict清理整个字段的缓存时，会自动删除该字段所有变量组合的缓存（不管skip取值是多少），后续访问该查询的任意分页时，发现缓存不存在就会自动重新请求服务端获取最新数据，同时新返回的数据仍然会正常写入缓存，不会影响后续查询的缓存能力。

你使用的@apollo/client@3.2.9版本完全支持evict和gc接口，无需额外升级依赖。

内容的提问来源于stack exchange，提问作者RVid