如何在 Koa2 中使用 GraphQL？-JavaScript中文网-JavaScript教程资源分享门户

GraphQL 是一种由 Facebook 开源的查询语言，可以用于建立 API。它是一种强类型的语言，并且支持客户端自定义请求模式，这意味着客户端可以指定需要获取的数据和它们的格式，在一次请求中获取所有需要的数据，从而减少了网络请求的次数和数据量。

Koa2 是一个基于 Node.js 平台的 web 开发框架，由原本的 Koa 更新而来。它遵循了常见的 Node.js 中间件设计思想，以异步的方式实现了 web 应用程序。在本文中，我们将探讨如何在 Koa2 中使用 GraphQL 实现 API 服务。

安装依赖

我们可以使用 npm 或者 yarn 安装需要的依赖。

npm install koa-graphql graphql --save

或者

yarn add koa-graphql graphql

其中 koa-graphql 是 Koa2 与 GraphQL 集成的 middleware，graphql 是 GraphQL 的核心库。

创建 GraphQL Schema

在使用 GraphQL 之前，我们需要先定义数据结构，然后将其转化为 GraphQL 的 Schema。在这个例子中，我们以一个简单的示例作为说明。

假设我们有一个网络爬虫，它定期从某个网站上爬取实时数据，并将其存储在一个 MySQL 数据库中。我们需要向客户端提供一个 API 服务来获取这些数据。我们假设数据库里面存储的是一个 spider_data 表，其结构如下：

// javascriptcn.com 代码示例
CREATE TABLE `spider_data` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `url` varchar(255) DEFAULT NULL,
  `title` varchar(255) DEFAULT NULL,
  `content` text,
  `created_at` datetime DEFAULT CURRENT_TIMESTAMP,
  `updated_at` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

现在我们可以先定义这个表的数据结构：

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

const SpiderDataType = new GraphQLObjectType({
  name: 'SpiderData',
  fields: () => ({
    id: { type: GraphQLInt },
    url: { type: GraphQLString },
    title: { type: GraphQLString },
    content: { type: GraphQLString },
    createdAt: { type: GraphQLString }
  })
})

在这个示例中，我们通过 GraphQLObjectType 创建了一个 SpiderData 类型，其包含了在 spider_data 表中定义的各种字段。因为我们无法在数据库中像 created_at 和 updated_at 一样使用 GraphQLDateTime(因为它不是 GraphQL 的内置类型)，所以我们用 createdAt 来代替了 created_at 字段。

接下来，我们可以定义一个 RootQuery，它定义了查询的入口。在这种情况下，我们只定义了一个 SpiderData 查询，可以查找所有的 spider_data 表中的数据。

// javascriptcn.com 代码示例
const RootQueryType = new GraphQLObjectType({
  name: 'RootQuery',
  fields: () => ({
    spiderData: {
      type: new GraphQLList(SpiderDataType),
      resolve: () => {
        // 从数据库中获取实时数据
      }
    }
  })
})

在这个示例中，我们通过 GraphQLList 类型来代表查询结果是一个数组。在查询的 resolve 函数中，我们会去访问数据库，获取所有的 spider_data 数据并返回。

最后，我们可以定义一个 GraphQL schema。

const schema = new GraphQLSchema({
  query: RootQueryType
})

至于数据库的访问，可以使用 MySQL 包，这里不做详细介绍。

集成到 Koa2 中

前面我们已经定义了 GraphQL 的 Schema，现在可以将其集成到 Koa2 之中。

// javascriptcn.com 代码示例
const Koa = require('koa')
const cors = require('@koa/cors')
const graphqlHttpMiddleware = require('koa-graphql')

// 注册 GraphQL API 服务
const app = new Koa()
app.use(cors())  // 允许跨域请求
app.use(graphqlHttpMiddleware({
  schema: schema,
  graphiql: true  // 启用 GraphQL 开发者工具
}))

// 启动 Koa2 web 服务
const port = 4000
app.listen(port, () => {
  console.log(`Server is running on port ${port}.`)
})

在这个示例中，我们首先创建了一个 Koa2 实例，并通过 koa-graphql 注册 GraphQL API 服务。我们也开启了跨域请求功能，并使用了 GraphQL 开发者工具来测试 API 服务（graphiql: true）。

最后，我们启动了 Koa2 的 web 服务，并指定了监听的端口号。

测试

我们现在可以通过访问 http://localhost:4000/graphql 来访问 GraphQL API 服务。这里启用了 GraphQL 开发者工具，客户端可以方便地使用它来测试登录和查询等操作。

在上面的示例中，我们定义了一个 spider_data 查询。在 GraphQL 开发者工具中，我们在左侧的窗口中输入查询语句：

// javascriptcn.com 代码示例
query {
  spiderData {
    id
    url
    title
    content
    createdAt
  }
}

然后按下运行按钮，GraphQL 开发者工具会向服务器发送请求，我们就可以在右侧的窗口中看到服务器的响应了。

总结

在这篇文章中，我们展示了如何使用 GraphQL 在 Koa2 中实现 API 服务。我们首先定义了一个 GraphQL Schema，它描述了我们要提供给客户端的数据结构以及我们的查询、突变和订阅等入口。然后我们将其集成到 Koa2 中，并开启了跨域请求和 GraphQL 开发者工具。最后我们测试了 API 服务，并演示了如何在 GraphQL 开发者工具中查询数据。

使用 GraphQL 可以让客户端自定义请求和响应的数据和格式，这将大大减少网络请求的重复和数据量。希望读者可以通过本文掌握集成 GraphQL 到 Koa2 中的方法，并使用它提供更好的 API 服务。

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