GraphQL是一种数据查询语言和API协议，它可以让前端工程师非常灵活的控制数据的取舍，并且在客户端和服务器方面都很高效。在GraphQL中，我们需要了解一些数据取舍技巧，以便在前端工程中使用它们。
数据取舍的目的
在大多数前端应用程序中，我们只需要每个页面或组件所需要的数据。如果我们从服务器检索大量不必要的数据，那么就会降低性能，导致浪费带宽和资源。使用GraphQL，我们可以选择我们需要的数据仅仅只是从服务器请求这些字段。
GraphQL的查询和变异
在GraphQL中，查询和变异是两种不同的操作。查询用于读取数据，并将其传递到前端应用程序中。变异用于写入和修改数据，例如创建、更新或删除实体。在本文中，我们将关注查询。
使用GraphQL的字段
GraphQL中的每个字段代表一个唯一的数据项。这些字段可以是标量（例如字符串、数字等），也可以是复杂类型（例如对象或数组）。要从服务器获取字段，我们需要在查询时指定它们。例如：
-- -------------------- ---- -------
----- -
---- -
----
-----
------- -
---
---------
-
-
-在这个例子中，我们从服务器请求了一个用户的名称、电子邮件和简档信息。如果我们只想要名称和电子邮件，我们可以更改查询以仅请求这些字段：
query {
user {
name
email
}
}如果我们只想要名称和简档中的兴趣，我们可以使用嵌套查询：
query {
user {
name
profile {
interests
}
}
}GraphQL中的片段
有时候我们需要在多个查询中重用相同的字段，因此GraphQL提供了片段的概念。片段是一个命名的列，它可以在查询中重复使用。例如：
-- -------------------- ---- -------
-------- ---------- -- ---- -
----
-----
------- -
---
---------
-
-
----- -
---- -
-------------
-
-
----- -
----- -
-------------
-
-在这个例子中，我们定义了一个名为userFields的片段，它包含了我们想从服务器检索的用户字段。我们可以在多个请求中使用片段。
GraphQL中的变量
有时候我们需要在查询中使用参数，例如限制结果的数量或过滤器数据。在GraphQL中，我们可以使用变量来代替这些参数。例如：
query ($email: String!) {
user(email: $email) {
name
email
}
}在这个例子中，我们定义了一个名为$email的字符串变量，它是必需的。当我们发出查询时，我们通过将变量传递给查询来填充$email。例如：
{
"email": "example@example.com"
}确保对变量进行类型检查和验证，以避免在发送到服务器之前进行错误的查询。
结论
GraphQL是一个非常强大的工具，它允许我们非常灵活地控制数据取舍。在GraphQL中，我们可以通过选择我们需要的字段来提高性能，并且还可以使用片段和变量来重用查询和增加灵活性。务必花费一些时间来了解这些数据取舍技巧，并在你的项目中使用它们，这将使你成为更好的前端工程师。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6707b78ad91dce0dc86bca1b