GraphQL 是一种用于 API 的查询语言，它使得客户端可以精确地指定它们所需的数据以及数据的结构。同时，由于 GraphQL 具有强大的类型系统和完整的文档，它也可以提供增量 API 更新和非常灵活的查询和类型约束，从而使得 GraphQL 在前端中得到广泛应用。然而，在实际应用中，缓存通常是一个关键点，它可以提高应用的性能并减少请求次数。那么，如何在 GraphQL 中实现缓存控制呢？本文将详细讨论该问题。
GraphQL 缓存的基本原理
在 GraphQL 中，缓存可以大致分为两种类型，一种是客户端缓存，另一种是服务端缓存。对于客户端缓存，由于 GraphQL 的查询语言是声明式的，所以客户端可以根据查询的具体内容和参数缓存 GraphQL 请求的响应结果。客户端缓存的优点在于可以减少对服务器的请求，并且可以大大提高应用的性能。对于服务端缓存，GraphQL 实现了一种查询的缓存机制，它可以帮助服务端减少不必要的计算和数据库查询。
如果要在 GraphQL 中实现缓存控制，需要考虑以下几个方面：
对于客户端缓存，可以考虑使用一些第三方库，比如 relay 和 apollo-client。这些库可以帮助我们管理查询响应的缓存，并且提供了一些高级的功能，比如缓存响应逻辑复杂的查询、对变量化的查询响应进行缓存等等。
使用服务端缓存，可以考虑使用一些缓存中间件，比如 Apollo Server 中的 DataSources 和 InMemoryCache。它们可以帮助我们缓存查询结果，并且具备一些高级的功能，比如配置查询结果的过期时间、失效策略等等。
针对特定的查询控制缓存，可以使用一些特殊功能。例如，GraphQL 的查询中可以添加字段参数，其中包括缓存指令。GraphQL支持三个缓存指令：
@cacheControl(maxAge: Int!, scope: CacheControlScope!)
@deprecated(reason: String = "No longer supported", alternate: String)
@include(if: Boolean)
@skip(if: Boolean)
@Client
@export
@external
@connection
其中，@cacheControl 指令用于控制响应的缓存。maxAge 参数指定响应可以被缓存多长时间。CacheControlScope 可以是 PUBLIC（意味着任何人都可以缓存 Response），PRIVATE（只缓存该会话），或者是一个自定义组合的 list。
举个例子，假设我们有如下的 GraphQL 查询：
-- -------------------- ---- ------- ----- - ----- - -- ----- ------ - --------- -------- - - -展开代码
我们可以通过以下方式来控制缓存：
-- -------------------- ---- ------- ----- --------------------- ----- - ----- - -- ----- ------ - --------- -------- - - -展开代码
上面的例子中，maxAge 参数指定了缓存时间，如果服务器返回的响应未超过这个时间，那么响应将被缓存。如果响应时间超过了这个时间，则此缓存将被视为无效。
示例代码
在 Apollo Server 中，可以使用 DataSources 和 InMemoryCache 中间件来实现缓存。示例如下：
-- -------------------- ---- ------- ----- - ------------- --- - - ------------------------- ----- - -------------- - - ---------------------------------- ----- - ------------- - - --------------------------------- ----- -------- - ---- ---- ---- - ------ ------- ------- ------- - ---- ------ - ---------- ------- --------- ------- - ---- ----- - ------ ------- - -- ----- -------- ------- -------------- - ------------- - -------- ------------ - ------------------------- - ----- ---------- - ------ ------------------- - - ----- --------- - - ------ - ------ ----- --- --- - ----------- -- -- - ------ -------------------------------- -- -- -- ----- ------ - --- -------------- --------- ---------- ------------ -- -- -- --------- --- ----------- --- ------ --- --------------- ------------- - ------ - ------- - ------ - -------- ------ -------------- - --- --------- - ------ ------------- ------------- -- -- -- -- -- --- --- ----------------------- --- -- -- - ------------------- ----- -- --------- ---展开代码
在上面的示例中，我们使用 RESTDataSource 从本地服务器获取数据，然后在 ApolloServer 中使用 InMemoryCache 中间件来实现服务端缓存。typePolicies 指定了缓存的合并策略。在这个例子中，我们将合并现有的 books 查询结果和新的查询结果，并返回合并后的结果。
结论
缓存对于前端应用来说非常重要，特别是对于大规模的数据集，并且 GraphQL 的特性可以帮助我们更好地控制缓存。如果正确地实现了缓存控制，可以大大提高应用的性能，并减少请求次数。本文详细介绍了在 GraphQL 中实现缓存的基本原理，以及使用客户端缓存和服务端缓存的示例代码。如果你想进一步了解 GraphQL 和缓存的相关内容，请阅读官方文档和相关资料。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6711fbcfad1e889fe201fdc5
