GraphQL 是一种新兴的数据查询语言，它可以将多个 RESTful API 请求集中合并为一个请求，并返回客户端所需的全部数据。 在优化 GraphQL 查询性能方面，缓存和预取是两个关键技术。
什么是缓存?
缓存是一种常见的性能优化技术，它可以减少不必要的请求，从而提高应用程序的响应速度。在 GraphQL 中，缓存可以是前端缓存和服务器缓存的组合。
前端缓存可以通过将数据保存到浏览器的 LocalStorage 或环境变量中来实现。在 GraphQL 中，前端缓存可以在应用程序中使用 Apollo 客户端。Apolo 客户端默认使用 InMemoryCache 组件来缓存数据。InMemoryCache 表示以 LRU 缓存项为基础维护所有缓存记录。这种缓存技术可以让客户端在需要时快速获取数据而无需再次向服务器发出请求。
服务器缓存可以通过一系列技术来实现，在 GraphQL 中，服务器缓存可以使用使用 Resolvers，实现控制器级别的缓存机制。 Resolvers 可以支持数据的结果不变性检测，避免在同时发生大量并发请求时，查询结果不会重复执行。
什么是预取?
预取是另一种优化 GraphQL 性能的技术。和缓存不同，预取是在数据请求之前就开始准备目标数据，并在数据请求完成后一起返回给客户端。这种技术可以减少网络传输的时间，降低应用程序响应时间，提高性能。
GraphQL 中的预取通常使用 DataLoader 实现，DataLoader 是一个基于 Node.js 编写的 JavaScript 代码库。它能够在后端在去重逻辑下，提升分布式的查询效率，并对数据库的查询次数进行一定的优化。
如何使用缓存和预取优化 GraphQL 查询?
下面是一个使用缓存和预取的示例代码。
-- -------------------- ---- -------
------ ---------- ---- -------------
------ - ------------ - ---- ------------------------
------ ------- ---- ----------
------ - ------------- - ---- ------------------------
------ - -------------- - ---- -------------------
------ - ---------- - ---- ----------------------
------ - ---------- - ---- --------------
----- --- - ----------
-- ---- --- --------
----- -------- - ----------------
---- --------------------------------
---
----- -------- - ---------------- --- - ------- -- -- -
----- ----- - ----- ---------------- -- -------
------ -
-------- -
-----------
-------------- ----- - ------- --------- - ---
--
--
---
-- ----- ------ ------ -------------
----- ----- - --- ----------------
----- ---- - -------------------------- -----------
----- ------ - --- --------------
------
-----
---
-- ------- -- ---------- --- ----- -- -- --------
----- ---------- - --- ----------------- --
----------------------
--
----- --------- - -
------ -
------------ ----- ------ - -- -- -- --------------------
-
--
-- ----- ------ ------ -------------
----- ------ - --- --------------
---------
----------
-------- -- --- -- -- -- ------- ---- ---
---
------------------------ --- ---
---------------- -- -- -
---------------------- -- ---- -------
---
请注意示例代码中 DataLoader 的使用和客户端和服务器缓存的实现。此代码将优先使用本地缓存或服务器缓存，这可以根据你的具体情况进行更改。
结论
缓存和预取是两个优化 GraphQL 查询性能的核心技术。使用这些技术，我们可以更快地获取所需数据，减少不必要的请求和减少响应时间。虽然缓存和预取都需要消耗额外的内存和处理器资源，但在合理使用下，可以将其应用于大多数场景中，特别是对于高速发展中的现代 Web 应用程序来说，这是一个不可或缺的提高性能的技术手段。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fc74a844713626016e5742