使用 Hapi 框架构建 GraphQL API-JavaScript中文网-JavaScript教程资源分享门户

随着移动化时代的到来，以及前端技术的日新月异，现今面向用户的应用程序更加需要响应迅速、易用、数据精准的服务端接口支持。GraphQL 的出现使得我们能够更加灵活和高效地为客户端应用程序提供数据源，但是如何使用 Hapi 框架来构建 GraphQL API 呢？本文将一步步引导你在 Hapi 框架下实现 GraphQL API，内容详尽、深度学习，带有实例代码示范。

什么是 GraphQL

GraphQL 是 Facebook 公司开源的一种数据查询语言和运行时系统。可以看作是对传统 RESTful API 的一种替代方案。GraphQL 借助于类型系统来帮助我们定义服务端支持的数据模型，客户端可以精确地请求需要的数据，并得到服务端精确的响应。

GraphQL 有以下特点：

灵活的数据查询
精确的响应
自我描述性的类型系统

你可以通过 GraphQL 来实现非常细致的查询。例如，仅仅需要查询一条博客评论的内容，而不需要获取整个博客文章的所有信息。

为什么选择 Hapi 框架

Hapi 框架是一种开源的 Node.js 框架。它可以用来构建 Web 应用程序和服务，由于其独特的插件化开发方式和友好的 API 设计，使其在开发大型 Web 应用或服务时备受程序员欢迎。

相较于传统的 RESTful 解决方案，对于 GraphQL API，Hapi 框架可以提供更加优雅和简便的方式。

GraphQL 是一种 Query Language，而不是一种 HTTP 协议，Hapi 的路由机制可以不再受限于 HTTP 实现。
Hapi 的插件化开发方式可以让我们直接使用 GraphQL 插件来构建 Web 应用程序。
Hapi 的生态系统非常完善，社区方案也多种多样，可以帮助我们快速开发 GraphQL API。

GraphQL API 基本结构

GraphQL API 的基本结构包括以下部分：

Types：数据模型，用于定义 API 响应数据格式和类型。
Queries：数据查询字段，允许客户端向服务端请求想要的数据。
Mutations：数据修改字段，允许客户端向服务端更新、删除、添加数据。

GraphQL API 实现

环境准备

使用 Hapi 框架构建 GraphQL API 需要先配置运行环境，我们可以通过以下步骤来完成环境准备工作。

// javascriptcn.com 代码示例
# 安装 Node.js
$ https://nodejs.org/en/download/

# 安装 Hapi
$ npm install hapi

# 安装 graphql 和 graphql-tools
$ npm install graphql graphql-tools

# 安装 hapi-graphql 插件
$ npm install hapi-graphql

数据类型定义

首先我们需要定义一些数据类型。以下代码示例定义了用户和文章两个数据类型，并将它们包装在一个 rootQuery 中。

// javascriptcn.com 代码示例
const { GraphQLObjectType, GraphQLID, GraphQLList, GraphQLNonNull, GraphQLSchema, GraphQLString, GraphQLInt } = require("graphql");

const UserType = new GraphQLObjectType({
  name: "User",
  description: "User Info",
  fields: () => ({
    id: { type: GraphQLID },
    name: { type: GraphQLString },
    email: { type: GraphQLString },
    posts: {
      type: new GraphQLList(PostType),
      resolve(parent, args) {
        // todo: resolve data
      },
    },
  }),
});

const PostType = new GraphQLObjectType({
  name: "Post",
  description: "Post Info",
  fields: () => ({
    id: { type: GraphQLID },
    title: { type: GraphQLString },
    body: { type: GraphQLString },
    author: {
      type: UserType,
      resolve(parent, args) {
        // todo: resolve data
      },
    },
  }),
});

const RootQuery = new GraphQLObjectType({
  name: "RootQueryType",
  fields: {
    user: {
      type: UserType,
      args: { id: { type: GraphQLID } },
      resolve(parent, args) {
        // todo: resolve data
      },
    },
    post: {
      type: PostType,
      args: { id: { type: GraphQLID } },
      resolve(parent, args) {
        // todo: resolve data
      },
    },
    users: {
      type: new GraphQLList(UserType),
      resolve(parent, args) {
        // todo: resolve data
      },
    },
    posts: {
      type: new GraphQLList(PostType),
      resolve(parent, args) {
        // todo: resolve data
      },
    },
  },
});

module.exports = new GraphQLSchema({
  query: RootQuery,
});

API 实现

通过 hapi-graphql 插件来实现 GraphQL API 的实现，以下是一个简单的例子，我们创建了一个 graphql 路由，使用 post 的请求来调用 Hapi 的托管的 Graphql API。在路由定义中，我们通过请求主体中的查询参数来进行 GraphQL 查询。

// javascriptcn.com 代码示例
const Hapi = require("hapi");
const { graphqlHapi } = require("apollo-server-hapi");
const schema = require("./schema"); // 数据类型定义，上一步中的代码

const init = async () => {
  const server = new Hapi.Server({
    host: "localhost",
    port: 3000,
  });

  // 将graphql路由添加到 Hapi 中
  server.route({
    path: "/graphql",
    method: "POST",
    async handler(request, h) {
      const { query, variables = {}, operationName } = request.payload;
      const result = await graphqlHapi({
        ...request,
        query,
        variables,
        operationName,
        schema,
      });
      return h.response(result).type("application/json");
    },
  });

  await server.start();
  console.log(`Server running at: ${server.info.uri}`);
};

init().catch((err) => {
  console.error(err);
  process.exit(1);
});

完整示例代码

可以通过以下链接访问完整的代码示例：https://github.com/skylee1218/hapi-graphql-example

总结

本文中我们介绍了 GraphQL 的基础概念和原理，并通过 Hapi 框架实现了一个 GraphQL API。GraphQL 非常强大和灵活，可以做到客户端请求数据的贴心需求。通过 Hapi 框架，我们可以使用简洁优美的代码来实现 GraphQL API。相比于传统的 RESTful API，GraphQL 可以提供更加优雅和高效的解决方案。

你是否有其他的前端、后端技术问题求解呢？欢迎留言资询，我们会尽快为您解答。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654dd8907d4982a6eb737e6b