随着 GraphQL 在前端开发中的越来越普及，对于性能优化的需求也变得越来越重要。而请求级别的缓存是 GraphQL 中一种非常有效的性能优化方式。在本文中，我们将会详细介绍如何在 GraphQL 中使用请求级别的缓存，并提供一些示例代码来帮助读者更好地理解这个过程。
请求级别缓存的工作方式
在传统的 RESTful API 中，通常使用 HTTP 缓存和浏览器缓存来实现缓存的功能。但是在 GraphQL 中，则需要使用请求级别的缓存来保证每个请求的缓存结果不一样。
请求级别缓存的工作方式基于 GraphQL 查询的结构。因为 GraphQL 查询可以明确指定数据的结构，所以请求级别缓存可以根据查询结构来存储和检索缓存结果。
请求级别缓存通常是通过将查询字符串作为缓存的键来实现的。当一个新的查询到达时，缓存系统首先检查该查询的字符串是否已经存在于缓存中，如果是，则直接返回缓存结果，否则就会执行正常的查询操作，并将结果存入缓存中。
如何在 GraphQL 中使用请求级别的缓存
在 GraphQL 中，使用请求级别的缓存通常需要依赖一些开源库和中间件，其中最常用的是 apollo-cache-control 和 apollo-server-express。
使用 apollo-cache-control
apollo-cache-control 是一个由 Apollo 团队提供的 GraphQL 库，它可以集成缓存控制到你的 GraphQL API 中。通过添加缓存控制指令（例如 max-age 或 stale-while-revalidate）到 GraphQL 的响应头中，可以控制客户端缓存的时间以及在缓存失效时该如何处理。
要使用 apollo-cache-control，首先需要将该库添加到应用程序中。可以使用以下命令将其安装到你的项目中：
npm install apollo-cache-control
安装完毕后，在应用程序中注册该库。例如，如果你正在使用 Apollo Server 来构建 GraphQL 服务器，则可以像这样使用：
-- -------------------- ---- -------
----- - ------------- --- - - -------------------------
----- - ------------------------------ - - ----------------------------------------------
----- -------- - ----
---- ----- -
------ ------
-
--
----- --------- - -
------ -
------ -- -- --------
--
--
----- ------ - --- --------------
---------
----------
-------- -----------------------------------
---
----------------------- --- -- -- -
--------------- ------ ----- -- ---------
---在应用程序中设置 apollo-cache-control 后，就可以在 GraphQL API 中使用缓存控制指令了。例如，下面的示例告诉客户端在 60 秒内缓存查询结果：
query {
hello @cacheControl(maxAge: 60)
}使用 apollo-server-express
apollo-server-express 是一个广泛使用的 GraphQL 中间件库，它提供了请求级别缓存的支持。通过使用 graphql-cache 中间件，可以实现 GraphQL API 的响应缓存。
要使用 apollo-server-express，首先需要将该库添加到应用程序中。可以使用以下命令将其安装到你的项目中：
npm install apollo-server-express graphql-cache
安装完毕后，在应用程序中注册该库。例如，如果你正在使用 Express 来构建 GraphQL 服务器，则可以像这样使用：
-- -------------------- ---- -------
----- ------- - -------------------
----- - ------------- --- - - ---------------------------------
----- ------------ - -------------------------
----- -------- - ----
---- ----- -
------ ------
-
--
----- --------- - -
------ -
------ -- -- --------
--
--
----- --- - ----------
----- ------ - --- --------------
---------
----------
-------- -- ---- --- -- -- -- ---- --- ---
-------- -----------------
---
------------------------ --- ---
------------ ----- ---- -- -- --
--------------- ------ ----- -- --------------------------------------------
--在应用程序中设置 graphql-cache 后，就可以在 GraphQL API 中使用缓存了。例如，下面的示例告诉客户端在 60 秒内缓存查询结果：
query {
hello @cacheControl(maxAge: 60)
}示例代码
以下示例代码展示了如何在 GraphQL 中使用请求级别的缓存。这个例子使用了 apollo-server-express。
-- -------------------- ---- -------
----- ------- - -------------------
----- - ------------- --- - - ---------------------------------
----- ------------ - -------------------------
----- ----- - -
- --- -- ----- -------- --- ---------- ------------- --- ----- ----- ----- --
- --- -- ----- ----------- ---------- ------------- --- ----- ----- --------- -------- ----- --
- --- -- ----- ----- --------- ---------- ------------- --- ----- ----- ----- --
- --- -- ----- ----------- ---------- ------------- --- ----- ----- --------- -------- ----- --
--
----- -------- - ----
---- ----- -
------ --------
-------- ------ ----
-
---- ---- -
--- ----
----- -------
---------- ----------
-
--
----- --------- - -
------ -
------ -- -- ------
----- --- - -- -- -- ----------------- -- ------- --- ----
--
--
----- --- - ----------
----- ------ - --- --------------
---------
----------
-------- -- ---- --- -- -- -- ---- --- ---
-------- -----------------
---
------------------------ --- ---
------------ ----- ---- -- -- --
--------------- ------ ----- -- --------------------------------------------
--在这个例子中，我们创建了一个简单的游戏查询 API。我们使用了 graphql-cache 中间件，并在 games 查询上设置了缓存控制指令来指示客户端缓存查询结果。
query {
games @cacheControl(maxAge: 60)
}在这个查询中，我们设置了 max-age 指令为 60 秒，这意味着客户端将会在 60 秒内缓存查询结果。在第二次查询时，缓存结果将会直接返回而不是重新执行查询操作。
总结
通过本文，读者可以学习到请求级别缓存在 GraphQL 中的工作方式以及如何在 GraphQL 中使用请求级别的缓存。请求级别缓存可以大大提高 GraphQL API 的响应速度，通过减少冗余查询和减少对服务端的请求，实现客户端的性能优化。如果你正在构建 GraphQL API 或维护已有的 GraphQL API，那么学习请求级别缓存将是一个很有价值的技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cfc3c0b5eee0b5256eac3b