Koa + GraphQL 示例

初始化项目

创建 graphql-example 文件夹进入后初始化一个 package.json 文件。

$ mkdir graphql-example && cd $_
$ yarn init -y

安装依赖

使用 koa-graphql 配合 koa-mount 两个 npm 模块来使用 GraphQL。同时需要安装 graphql 模块来创建需要使用的 schema。

$ yarn add koa graphql koa-graphql koa-mount

server

安装 koa 后，创建 server.js 实现一个简单的服务端。

server.js

const Koa = require("koa");
const app = new Koa();

app.use(async ctx => {
  ctx.body = "Hello World";
});

app.listen(3000);
console.log("server started at http://localhost:3000");

通过 Node.js 启动后便可访问到页面了。

$ node server.js
server started at http://localhost:3000

创建 schema

GraphQL 需要一个 schema 来初始化，创建 graphql 目录并在其中创建 schema.js 文件，

$ mkdir graphql
$ touch graphql/schema.js

schema.js

const { buildSchema } = require('graphql');

const schema = buildSchema(`
 type Query {
   hello: String
 }
`);

module.exports = schema;

启动 GraphQL 服务

将上面的 schema 传入 koa-graphql 然后通过 koa-mount 将其作为中间件启动，便可开启 GraphQL 服务。

server.js

const Koa = require("koa");
const mount = require("koa-mount");
const graphqlHTTP = require("koa-graphql");
const schema = require("./graphql/schema");

const app = new Koa();

app.use(
  mount(
    "/graphql",
    graphqlHTTP({
      schema: schema,
      graphiql: true
    })
  )
);

app.listen(3000);
console.log("server started at http://localhost:3000");

再次启动 server.js 并访问 http://localhost:3000/graphql 可看到一个可视化的 GraphQL 界面。该界面为 GraphQL 内置的 Graphiql 工具用于查询的调试。

Graphiql 界面

测试 GraphQL 服务

前面定义的 schema 中包含一个 hello 字段，通过在前面的 Graphiql 中编辑查询可请求该字段。

测试 Query

可以看到返回的数据为 null ，这是因为我们还没有为该字段定义 resolver，即告诉 GraphQL 如何以及从哪里返回该数据。

添加 resolver

在 graphql 目录创建 resolver.js 文件，为 hello 字段指定数据的返回逻辑。

graphql/resolver.js

module.exports = {
  hello: () => "Hello world!"
};

更新我们创建 GraphQL 服务的代码，将 resolver 传入：

server.js

const Koa = require("koa");
const mount = require("koa-mount");
const graphqlHTTP = require("koa-graphql");
const schema = require("./graphql/schema");
+ const root = require("./graphql/resolver");

const app = new Koa();

app.use(
  mount(
    "/graphql",
    graphqlHTTP({
      schema: schema,
+      rootValue: root,
      graphiql: true
    })
  )
);

app.listen(3000);
console.log("server started at http://localhost:3000");

再次启动服务并执行查询，能够看到返回了正确的数据。

返回数据的查询