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