深入理解Urql中的文档缓存机制

深入理解Urql中的文档缓存机制

urql The highly customizable and versatile GraphQL client with which you add on features like normalized caching as you grow. 项目地址: https://gitcode.com/gh_mirrors/ur/urql

什么是文档缓存

Urql默认采用了一种称为"文档缓存"(Document Caching)的机制，这种机制通过缓存每个查询的结果，避免了向GraphQL API重复发送相同的请求。这类似于浏览器缓存的工作方式，但专门为GraphQL查询优化设计。

缓存键的生成原理

Urql会为每个发出的请求创建一个唯一的缓存键，这个键基于查询本身及其变量组合而成。这种机制确保了：

1. 相同的查询和变量组合总是对应同一个缓存键
2. 不同的变量值会生成不同的缓存键
3. 查询文本的任何变化都会导致不同的缓存键

缓存失效策略

文档缓存的核心挑战在于知道何时应该使缓存失效。Urql采用了一种基于类型名称(__typename)的智能策略：

1. 查询时会自动请求__typename字段
2. 当执行一个包含特定类型名称的变更(mutation)时
3. 系统会检查缓存中所有包含相同类型名称的查询结果
4. 这些匹配的查询结果会被自动标记为失效

这种策略虽然激进，但对于内容驱动的网站非常有效，因为它不需要处理数据规范化或ID映射等复杂问题。

请求策略详解

Urql提供了四种不同的请求策略，开发者可以根据场景灵活选择：

1. cache-first(默认)：优先使用缓存，无缓存时才发起请求
2. cache-and-network：立即返回缓存结果，同时后台发起请求更新
3. network-only：总是发起请求，忽略缓存
4. cache-only：仅使用缓存，无缓存时返回null

特别值得注意的是cache-and-network策略，它能够提供极佳的用户体验：

• 立即显示已有数据保持界面响应
• 后台静默更新确保数据新鲜度
• 通过result.stale字段指示数据是否过时

常见问题与解决方案

文档缓存有一个需要注意的边缘情况：当查询返回空数组时，由于无法获取__typename信息，缓存失效机制可能无法正常工作。

解决方案有两种：

方案一：添加additionalTypenames

const context = useMemo(() => ({ additionalTypenames: ['Todo'] }), []);
const [result] = useQuery({ query, context });

这种方法明确告知缓存该查询可能涉及的类型，即使结果为空也能正确失效。

方案二：变更中使用additionalTypenames

const [result, execute] = useMutation(`mutation { createUser }`);

const onClick = () => {
  execute({}, { additionalTypenames: ['Wallet'] });
};

当变更需要失效与它没有直接类型关联的查询时，这种方法特别有用。

最佳实践建议

1. 对于需要快速展示又保持最新的数据，优先考虑cache-and-network策略
2. 查询可能返回空数组时，务必添加additionalTypenames
3. 对于关键数据，可以使用network-only确保获取最新状态
4. 对于不常变化的参考数据，cache-first能提供最佳性能
5. 在开发过程中监控缓存命中率，优化查询结构

Urql的文档缓存机制虽然简单，但在正确使用时能显著提升应用性能。理解其工作原理和限制条件，可以帮助开发者构建更高效、响应更快的GraphQL应用。

urql The highly customizable and versatile GraphQL client with which you add on features like normalized caching as you grow. 项目地址: https://gitcode.com/gh_mirrors/ur/urql