GraphQL 是一种用于 API 的查询语言，它提供了一种更加高效、强大和灵活的数据查询方式。Fragments 是 GraphQL 中一个非常重要的概念，它可以帮助我们更好地组织和重用查询，提高代码的可读性和可维护性。
Fragments 是什么？
Fragments 是一种可以重用的 GraphQL 查询片段，它可以定义一组字段，并在查询中引用。通过使用 Fragments，我们可以将重复的代码抽象出来，避免代码冗余和维护成本的增加。
在 GraphQL 中，Fragments 是由 fragment 关键字定义的，它可以定义在查询、变量定义和 Schema 中。下面是一个简单的示例：
-- -------------------- ---- -------
-------- -------- -- ---- -
--
----
---
-
----- ---------------- ---- -
-------- -------- -
-----------
-----
-
-在上面的示例中，我们定义了一个名为 UserInfo 的 Fragment，它包含了 User 类型的 id、name 和 age 字段。在 GetUser 查询中，我们使用了 ...UserInfo 语法来引用 UserInfo Fragment，从而避免了重复定义相同的字段。
Fragments 的优势
使用 Fragments 有以下优势：
1. 提高代码的可读性和可维护性
通过使用 Fragments，我们可以将重复的代码抽象出来，提高代码的可读性和可维护性。当我们需要修改某个字段时，只需要修改一处定义即可，避免了重复修改的麻烦。
2. 提高查询效率
当我们需要查询多个字段时，使用 Fragments 可以将多个字段组合成一个查询片段，从而减少网络请求的次数，提高查询效率。
3. 支持嵌套 Fragments
在 GraphQL 中，Fragments 支持嵌套使用，这意味着我们可以在一个 Fragment 中引用另一个 Fragment，从而更好地组织和管理查询片段。
如何使用 Fragments？
使用 Fragments 非常简单，只需要遵循以下步骤：
1. 定义 Fragment
在查询、变量定义或 Schema 中使用 fragment 关键字定义一个 Fragment，定义方式与定义一个查询类似。
fragment UserInfo on User {
id
name
age
}2. 引用 Fragment
在需要使用该 Fragment 的查询中使用 ... 语法引用该 Fragment。
query GetUser($userId: ID!) {
user(id: $userId) {
...UserInfo
email
}
}3. 查询结果
执行查询后，返回的结果中包含了 Fragment 定义中定义的字段。
-- -------------------- ---- -------
-
------- -
------- -
----- ----
------- --------
------ ---
-------- -------------------
-
-
-示例代码
下面是一个完整的示例代码，演示了如何在 GraphQL 中使用 Fragments：
-- -------------------- ---- -------
-------- -------- -- ---- -
--
----
---
-
-------- -------- -- ---- -
--
-----
-------
-
----- ------------------------ ---- -
-------- -------- -
-----------
----- -
-----------
-
-
-在上面的示例中，我们定义了两个 Fragment：UserInfo 和 PostInfo，分别用于查询用户信息和用户发布的文章信息。在 GetUserAndPosts 查询中，我们使用了这两个 Fragment，从而避免了重复定义相同的字段。
总结
Fragments 是 GraphQL 中一个非常重要的概念，它可以帮助我们更好地组织和重用查询，提高代码的可读性和可维护性。使用 Fragments 非常简单，只需要遵循定义和引用的步骤即可。在实际开发中，我们应该充分利用 Fragments，避免重复定义相同的字段，提高查询效率和代码的可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65f164582b3ccec22fa1bc4c