GraphQL 是一种新兴的 API 查询语言，它具有强大的查询功能和灵活的数据获取方式。在前端开发中，我们经常需要与后端进行数据交互，而 GraphQL 可以帮助我们更方便地实现数据的获取和处理。
在本文中，我们将介绍如何使用 Hapi 框架来开发 GraphQL API，包括创建 GraphQL Schema、定义 Resolver 和执行查询等方面。
准备工作
在开始之前，需要先安装以下工具：
- Node.js
- npm 或 yarn
我们可以使用 npm 或 yarn 来安装 Hapi 框架和 GraphQL 相关的依赖：
--- ------- ---- ---------- ------------------ -------
或者使用 yarn：
---- --- ---- ---------- ------------------ -------
创建 Hapi 服务器
首先，我们需要创建一个 Hapi 服务器。在创建服务器之前，需要先引入所需的模块：
----- ---- - ---------------------- ----- - ----------- - - ------------------------------ ----- - -------------------- - - ------------------- ----- -------- - -------------------- ----- --------- - -----------------------
其中，graphqlHapi 是 Hapi 框架提供的一个插件，用于将 GraphQL 服务添加到 Hapi 服务器中。makeExecutableSchema 则是 GraphQL 提供的一个函数，用于将类型定义和解析器组合成一个可执行的 GraphQL Schema。
接下来，我们可以创建一个 Hapi 服务器：
----- ------ - ------------- ----- ----- ----- ----------- ---
这里我们指定了服务器监听的端口号和主机名。
创建 GraphQL Schema
在创建 GraphQL Schema 之前，我们需要先定义类型定义和解析器。
在 ./schema.js 文件中，我们可以定义类型定义：
----- - --- - - -------------------
----- -------- - ----
---- ----- -
------ ------
-
--
-------------- - ---------这里我们定义了一个查询类型 Query，其中包含一个名称为 hello 的字段，类型为 String。
接下来，在 ./resolvers.js 文件中，我们可以定义解析器：
----- --------- - -
------ -
------ -- -- ------ --------
--
--
-------------- - ----------这里我们定义了 hello 字段的解析器，它返回了一个字符串 'Hello World!'。
最后，我们可以将类型定义和解析器组合成一个可执行的 GraphQL Schema：
----- ------ - ---------------------- --------- ---------- ---
添加 GraphQL 到 Hapi 服务器
将 GraphQL 服务添加到 Hapi 服务器中非常简单。我们只需要在服务器中注册 graphqlHapi 插件，并将 GraphQL Schema 传递给它即可：
----- -----------------
------- ------------
-------- -
----- -----------
--------------- - ------ --
------ - ----- ---- --
--
---这里我们指定了 GraphQL 服务的路径为 /graphql，并将 GraphQL Schema 传递给了 graphqlOptions 选项。
注意，我们还开启了跨域访问，以便在开发过程中更方便地调试 GraphQL API。
执行查询
现在我们已经创建了一个 GraphQL API，可以使用任何支持 GraphQL 的客户端进行查询。例如，我们可以使用 GraphiQL 进行查询。
在 Hapi 中，我们可以使用 server.route 方法来定义路由。在本例中，我们可以定义一个路由来处理 GraphiQL 的请求：
--------------
------- ------
----- ------------
-------- ----- --------- -- -- -
------ -------------------
--
---在 handler 中，我们返回了一个视图，用于渲染 GraphiQL。
接下来，我们需要在 ./views/graphiql.html 中定义 GraphiQL 视图：
--------- -----
------
------
-----------------------
----- ---------------- ------------------------------------------------------------------------------- --
------- -------------------------------------------------------------------------------
------- --------------------------------------------------------------------------------
------- ------------------------------------------------------------------------------------
------- ---------------------------------------------------------------------------------------
-------
------
---- ------------------------------
--------
----- ------- - ------------- --
----------------- -
------- -------
-------- - --------------- ------------------ --
----- ------------------------------
---------------- -- -----------------
----------------
----------------------------- - ------- ---
----------------------------------------------
--
---------
-------
-------在这个视图中，我们引入了 GraphiQL 的 CSS 和 JavaScript 文件，并使用 fetch 方法发送 GraphQL 请求。
现在我们可以启动服务器，并在浏览器中打开 http://localhost:3000/graphiql 来访问 GraphiQL。
在 GraphiQL 中，我们可以输入以下查询语句：
----- - ----- -
这将返回以下结果：
-
------- -
-------- ------ -------
-
-总结
在本文中，我们介绍了如何使用 Hapi 框架来开发 GraphQL API。我们首先创建了一个 Hapi 服务器，然后定义了 GraphQL Schema 和解析器，最后将 GraphQL 服务添加到了 Hapi 服务器中，并使用 GraphiQL 进行了查询。
通过本文的学习，我们可以更深入地了解 GraphQL 和 Hapi 框架，并掌握开发 GraphQL API 的基本方法。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65878045eb4cecbf2dcba305