在现代 Web 开发中，前端应用通常需要从服务器获取数据。为了优化性能并提高用户体验，前端应用可能需要缓存这些数据，以便在后续的页面访问中可以快速地获取它们。此时，Apollo Cache Hermes 就是一款非常有用的 npm 包。
什么是 Apollo Cache Hermes？
Apollo Cache Hermes 是一个用于 Apollo Client 的缓存库。它旨在提供高效、灵活和可扩展的数据缓存功能。它支持多种基于键值对的缓存策略，并且可以很容易地集成到 React 应用程序中。
如何使用 Apollo Cache Hermes？
要使用 Apollo Cache Hermes，您需要先安装它：
npm install apollo-cache-hermes
然后，在创建 Apollo Client 实例时，您需要将 Hermes 缓存对象作为选项传递给它的构造函数。以下是一个简单的示例：
-- -------------------- ---- ------- ------ - ------------ - ---- ----------------- ------ - ------ - ---- ---------------------- ----- ----- - --- --------- ----- ------ - --- -------------- ---- ----------- ------ ---展开代码
现在，您可以在查询中使用 @client 指令来指示 Apollo Client 在本地缓存中查找数据。例如：
query GetTodoList { todos @client { id text completed } }
这个查询将返回本地缓存中的 todos 数组，而不是从服务器获取数据。
Hermes 缓存策略
Apollo Cache Hermes 支持多种缓存策略。以下是一些常见的示例：
InMemoryCache
InMemoryCache 是默认的缓存策略，可以在创建 Apollo Client 实例时使用：
import { InMemoryCache } from '@apollo/client'; const client = new ApolloClient({ uri: '/graphql', cache: new InMemoryCache(), });
PersistedCache
PersistedCache 可以将数据存储到浏览器的本地存储中。要使用它，您需要将其与另一个缓存策略（如 InMemoryCache）结合使用：
-- -------------------- ---- ------- ------ - -------------- - ---- ---------------------- ------ - ------------- - ---- ----------------- ----- ----- - --- ---------------- ------ --- ---------------- --- ----- ------ - --- -------------- ---- ----------- ------ ---展开代码
CachedFetcherCache
CachedFetcherCache 可以将数据存储到 IndexedDB 中，并且可以缓存 fetch 请求的结果：
-- -------------------- ---- ------- ------ - ------------------ - ---- ---------------------- ----- ----- - --- -------------------- -------- ------ --- ----- ------ - --- -------------- ---- ----------- ------ ---展开代码
结论
Apollo Cache Hermes 是一个非常有用的 npm 包，可以帮助前端开发人员轻松实现高效、灵活和可扩展的数据缓存功能。在本文中，我们介绍了如何安装和使用 Apollo Cache Hermes，并讨论了一些常见的缓存策略。希望这篇文章对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/54834
