GraphQL 是一种新型 API 后端技术，它允许前端开发者精确地获取一个 API 中的数据。和传统的 REST API 相比，它不需要繁琐的路由和多种不同的 HTTP 请求方式。而 GraphiQL 是一个用于测试 GraphQL API 的开源工具，它提供了一个强大的 Web UI，让我们可以通过输入查询语句来测试 GraphQL API。
本文将演示如何使用 GraphiQL 来测试 GraphQL API。我们将通过一个示例来了解它的使用方法。
安装 GraphiQL
GraphiQL 可以作为一个 Web 工具运行在浏览器中，也可以作为一个 npm 包在本地运行。
在浏览器中运行 GraphiQL
你只需要在你的浏览器中打开地址 https://graphql.github.io/swapi-graphql/gql/ 就可以看到一个 GraphiQL 的示例。它是一个测试 Star Wars API 的示例。
在本地运行 GraphiQL
如果你想在本地使用 GraphiQL，你可以通过 git clone 命令将它下载到你的本地环境：
git clone https://github.com/graphql/graphiql.git cd graphiql npm install npm run serve
GraphiQL 将在本地启动一个服务，并自动打开你的浏览器。你可以在浏览器中打开地址 http://localhost:3000/ 来访问 GraphiQL 工具箱。
在 GraphiQL 中应用 GraphQL 查询
我们来举一个简单的例子，我们想要从一个 GraphQL API 中获取一个人（Person）的信息。先来了解一下请求语法。
请求语法
GraphQL 查询语句是一个类似于 JSON 的语法。例如：
-- -------------------- ---- -------
-
---------- ------- -
-----
-----------
-------
----- -
------
---------
------------
-
-
-上面的查询语句将返回一个 person 对象。这个 person 对象包含了指定 id 的人的姓名、出生年份、身高、和所有电影的信息。在这个例子中，我们使用了 GraphQL 中的 Scalars 和 Objects 对象。Scalars 是 GraphQL 的基础类型，例如 String、Int 和 Boolean。Objects 是一个自定义类型，它通常表示一个领域模型中的一个实体。
在 GraphiQL 中请求数据
我们试着使用上面的查询语句在 GraphiQL 中请求一个人的信息。
- 打开 GraphiQL
- 在左上角的窗口中粘贴上面的查询语句
- 点击运行按钮
- 在右边的窗口中会显示请求结果
这个请求会返回指定 id 为 "1000" 的人的所有信息。
在 GraphiQL 中浏览数据
通过 GraphiQL，我们还可以很方便地浏览 GraphQL API 中的所有数据。例如，我们可以通过以下语句来浏览一个人（Person）的所有信息：
-- -------------------- ---- -------
-
------------ --------- -
------ -
-----
---- -
-----
-----
------ -
-----
----
-
-
-
-
-这个请求将返回一个 Person 类型的所有属性。在 GraphiQL 中，我们可以方便地获取 GraphQL 的 schema 信息，从而知道如何使用它提供的功能。
总结
在本文中，我们介绍了如何使用 GraphiQL 工具箱来测试 GraphQL API。通过 GraphiQL，我们可以方便地构造并测试 GraphQL 查询语句，浏览 GraphQL API 的 schema 信息。
GraphQL 是一个强大的 API 技术，它可以让前端开发者更加精确地访问 API 中的数据。如果你正在开发一个新的 API 或正在优化一个旧的 API，那么 GraphQL 可能是一个很好的选择。
参考代码如下：
-- -------------------- ---- -------
- ------- -- --- ----------- ----- - ------
-
---------- ------- -
-----
-----------
-------
----- -
------
---------
------------
-
-
-
- ------- -- --- --- --- ------ -- - ------ ----
-
------------ --------- -
------ -
-----
---- -
-----
-----
------ -
-----
----
-
-
-
-
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646ed615968c7c53b0d388f3