使用 GraphiQL 进行 GraphQL 查询-JavaScript中文网-JavaScript教程资源分享门户

使用 GraphiQL 进行 GraphQL 查询

AI 编程助手，豆包旗下的编程助手，提供智能补全、智能预测、智能问答等能力，节省开发时间，释放脑海中的创造力，支持 VSCode，点击体验 AI

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