GraphQL 是一种用于 API 的查询语言，它可以帮助前端开发人员从服务端获取所需的数据。但是，有时我们并不需要服务端返回所有字段，这时就需要限制查询返回的字段，以提高 API 的性能和安全性。
在 GraphQL 中，我们可以使用一种称为“查询语法”的语言来请求数据。查询语法允许我们指定要获取的字段，以及字段的嵌套关系。以下示例展示了如何发起一个简单的查询请求：
query { user { id name email } }
在上述查询中，我们请求服务端返回用户的 id、name 和 email 三个字段。如果服务端返回的数据还包含其他字段，那么这些字段将被忽略。
下面我们来介绍三种方法来限制查询返回的字段。
第一种方法：使用片段（Fragments）
片段是一种将多个字段组合成单个视图的重复元素。通过将字段组合在一起并将其封装在一个片段中，我们可以更方便地重用它们，并将其应用于多个查询。
下面是一个示例，我们使用片段限制查询返回的字段：
-- -------------------- ---- ------- -------- ----------- -- ---- - -- ---- ----- - ----- - ---- - -------------- - -展开代码
在上述代码中，我们使用一个名为“UserDetails”的片段，它包含了 id、name 和 email 三个字段。在查询中，我们使用了 ...UserDetails 语法将该片段应用到了 user 字段上。这就是如何通过片段来限制查询返回的字段。
第二种方法：指定查询返回的字段
我们可以使用 GraphQL 的语法来手动指定要返回的字段，而不是指定要忽略的字段。这种方法非常适合需要细粒度控制返回数据的场景。
下面是一个示例，我们手动指定要返回的字段：
query { user { id name } }
在上述代码中，我们查询服务端返回用户的 id 和 name 两个字段。由于我们没有请求 email 字段，因此该字段将不会被返回。
第三种方法：使用变量
使用变量可以让我们更好地控制查询返回的字段。变量本身是一个类似于 JavaScript 对象的结构，它定义了我们要查询的字段。我们可以使用变量来移除或添加我们需要的字段。
下面是一个示例，我们使用变量来限制查询返回的字段：
query User($fields: [String!]) { user { id name email @include(if: $fields contains "email") age @include(if: $fields contains "age") } }
在上述代码中，我们定义了一个名为 $fields 的变量，它是一个字符串数组，表示我们需要返回的字段。在查询中，我们使用了 @include 注释来控制 email 和 age 字段的返回。如果 $fields 数组中包含字符串 "email"，则服务端将返回 email 字段；同样的，如果 $fields 数组中包含字符串 "age"，则服务端将返回 age 字段。
上述三种方法都可以用来限制查询返回的字段。它们都有相应的使用场景和优缺点，需要根据具体的需求来选择。同时，了解这三种方法也可以帮助我们更好地理解 GraphQL 的查询语法。
希望本文能对你对 GraphQL 的理解有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/678504069137010942f9536e
