前言
GraphQL 是一种查询语言，可以帮助前端开发人员更高效地与后端API交互。GraphQL的一项重要特征是其灵活的数据查询能力，但这种灵活性也难以使用传统的缓存策略进行管理。
本文将讨论如何在GraphQL中管理查询结果的缓存。我们将探讨在GraphQL中缓存的概念、缓存的关键点、以及针对缓存的最佳实践。
GraphQL中的缓存
传统的缓存策略依赖于使用固定的查询参数来获取与缓存中匹配的结果，这就需要在查询开始时尽量多的知道查询将要获取到哪些数据。但这是GraphQL需要解决的问题，因为GraphQL查询的结果通常包含动态字段、深度嵌套的关系、以及未知的数据结构。这意味着我们无法事先确定查询的结果，也就意味着我们无法事先确定缓存的期望。
因此，在GraphQL中进行缓存管理需要另一种方法。
缓存的关键点
考虑到GraphQL数据模型中查询的基本单元是字段。所以我们可以使用字段级别的缓存策略来缓存响应的每个字段。这样做还可以允许更多的响应类型和查询可重用性。
使用字段级别的缓存需要我们遵循以下几个关键点：
检查所有缓存
每当我们执行新的查询时，我们需要检查缓存中是否存在我们所需的任何数据。为此，我们可以使用执行查询的参数作为缓存键。
深度优先的查询
GraphQL字段的关系模型是深度优先的，这意味着我们需要在缓存响应的过程中按照深度优先的顺序缓存响应。
采用数据染色方法
我们需要对响应数据进行染色（结构化标记），以便我们能够识别已经缓存的结果，以及哪些数据缓存在了哪个响应属性中。
支持缓存更新与过期
当缓存中的值发生变化时，我们需要更新缓存在任何响应属性中的所有内容。我们还需要支持缓存过期，以确保数据不会变得太陈旧。
最佳实践
正确地应用缓存标记
在GraphQL中，我们可以通过将字段的结果标记为缓存，来指示这个字段应该被缓存。对字段结果的缓存可以很容易地使用数据染色进行分类，并将缓存与数据结构关联起来。
将查询结果缓存到本地存储中
在客户端浏览器中可以使用localStorage等本地存储来缓存查询结果。通过使用localStorage，我们可以缓存查询结果并在接下来的查询中重复使用这些结果。
例如，我们可以通过以下代码来封装localStorage：
-- -------------------- ---- -------
-------- ------------- ------ ---- -
--- -
------------------------- ----------------
---------- --- - ---------- - --- - -----
------
----
- ----- --- -
--------------------- -- --- ----- ----- --- -------- ---
-
-
-------- ------------- -
--- -
----- ----- - --------------------------------------
-- ------ -- ----------------- -- --------------- -- ------------ -
------ ------------
-
- ----- --- -
-----------------------------
--------------------- -- ----- ----- ----- --- -------- ---
-
------ -----
-发送缓存控制头
每个GraphQL响应都带有一个标头，该标头指示该响应的内容是否可以被缓存。通过发送缓存控制头，我们可以控制缓存的持续时间。
例如，我们可以在响应头中设置如下缓存控制标头，以指示响应在300秒内可以被缓存：
Cache-Control: public, max-age=300
示例代码
以下是一个用于查询文章及其评论的GraphQL查询示例：
-- -------------------- ---- -------
----- ------------------------ ---- -
----------- ---- -
--
-----
-------
-------- -
--
------
----
----------
-
-
-我们可以在JavaScript中使用一个自定义的GraphQL客户端来执行此查询，并将结果缓存到localStorage中：
-- -------------------- ---- -------
------ - ------------- - ---- ------------------
------ - --------- -------- - ---- ------------
----- ------ - --- --------------------------
----- -------- ---------------------------- -
----- ----- - ------ ------------------------ ---- -
----------- ---- -
--
-----
-------
-------- -
--
------
----
----------
-
-
---
----- --------- - - -- --
----- -------- - -----------------------------
----- ------------ - -------------------
-- -------------- -
------ -------------
-
----- ------ - ----- --------------------- -----------
------------------ ------- -----
------ -------
-结论
GraphQL的动态查询模型对缓存管理提出了新的挑战。但这并不意味着我们无法进行缓存管理。通过正确的应用缓存标记、将查询结果缓存到本地存储中、发送缓存控制头等最佳实践，我们可以处理GraphQL查询缓存中的问题。如果你正在开始使用GraphQL，那么正确的管理查询结果缓存将是一个非常重要的方向。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/673251000bc820c5823cd24b