URQL如何判断返回数据来自缓存还是服务器 含Graphcache使用场景

1. 第二个查询关联的author是否会走缓存 #

默认配置下会，前提是满足两个条件：

• 你的Graphcache没有自定义修改主键规则，默认会用id作为实体的唯一主键
• 第一个查询返回的author实体的id，和第二个查询返回的post关联的author的id完全匹配，且第二个查询要求的author字段（id、name、twitterHandler）已经全部在第一个查询中请求过并存入缓存

这种情况下第二个查询发起时，post的主体数据（id、body、title）会向服务器请求，但关联的author字段会直接从缓存读取，不需要重复向服务器索要对应字段。

2. 判断数据来源的方法 #

• 看查询返回的元数据：URQL 每个查询返回的结果附带的上下文里，operation.context.resultOrigin字段标识了结果来源，值为cache说明全量结果来自缓存，值为network说明结果来自服务器；如果是部分命中缓存的场景，你也可以监听cacheHit事件来感知缓存命中行为。
• 对比网络请求和最终拿到的结果：如果第二个查询的网络响应里已经返回了author的全量字段，但最终你拿到的结果里的author字段和缓存中更早的author数据一致（比如你中途修改过缓存里的author数据），就说明这部分数据走了缓存。

3. 控制台日志标识方法 #

你可以在初始化URQL客户端时开启调试模式，配置示例：

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

const client = new Client({
  url: '/graphql',
  exchanges: [cacheExchange, fetchExchange],
  // 开启调试模式
  debug: true,
});

开启后浏览器控制台会输出Graphcache的全量操作日志，会明确标注哪些实体、哪些字段命中了本地缓存，哪些数据是从网络响应更新到缓存的。

内容的提问来源于stack exchange，提问作者Ерлан Темир