如何打印完整URQL缓存 排查按userId定制API缓存配置问题

所有操作都需要先拿到项目中初始化完成的URQL Client实例：React环境可通过useUrqlClient()钩子获取，Vue环境可通过useClient()获取，非框架场景直接引用初始化时导出的client对象即可。

场景1：使用URQL默认自带的 Document Cache #

默认缓存没有提供直接读取全量数据的内置API，可以通过自定义存储层的方式拿到全量缓存内容：

import { Client, cacheExchange, fetchExchange } from '@urql/core';

// 自定义缓存存储容器
const cacheStore = new Map();
const customCacheExchange = cacheExchange({
  storage: {
    read: (key) => cacheStore.get(key),
    write: (key, value) => cacheStore.set(key, value),
    clear: () => cacheStore.clear()
  }
});

const client = new Client({
  url: '/api/graphql',
  exchanges: [customCacheExchange, fetchExchange]
});

// 需要打印缓存时直接执行
console.log('URQL全量缓存:', Object.fromEntries(cacheStore.entries()));

如果只需要看缓存的读写操作日志，直接给cacheExchange传入debug: true配置即可，控制台会自动输出所有缓存命中、写入、失效的操作记录。

场景2：使用@urql/exchange-graphcache（归一化缓存，定制userId维度缓存规则的常用方案） #

做按用户维度隔离缓存的场景基本都会用Graphcache，它本身内置了直接导出全量缓存的方法，不需要额外改造：

// 拿到client实例后，直接调用缓存实例的dump方法
const allCacheData = client.cache.dump();
console.log('URQL Graphcache全量归一化缓存:', allCacheData);

dump()方法返回的是普通JS对象，key为归一化后的实体标识（格式类似User:xxx、Query:xxx），value为对应实体存储的所有字段值，你可以直接检索对应userId关联的缓存条目，验证自定义缓存规则是否正确生效。
如果需要实时观测缓存变化，可以在graphcache的updates、resolvers回调里调用cache.dump()打印，也可以在切换用户账号、触发接口请求后手动执行打印逻辑。

缓存规则排查提示 #

做userId维度缓存定制时，可以对照打印出来的缓存内容检查两点：

• 不同userId对应的实体key是否做了区分，避免不同用户的缓存共用同一个key导致串数据
• 用户登出/切换账号时，是否正确调用了client.cache.invalidate()清理旧用户的缓存条目

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