GraphQL 是一种用于 API 的查询语言，其灵活的数据查询能力让前端开发人员能够定制属于自己的数据需求。在 GraphQL 中，我们可以指定需要查询的字段，然后服务器会返回相应的数据。不过，有时候我们需要查询的数据却分布在多个类型之中，这时候就需要合并字段。
问题描述
假设我们有一个 GraphQL API，它提供了如下两个类型：
-- -------------------- ---- ------- ---- ------ - --- --- ----- ------- - ---- ---- - --- --- ------ ------- ------- ------- -
其中 Post 类型与 Author 类型之间存在关联，即每篇文章都由一个作者撰写。如果我们需要查询所有文章和它们的作者名字，可以这样写查询语句：
{
allPosts {
title
author {
name
}
}
}然而，如果我们需要 同时 查询文章的标题、作者的 ID 和作者的名字，我们该怎么办呢？根据上面的查询语句，我们不能同时查询这三个字段，因为 Post 和 Author 类型分别定义了 title 和 id 字段。这时我们需要使用 GraphQL 的字段合并操作。
解决方法
GraphQL 使用批处理的方式来执行多个查询，并且合并结果以便于前端开发人员进行数据操作。因此，我们可以使用 fragment 来解决字段合并问题。下面是一个例子：
-- -------------------- ---- -------
-
-------- -
-------------
------ -
---------------
-
-
-
-------- ---------- -- ---- -
--
-----
-
-------- ------------ -- ------ -
--
----
-通过使用 fragment，我们将作为一部分查询的字段列表重用了起来，这样我们就可以同时对文章和作者查询它们的 ID 和名字，而不用担心字段名冲突的问题。 这样我们就可以同时对文章和作者查询它们的 ID 和名字，而不用担心字段名冲突的问题。
实例代码
下面是一个完整的 GraphQL 查询示例，其中包含字段合并的 fragment 使用：
-- -------------------- ---- -------
----- -
-------- -
-------------
------ -
---------------
-
-
-
-------- ---------- -- ---- -
--
-----
-
-------- ------------ -- ------ -
--
----
-总结
通过使用 fragment 来解决 GraphQL 查询中字段合并问题，我们可以更方便地定义我们需要查询的字段，并避免字段名冲突的问题。在实际开发中，这种问题很常见。在理解了 GraphQL 的查询执行过程和 fragment 的使用方式后，我们就能够更高效地使用 GraphQL 并自如地操作我们需要的数据了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6454d3ed968c7c53b08941f7