在前端开发中，前端工程师们经常需要获取后端接口中的数据，同时也需要根据业务逻辑对这些数据进行处理、过滤和剪裁。GraphQL 的出现为前端开发带来了一种全新的方式来操作数据，不仅可以通过 GraphQL 语言定义数据结构，也可以通过 GraphQL 查询语言对接口进行操作。
在 GraphQL 查询语言中，我们可以使用摘要查询和剪裁查询两种方式对数据进行操作。本文将详细介绍这两种查询方式的使用方法，并且提供实际的应用案例。
摘要查询
当我们需要从后端接口中获取一些数据的摘要时，可以使用 GraphQL 的摘要查询。
摘要查询是一种查询方式，它可以帮助我们获取数据的总数或者数据的部分字段，从而帮助我们快速了解我们需要的数据信息。
假设我们有一个 GraphQL 接口，它返回了一个数据列表，我们可以定义一个摘要查询来获取该数据列表中的数据总数：
query {
productsConnection {
totalCount
}
}上面这段摘要查询定义了一个 query，并指定了我们需要从接口中获取的数据是 productsConnection，同时我们还使用了 totalCount 来获取数据的总数。
摘要查询也可以用来获取列表中的部分字段。举例来说，如果我们需要获取一个商品列表，但是只需要该商品的名称和价格信息，我们可以定义一个类似下面这样的摘要查询：
-- -------------------- ---- -------
----- -
--------------- -- -
----- -
---- -
-----------
------------
-
-
-
-在上面的摘要查询中，我们使用了 products 来指定需要获取的数据列表。我们可以通过设置参数 first 来指定我们需要获取的列表数量，这里的参数值为 5，也就是只获取列表中的前 5 个数据。同时，我们还从每个产品节点中取出了 productName 和 productPrice 这两个字段信息。
这样就可以方便快速地获取一些较为基础的数据信息了。
剪裁查询
在 GraphQL 查询语言中，剪裁查询是一种更加高级的用法。剪裁查询可以让我们自由地选择需要从接口中获取的具体数据内容，并可根据需求对数据进行再加工。
假设我们需要从一个 GraphQL 接口中获取一个订单列表，并对每个订单的信息进行加工后展示。那么我们可以利用剪裁查询来满足这个需求。
使用 GraphQL 剪裁查询时，我们可以通过定义一个 fragment 来指定需要剪裁的具体数据项。下面是一个基本的剪裁查询示例：
-- -------------------- ---- -------
-
--------- ------ -
--
-------- -
---------
--------
-
----- -
--- -- ------- -
---
----
-----
-
--- -- --------- -
---
----
-----
------
-----
-
-
-
-
-------- ------------- -- ------- -
---
----
-----
-
-------- --------------- -- --------- -
---
----
-----
------
-----
-在上面的剪裁查询中，我们首先使用了 order 来指定我们需要获取的订单信息。同时，我们还获取了订单所属的用户信息和订单的商品信息。
在商品信息的部分，我们使用了 ... on Product 和 ... on Furniture 来区分不同的商品类型，并且指定了每个商品类型对应的剪裁项。我们通过定义 ProductFields 和 FurnitureFields 来指定需要从每个商品中剪裁的具体字段。
这样我们就可以自由地定制需要剪裁的内容，从而更加方便地展示数据了。
总结
本文详细介绍了 GraphQL 中的摘要查询和剪裁查询两种查询方式，并且提供了实际的应用案例。摘要查询可以帮助我们快速了解数据总览或部分字段信息，而剪裁查询则更加高级，可以让我们自由地选择需要获取的数据内容，并且可以对数据进行加工再处理。
在学习和使用 GraphQL 过程中，我们可以根据需求灵活选择合适的查询方式，以便更好地实现我们需要的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646d66ca968c7c53b0c16514