GraphQL 是一种新型的 API 查询语言,它以一种更加高效、强类型和可理解的方式,将数据查询和操作与客户端代码解耦。虽然 GraphQL 具有许多优点,但我们在开发过程中可能需要测试查询和调试问题。
在这种情况下,我们可以使用 GraphiQL 工具,它提供了一个可视化的界面,帮助开发人员在浏览器中进行 GraphQL 查询和 Mutation 操作,以及了解 GraphQL API 的架构和模式。
安装 GraphiQL
在开始使用 GraphiQL 之前,我们需要安装它。如果你使用的是基于 Node.js 开发的项目,那么可以使用 npm
或 yarn
安装以下依赖包:
--- ------- ------- --------------- ------- --------
如果你会使用 yarn
,则可以运行以下命令进行安装:
---- --- ------- --------------- ------- --------
使用 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