GraphQL 是一种 API 查询语言，它可以让前端开发者灵活地定义需要从 API 中获取的数据。在传统的 RESTful API 架构中，每个接口只能返回固定结构的数据，而 GraphQL 允许客户端指定需要的数据字段和数据结构，从而减少了网络负载，提高了代码的复用性。GraphQL 还具备查询缓存的功能，即相同的查询只会被执行一次，这也大大提高了应用程序性能。
在 GraphQL 中，查询复用是一种有效的优化策略。通常情况下，同一个页面或组件会请求多个类似的查询。如果每次都新发起请求，会导致网络开销增加，页面渲染速度变慢。相反，通过查询复用，可以共享已缓存的查询结果，从而减少重复请求。
下面介绍一些实现查询复用的方式。
Fragments
Fragment 是一种用于定义 GraphQL 中的查询片段的方式。它可以被不同的查询引用，从而实现查询复用。Fragment 主要由两个部分组成：命名和类型。例如，对于一个 User 类型的 Fragment：
fragment UserInfo on User {
name
email
avatarUrl
}其中，UserInfo 为 Fragment 的名称，User 为 Fragment 应用的类型。使用 Fragment 时，只需要像下面这样进行引用：
query GetUserData {
user(username: "alice") {
...UserInfo
}
}引用时使用三个点加上 Fragment 名称即可。
Query Variables
Query Variables 是一个 GraphQL 请求中的参数对象。通过使用 Query Variables，可以将请求的参数和参数值从查询字符串中分离出来，并可避免 SQL 注入等危险。对于相似的查询，可以将共同的变量提取成 Query Variables。
例如，下面是两个相似的查询：
-- -------------------- ---- -------
----- --------------------- -
-------------- ------ -
--
----
-----
------
-
-
----- ------------------ -
-------------- ------ -
--
----
-----
---
-
-其中，两个查询都请求了相同的用户数据，只是字段不同。通过将共同的变量提取成 Query Variables，可以减少代码冗余：
-- -------------------- ---- -------
----- ---------------------- ------- ------- -------- -
-------------- ---------- -
--
----
-----
----------------
-
-
-------- ------------- -- ---- -
--- -- ---------- -
------
-
--- -- ------- -
---
-
-
----- -------------------------------- -------- -
-------------- ---------- -
----------------
-
-
----- ----------------------------- -------- -
-------------- ---------- -
----------------
-
-其中，UserDataField Fragment 使用了 GraphQL 中的 Interface 和 Union 类型来支持不同类型的查询结果。通过 Query Variables，可以根据具体的查询情况传递不同的 $field 值，从而实现查询复用。
Caching
GraphQL 具有查询缓存功能，可以减少重复请求。缓存的实现方式取决于服务器端的具体实现，通常有三种方式：
- 基于查询字符串的缓存：类似于传统的 HTTP 缓存，服务器将根据查询字符串的 hash 值将响应内容缓存起来，下次相同的查询则直接返回缓存中的结果。
- 基于查询变量的缓存：查询中的变量会影响查询结果，因此服务器可以根据查询变量生成唯一的查询标识，并将查询结果缓存起来，下次相同的查询变量则直接返回缓存中的结果。
- 基于 Context 的缓存：GraphQL 可以通过设置 Context 来实现查询缓存。例如，将某个查询结果放入 Context 中，下次请求时可以从 Context 中读取结果，避免重复的查询。
总结
查询复用是实现 GraphQL 查询优化的重要手段之一。通过使用 Fragments 和 Query Variables，可以将相似的查询进行封装和复用。同时，GraphQL 的缓存机制也可以大大提高查询效率。在实际开发中，可以根据具体的业务需求进行选择，从而优化查询性能，减少不必要的网络请求。
示例代码
下面是一个基于 React 和 Apollo Client 的示例代码，演示如何使用 Fragments 和 Query Variables 来实现查询复用。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- -------- - ---- -----------------
----- ---------------- - ----
-------- -------- -- ---- -
--
----
-----
-
--
----- ------------------ - ----
-------- ---------- -- ---- -
---------
-
--
----- ---------- - ----
----- ------------------ -------- -
-------------- ---------- -
-----------
-------------
-
-
-------------------
---------------------
--
-------- ------------- -------- -- -
----- - -------- ------ ---- - - -------------------- -
---------- - -------- --
---
-- --------- ------ ------------------
-- ------- ------ -------- -------
----- - ----- ------ --------- - - ----------
------ -
--
---- --------------- --------------- -------- --
-------- ----------
--------- -----------
---
--
-在该示例中，通过定义 UserInfoFragment 和 UserAvatarFragment，将查询结果进行了封装，再在 USER_QUERY 中进行引用。useQuery 钩子函数接受 QUERY 字符串和变量参数，读取缓存后返回查询结果。如此，同样的查询只会在首次进行网络请求，其余都是直接从缓存中读取结果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d1b438b5eee0b52590fa19