GraphQL 是一种新兴的 API 查询语言，它具有强大的查询功能和灵活的数据获取方式。在前端开发中，我们经常需要与后端进行数据交互，而 GraphQL 可以帮助我们更方便地实现数据的获取和处理。
在本文中，我们将介绍如何使用 Hapi 框架来开发 GraphQL API，包括创建 GraphQL Schema、定义 Resolver 和执行查询等方面。
准备工作
在开始之前，需要先安装以下工具：
- Node.js
- npm 或 yarn
我们可以使用 npm 或 yarn 来安装 Hapi 框架和 GraphQL 相关的依赖：
npm install hapi @hapi/hapi @hapi/hapi-graphql graphql
或者使用 yarn：
yarn add hapi @hapi/hapi @hapi/hapi-graphql graphql
创建 Hapi 服务器
首先，我们需要创建一个 Hapi 服务器。在创建服务器之前，需要先引入所需的模块：
const Hapi = require('@hapi/hapi');
const { graphqlHapi } = require('@hapi/hapi-graphql');
const { makeExecutableSchema } = require('graphql');
const typeDefs = require('./schema');
const resolvers = require('./resolvers');其中，graphqlHapi 是 Hapi 框架提供的一个插件，用于将 GraphQL 服务添加到 Hapi 服务器中。makeExecutableSchema 则是 GraphQL 提供的一个函数，用于将类型定义和解析器组合成一个可执行的 GraphQL Schema。
接下来，我们可以创建一个 Hapi 服务器：
const server = Hapi.server({ port: 3000, host: 'localhost' });这里我们指定了服务器监听的端口号和主机名。
创建 GraphQL Schema
在创建 GraphQL Schema 之前，我们需要先定义类型定义和解析器。
在 ./schema.js 文件中，我们可以定义类型定义：
// javascriptcn.com 代码示例
const { gql } = require('graphql');
const typeDefs = gql`
type Query {
hello: String
}
`;
module.exports = typeDefs;这里我们定义了一个查询类型 Query，其中包含一个名称为 hello 的字段，类型为 String。
接下来，在 ./resolvers.js 文件中，我们可以定义解析器：
const resolvers = {
Query: {
hello: () => 'Hello World!',
},
};
module.exports = resolvers;这里我们定义了 hello 字段的解析器，它返回了一个字符串 'Hello World!'。
最后，我们可以将类型定义和解析器组合成一个可执行的 GraphQL Schema：
const schema = makeExecutableSchema({
typeDefs,
resolvers,
});添加 GraphQL 到 Hapi 服务器
将 GraphQL 服务添加到 Hapi 服务器中非常简单。我们只需要在服务器中注册 graphqlHapi 插件，并将 GraphQL Schema 传递给它即可：
await server.register({
plugin: graphqlHapi,
options: {
path: '/graphql',
graphqlOptions: { schema },
route: { cors: true },
},
});这里我们指定了 GraphQL 服务的路径为 /graphql，并将 GraphQL Schema 传递给了 graphqlOptions 选项。
注意，我们还开启了跨域访问，以便在开发过程中更方便地调试 GraphQL API。
执行查询
现在我们已经创建了一个 GraphQL API，可以使用任何支持 GraphQL 的客户端进行查询。例如，我们可以使用 GraphiQL 进行查询。
在 Hapi 中，我们可以使用 server.route 方法来定义路由。在本例中，我们可以定义一个路由来处理 GraphiQL 的请求：
server.route({
method: 'GET',
path: '/graphiql',
handler: async (request, h) => {
return h.view('graphiql');
},
});在 handler 中，我们返回了一个视图，用于渲染 GraphiQL。
接下来，我们需要在 ./views/graphiql.html 中定义 GraphiQL 视图：
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<title>GraphiQL</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/graphiql/0.11.11/graphiql.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/1.1.0/fetch.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/graphiql/0.11.11/graphiql.min.js"></script>
</head>
<body>
<div id="graphiql-container"></div>
<script>
const fetcher = graphQLParams =>
fetch('/graphql', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(graphQLParams),
}).then(response => response.json());
ReactDOM.render(
React.createElement(GraphiQL, { fetcher }),
document.getElementById('graphiql-container'),
);
</script>
</body>
</html>在这个视图中，我们引入了 GraphiQL 的 CSS 和 JavaScript 文件，并使用 fetch 方法发送 GraphQL 请求。
现在我们可以启动服务器，并在浏览器中打开 http://localhost:3000/graphiql 来访问 GraphiQL。
在 GraphiQL 中，我们可以输入以下查询语句：
query {
hello
}这将返回以下结果：
{
"data": {
"hello": "Hello World!"
}
}总结
在本文中，我们介绍了如何使用 Hapi 框架来开发 GraphQL API。我们首先创建了一个 Hapi 服务器，然后定义了 GraphQL Schema 和解析器，最后将 GraphQL 服务添加到了 Hapi 服务器中，并使用 GraphiQL 进行了查询。
通过本文的学习，我们可以更深入地了解 GraphQL 和 Hapi 框架，并掌握开发 GraphQL API 的基本方法。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65878045eb4cecbf2dcba305