GraphQL 是一种用于 API 的查询语言和运行时环境。它使得客户端能够准确地请求所需的数据，而不会请求过多或者过少的数据。本篇文章将介绍 GraphQL 的高级查询语言以及如何在前端应用中使用。
GraphQL 基础语法
GraphQL 查询语句由字段和参数组成。以下是一个基本查询的例子：
query {
user(id: 1) {
name
age
email
}
}在这个例子中，我们查询了一个用户的名称，年龄和电子邮件地址。它的响应将如下：
-- -------------------- ---- -------
-
------- -
------- -
------- --------
------ ---
-------- -------------------
-
-
-在 GraphQL 中，每个字段都有一个类型，并且可以向下探索嵌套的对象。例如，在下面的查询中，我们使用嵌套对象查询用户的地址信息：
-- -------------------- ---- -------
----- -
-------- -- -
----
---
-----
------- -
------
----
-----
---
-
-
-响应如下：
-- -------------------- ---- -------
-
------- -
------- -
------- --------
------ ---
-------- --------------------
---------- -
--------- ---- ---- -----
------- ----------
-------- -----
------ -------
-
-
-
-GraphQL 变量
GraphQL 变量使我们能够将变量传递到查询中。例如，可以查询多个用户的详细信息：
query Users($ids: [Int]) {
users(ids: $ids) {
id
name
age
email
}
}现在，我们可以使用变量查询任意数量的用户：
{
"query": "query Users($ids: [Int]) { users(ids: $ids) { id name age email } }",
"variables": { "ids": [1, 2, 3] }
}响应如下：
-- -------------------- ---- -------
-
------- -
-------- -
-
----- --
------- --------
------ ---
-------- -------------------
--
-
----- --
------- ------
------ ---
-------- -----------------
--
-
----- --
------- ----------
------ ---
-------- ---------------------
-
-
-
-GraphQL 操作
GraphQL 操作定义了一个查询或者一组查询，并且可以给它们起一个名称。例如，我们可以创建一个名为 UsersQuery 的操作，它查询所有用户的详细信息：
query UsersQuery {
users {
id
name
age
email
}
}我们还可以定义多个操作，并用 operationName 参数选择要执行的操作：
{
"query": "query { ...UsersQuery, ...UserQuery }",
"operationName": "UsersQuery"
}GraphQL 片段
GraphQL 片段使我们能够重复使用查询的部分。例如，我们可以定义一个名为 UserFields 的片段，并在多个查询中使用它：
fragment UserFields on User {
id
name
age
email
}现在，我们可以在查询中引用这个片段：
-- -------------------- ---- -------
----- --------- -
-------- -- -
-------------
-
-
----- ---------- -
----- -
-------------
-
-GraphQL 指令
GraphQL 指令使我们能够在查询中添加条件或修改查询的行为。例如，我们可以使用 @include 指令来决定某个字段是否应该包含在响应中：
query UserQuery($includeEmail: Boolean!) {
user(id: 1) {
name
age
email @include(if: $includeEmail)
}
}{
"query": "query UserQuery($includeEmail: Boolean!) { user(id: 1) { name age email @include(if: $includeEmail) } }",
"variables": { "includeEmail": true }
}响应如下：
-- -------------------- ---- -------
-
------- -
------- -
------- --------
------ ---
-------- -------------------
-
-
-我们也可以使用 @skip 指令来跳过某个字段：
query UserQuery($skipEmail: Boolean!) {
user(id: 1) {
name
age
email @skip(if: $skipEmail)
}
}{
"query": "query UserQuery($skipEmail: Boolean!) { user(id: 1) { name age email @skip(if: $skipEmail) } }",
"variables": { "skipEmail": true }
}响应如下：
{
"data": {
"user": {
"name": "Alice",
"age": 25
}
}
}GraphQL 高级查询语言
以上是 GraphQL 的基础语法，下面是一些高级查询语言的示例。
带有变量的查询
在下面这个查询中，我们使用变量过滤用户：
query UsersQuery($name: String, $email: String) {
users(name: $name, email: $email) {
id
name
email
}
}现在，我们可以使用变量过滤查询结果：
{
"query": "query UsersQuery($name: String, $email: String) { users(name: $name, email: $email) { id name email } }",
"variables": { "name": "Alice" }
}响应如下：
-- -------------------- ---- -------
-
------- -
-------- -
-
----- --
------- --------
-------- -------------------
-
-
-
-带有别名的查询
在下面这个查询中，我们使用别名来查询每个用户的项目：
-- -------------------- ---- -------
----- ---------------- -
----- -
--
----
-------- -
--
----
-
-
-在这个查询中，我们不能直接访问用户和项目的 id 字段，因为它们冲突了。我们可以使用别名来解决这个问题：
-- -------------------- ---- -------
----- ---------------- -
----- -
------- --
----
-------- -
---------- --
----
-
-
-带有默认值的变量
在下面这个查询中，我们使用变量来查询用户名，如果变量不存在，则默认查询所有用户：
query UsersQuery($name: String = "") {
users(name: $name) {
id
name
email
}
}响应如下：
-- -------------------- ---- -------
-
------- -
-------- -
-
----- --
------- --------
-------- -------------------
--
-
----- --
------- ------
-------- -----------------
--
-
----- --
------- ----------
-------- ---------------------
-
-
-
-带有分页的查询
在下面这个查询中，我们使用分页来查询用户：
-- -------------------- ---- -------
----- ------------------ ---- ------- ------- -
------------ ------- ------ ------- -
-------- -
-----------
---------
-
----- -
---- -
--
----
-----
-
------
-
-
-现在，我们可以使用变量来分页查询用户：
{
"query": "query UsersQuery($first: Int, $after: String) { users(first: $first, after: $after) { pageInfo { hasNextPage endCursor } edges { node { id name email } cursor } } }",
"variables": { "first": 2 }
}响应如下：
-- -------------------- ---- -------
-
------- -
-------- -
----------- -
-------------- -----
------------ --------------
--
-------- -
-
------- -
----- --
------- --------
-------- -------------------
--
--------- --------------
--
-
------- -
----- --
------- ------
-------- -----------------
--
--------- --------------
-
-
-
-
-带有联合类型的查询
在下面这个查询中，我们使用联合类型查询所有评论：
-- -------------------- ---- -------
----- ------------- -
-------- -
--
-------
--- -- ------- -
---- -
--
----
-
-
--- -- ----------- -
---- -
--
-----
-
-
-
-在这个查询中，comments 字段返回了一个联合类型，即 Comment 和 PostComment。我们使用 ... on 来指定条件，并查询评论的详细信息。
结论
在本文中，我们介绍了 GraphQL 的基础语法和高级查询语言。我们学习了如何使用变量，别名，指令，操作和片段来构建复杂的查询。我们还学习了如何使用联合类型和分页查询。GraphQL 是前端开发中的一个强大工具，它可以提高开发效率并减少数据传输量。如果你还没有尝试过 GraphQL，请务必尝试一下。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f677afc5c563ced586f386