GraphQL 是一种用于 API 的查询语言，它使得应用能够精确地描述需要的数据。相比于 RESTful API，GraphQL 具有更细粒度、灵活性更高的数据提取能力，但是也带来了更高的数据请求次数。
为了解决这一问题，GraphQL 提供了缓存功能，可以在客户端和服务器端之间保存数据。在查询相同数据时，客户端可以直接从缓存中获取，而不必重新请求服务器，从而提高效率。
本文将为你介绍 GraphQL 缓存的基础知识和缓存策略的指导。
GraphQL 缓存的基础知识
GraphQL 中的缓存是基于标识符的，并且可以在客户端和服务器之间共享。每次请求中都会带有一个唯一的标识符，与它对应的响应会被缓存起来。当下一次请求中带有相同的标识符时，就可以直接从缓存中获取结果。
在 GraphQL 缓存中，有一个很重要的概念叫作“规范化”，可以将其理解为将获取的数据进行标准化存储。如果查询返回相同的 ID 和字段，客户端就会认为它们是相同的，从而提高缓存命中率。
GraphQL 缓存策略的指导
要制定一个有效的 GraphQL 缓存策略，需要考虑以下三个方面：
1. 命中率
在缓存设计中，命中率是一个非常重要的因素。如果缓存没有命中，就需要重新请求服务器获取数据，从而增加了请求次数和响应时间。要提高命中率，可以采取以下两种方式：
1.1. 数据的标准化
在查询相同数据时进行数据的标准化存储，这样就能够减少相同数据的存储量。可以使用一些工具来自动生成这部分的缓存代码。
1.2. 减少冗余查询
GraphQL 支持批量查询，可以将几个子查询组合成一个父查询一起执行，从而减少冗余查询。在使用 GraphQL 时，要合理利用批量查询来减少请求次数。
2. 缓存过期
缓存过期是另一个重要的因素。如果缓存数据的过期时间太长，就会导致数据过时，而如果过期时间过短，就会导致缓存命中率降低。可以采用以下两种策略来处理缓存过期问题：
2.1. Time to Live
Time to Live（TTL）是一种常见的缓存过期策略，在缓存中为每条数据设置过期时间。当缓存超时时，就从服务器重新请求数据。
2.2. 主动刷新
主动刷新是一种通过手动触发缓存刷新来保持数据更新的策略。在缓存过期前提前主动刷新缓存，可以保持数据的新鲜度。
3. 缓存空间
缓存空间也是一个需要考虑的问题。如果缓存的数据量过大，就会占用过多的内存和磁盘空间。可以采取以下两种策略来缓解缓存空间问题：
3.1. 热点数据
热点数据是最频繁被访问的数据，可以通过将热点数据存储在内存中来优化缓存命中率。可以使用基于 LRU 算法的缓存库来实现热点数据的缓存。
3.2. 微服务架构
微服务架构可以通过将各个服务拆分开来，减少每个服务所需要的缓存数据量，从而优化缓存空间。可以将每个服务的缓存设置在该服务所在的服务器上。
GraphQL 缓存策略的实例
以下是一个简单的使用 Apollo Client 来实现 GraphQL 缓存的示例。在该示例中，我们将使用 FetchPolicy 和 Update 来实现缓存控制和更新。
-- -------------------- ---- -------
------ - ---- -------- - ---- -----------------
------ - -------- - ---- --------
----- --------- - ----
----- -------- -
----- -
--
-----
------
-
-
--
-------- ----------- -
----- --------------- ----------------- - ----------------
----- - -------- ---- - - ------------------- -
---------- -
---------- --------------
--
------------ --------------------
------- ------- - ----- ------- -- -- -
--------------
------- -
------------------- - --- -
----- ----------- - ---------------------
----- --------------
--------- ----
-------- ------- -- ---- -
--
-
--
---
------ ------------------ -------------
--
--
---
--
---
-- --------- ------ ------------------
----- - ----- - - -----
------ -
--
------- ----------- -- ----------------------------------
-------------- - ----- --- ------ - ----- -----------
---------
----
----------------- -- -
--- --------------
------------ -- -------------
-----
---
-----
---
--
-在该示例中，我们定义了一个名为 GET_BOOKS 的 GraphQL 查询语句，用于获取书籍列表。在 useQuery 钩子函数中，我们将 fetchPolicy 设置为 'cache-and-network'，这意味着我们将首先检查缓存中是否有数据，如果没有就发送网络请求，更新缓存。在更新缓存时，我们使用了 cache.modify 方法来更新缓存数据。
在 BooksList 组件中，我们还定义了一个 showFavorites 状态来控制显示所有书籍或只显示收藏书籍。当点击按钮时，我们会重新调用 useQuery 钩子函数来更新书籍列表。在缓存控制方面，我们使用了 fetchPolicy 和 update 选项来控制缓存数据的存储和更新。
结论
GraphQL 缓存是一项很有用的技术，可以显著提高应用的性能。在实现 GraphQL 缓存时，需要考虑缓存命中率、缓存过期和缓存空间等问题。通过合理的缓存策略和实现，可以优化应用性能，提升用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6715a7ddad1e889fe2184ee9