GraphQL 是一种新型的 API 查询语言，它以一种更加高效、强类型和可理解的方式，将数据查询和操作与客户端代码解耦。虽然 GraphQL 具有许多优点，但我们在开发过程中可能需要测试查询和调试问题。
在这种情况下，我们可以使用 GraphiQL 工具，它提供了一个可视化的界面，帮助开发人员在浏览器中进行 GraphQL 查询和 Mutation 操作，以及了解 GraphQL API 的架构和模式。
安装 GraphiQL
在开始使用 GraphiQL 之前，我们需要安装它。如果你使用的是基于 Node.js 开发的项目，那么可以使用 npm 或 yarn 安装以下依赖包：
npm install express express-graphql graphql graphiql
如果你会使用 yarn，则可以运行以下命令进行安装：
yarn add express express-graphql graphql graphiql
使用 GraphiQL 进行查询
接下来，我们将创建一个 Node.js 项目和一个 GraphQL API 并使用 GraphiQL 进行查询和调试操作。
1. 创建 GraphQL Schema
在 index.js 文件中，我们将创建一个 GraphQL Schema，它包含了两个类型：Person 和 Query。
-- -------------------- ---- -------
----- - ------------------ -------------- ------------- - - -------------------
----- ---------- - --- -------------------
----- ---------
------- -- -- --
--- - ----- ------------- --
----- - ----- ------------- --
---- - ----- ------------- --
---- - ----- ------------- --
----- - ----- ------------- --
---
---
----- --------- - --- -------------------
----- --------
------- -
------- -
----- -----------
----- -
--- - ----- ------------- --
--
--------------- ----- -
--- ----- -- -- -- ------ ---
--
--
--
---
-------------- - --- ---------------
------ ----------
---在这个 Schema 中，我们定义了 Person 类型，该类型具有 id、name、age、job 和 city 属性。然后我们定义了 Query 类型，该类型具有 person 属性，该属性接受一个 ID 作为参数，并返回一个 Person 对象。
2. 创建 GraphQL API 服务器
在 index.js 文件中，我们将创建一个 GraphQL API 服务器，以便我们可以使用 GraphiQL 工具进行测试。
-- -------------------- ---- -------
----- ------- - -------------------
----- ----------- - ---------------------------
----- ------ - --------------------
----- --- - ----------
--------
-----------
-------------
-------
--------- -----
--
--
----- ---- - -----
---------------- -- -- -
-------------------- ------ ------- -- ---- ----------
---在这个文件中，我们使用 express 库创建了一个服务器，并将 /graphql 路径映射到 graphqlHTTP 中间件。该中间件接受一个 GraphQL Schema 和一个 graphiql 参数，该参数为 true 时会将 GraphiQL 集成到 API。
3. 在 GraphiQL 中进行查询操作
完成上述步骤后，我们可以在浏览器中访问 http://localhost:3000/graphql 并打开 GraphiQL 进行查询操作。我们可以执行以下查询：
-- -------------------- ---- -------
-
---------- ---- -
--
----
---
---
----
-
-这将返回 ID 为 1 的 Person 对象，该对象具有 id、name、age、job 和 city 属性。
总结
在本文中，我们学习了如何使用 GraphiQL 工具，它可以帮助我们在浏览器中进行 GraphQL 查询和操作，以及了解 GraphQL API 的架构和模式。我们创建了一个 GraphQL Schema 和一个 GraphQL API 服务器，并在 GraphiQL 中进行了查询操作。在实际开发过程中，GraphiQL 工具可以非常方便地用于调试和测试 GraphQL API。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6450ecc8980a9b385b9cab82