GraphQL 是现代 Web 应用开发中非常流行的 API 查询语言，它可以让前端开发者更加高效地从后端 API 获取数据。在 GraphQL 中，我们通过定义 Query 和 Mutation 来定义应用的数据查询和更新操作。其中，Fragment 可以让我们重复使用相同的查询片段，避免在每个 Query 中重复定义相同的字段。
graphql-fragmental 是一个用于 GraphQL 的 npm 包，它允许我们使用 Fragment 更加方便和灵活地定义 Query 中的查询字段。本文将为你介绍这个 npm 包的使用方法和示例代码。
安装
使用 npm 安装 graphql-fragmental：
npm install graphql-fragmental --save
或者使用 Yarn：
yarn add graphql-fragmental
使用
我们首先需要定义一个 GraphQL Query，例如：
-- -------------------- ---- -------
----- ------------- ----- -
-------- ---- -
--
----
-----
-
------------ --- -
--
-----
-------
------ -
--
----
-
-
-在这个 Query 中，我们需要通过 user 和 posts 两个字段来获取用户的基本信息和最新的10篇文章。其中，我们可以看到 author 字段是重复出现的，我们可以通过 Fragment 来简化查询语句，例如：
-- -------------------- ---- -------
-------- ------------ -- ---- -
--
----
-
----- ------------- ----- -
-------- ---- -
--
----
-----
-
------------ --- -
--
-----
-------
------ -
---------------
-
-
-在这个 Query 中，我们通过 Fragment 来定义了 author 字段的查询片段，然后通过 ...authorFields 来引用这个 Fragment。
但是，我们通常需要在代码中动态地构建 Query，因此我们需要将 Fragment 的定义和 Query 的定义分开。graphql-fragmental 允许我们这样做。
-- -------------------- ---- -------
------ --- ---- -------------
------ - ------------------ -------------- - ---- --------------------
----- -------------- - ----
-------- ------------ -- ---- -
--
----
-
-
----- ------------- - ----
----- ------------- ----- -
-------- ---- -
--
----
-----
-
------------ --- -
--
-----
-------
------ -
---------------
-
-
-
-
----- --------- - ---------------------------------
----- ------------------ - ------------------------- --------------
-------------------------------在这个代码中，我们首先使用 gql 函数定义了 authorFragment 和 userFeedQuery 两个 Query。然后，我们使用 GenerateFragments 函数来将所有 Fragment 的定义解析成一个字符串。最后，我们使用 ApplyFragments 函数将字符串片段应用到 Query 中，并输出最终的 Query 结果。
示例代码
-- -------------------- ---- -------
------ --- ---- -------------
------ - ------------------ -------------- - ---- --------------------
----- ------------- - ----
-------- ----------- -- ---- -
--
-----
-------
------ -
---------------
-
-
-
----- -------------- - ----
-------- ------------ -- ---- -
--
----
-
-
----- ------------- - ----
----- ------------- ----- -
-------- ---- -
--
----
-----
-
------------ --- -
--------------
-
-
-
----- --------- - -------------------------------- ---------------
----- ------------------ - ------------------------- --------------
-------------------------------在这个代码中，我们定义了两个 Fragment：postsFields 和 authorFields，然后使用 ApplyFragments 函数将这两个 Fragment 应用到 Query 中，输出最终的 Query 结果。这个 Query 包含了 user 和 posts 两个字段，其中 posts 字段包含了由 postsFields 和 authorFields 组成的查询片段。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b1a81e8991b448d8c4c