GraphQL 是一个用于 API 的查询语言和运行时环境，它可以让客户端精确地获取需要的数据而不浪费带宽。在 GraphQL 查询中，Fragment 是一个非常实用的工具，它可以帮助我们更好地组织和重用查询代码。本文将介绍 Fragment 的使用技巧，帮助你更好地利用 GraphQL 进行前端开发。
什么是 Fragment
Fragment 是 GraphQL 查询中的一个重要概念，它允许我们将查询代码分解为多个部分并重用它们。Fragment 可以理解为一个命名的查询，它包含了一些字段和类型定义。我们可以在查询中使用 Fragment 来引用这些字段和类型定义，从而避免重复书写代码。
下面是一个简单的 Fragment 示例：
-- -------------------- ---- -------
-------- ---------- -- ---- -
--
----
-----
-
----- ------- -
-------- ------ -
-------------
-
-在这个示例中，我们定义了一个名为 UserFields 的 Fragment，它包含了 User 类型的 id、name 和 email 字段。然后我们在查询中使用 ...UserFields 来引用这个 Fragment，从而避免了重复书写相同的字段。
如何使用 Fragment
Fragment 可以在查询中任何地方使用，包括 query、mutation 和 subscription。使用 Fragment 的步骤如下：
定义 Fragment：使用
fragment关键字定义一个 Fragment，指定 Fragment 名称和类型定义。编写查询：编写查询时，可以使用
...FragmentName来引用 Fragment。
下面是一个更复杂的示例，展示了如何使用 Fragment 来重用查询代码：
-- -------------------- ---- -------
-------- ---------- -- ---- -
--
----
-----
-
----- -------- -
-------- -
-------------
-
-
----- -------------- -
---------------- - --------- ---- -- -
-------------
-
-在这个示例中，我们定义了一个名为 UserFields 的 Fragment，它包含了 User 类型的 id、name 和 email 字段。然后我们在 GetUsers 和 GetActiveUsers 查询中使用 ...UserFields 来引用这个 Fragment，从而重用了查询代码。
Fragment 的嵌套使用
在 GraphQL 查询中，Fragment 可以嵌套使用，这样可以更好地组织和重用查询代码。下面是一个示例：
-- -------------------- ---- -------
-------- ------------- -- ------- -
--
----
------ -
-------------
-
-
-------- ---------- -- ---- -
--
----
-----
-
----- ------- -
-------- ------ -
-----
-------
-------- -
----------------
-
-
-在这个示例中，我们定义了两个 Fragment：CommentFields 和 UserFields。然后我们在 CommentFields Fragment 中使用了 ...UserFields 来引用 UserFields Fragment，从而嵌套使用了 Fragment。
Fragment 的动态使用
在 GraphQL 查询中，Fragment 也可以动态使用，这样可以根据不同的条件选择不同的 Fragment。下面是一个示例：
-- -------------------- ---- -------
-------- ---------- -- ---- -
--
----
-----
-
-------- ----------- -- ---- -
--
----
-----
----
-
----- ------------ ---- --------- --------- -
-------- ---- -
-------------
-------------- ------------ ---------
-
-在这个示例中，我们定义了两个 Fragment：UserFields 和 AdminFields。然后我们在查询中使用了 ...UserFields 和 ...AdminFields 来引用这两个 Fragment。在 AdminFields 中，我们使用了 @include 指令来根据 $isAdmin 变量的值来选择是否包含这个 Fragment。
总结
Fragment 是 GraphQL 查询中的一个重要概念，它可以帮助我们更好地组织和重用查询代码。在查询中使用 Fragment 的步骤如下：
定义 Fragment：使用
fragment关键字定义一个 Fragment，指定 Fragment 名称和类型定义。编写查询：编写查询时，可以使用
...FragmentName来引用 Fragment。
Fragment 还可以嵌套使用和动态使用，这样可以更好地适应不同的业务场景。在实际开发中，合理使用 Fragment 可以提高代码的可维护性和可重用性，是一个非常实用的技巧。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658a68adeb4cecbf2df9803a