GraphQL 搭配 Koa 最佳入门实践

GraphQL一种用为你 API 而生的查询语言，2018已经到来，PWA还没有大量投入生产应用之中就已经火起来了，GraphQL的应用或许也不会太远了。前端的发展的最大一个特点就是变化快，有时候应对各种需求场景的变化，不得不去对接口开发很多版本或者修改。各种业务依赖强大的基础数据平台快速生长，如何高效地为各种业务提供数据支持，是所有人关心的问题。而且现在前端的解决方案是将视图组件化，各个业务线既可以是组件的使用者，也可以是组件的生产者，如果能够将其中通用的内容抽取出来提供给各个业务方反复使用，必然能够节省宝贵的开发时间和开发人力。那么问题来了，前端通过组件实现了跨业务的复用，后端接口如何相应地提高开发效率呢？GraphQL，就是应对复杂场景的一种新思路。

官方解释：

GraphQL 既是一种用于 API 的查询语言也是一个满足你数据查询的运行时。 GraphQL 对你的 API 中的数据提供了一套易于理解的完整描述，使得客户端能够准确地获得它需要的数据，而且没有任何冗余，也让 API 更容易地随着时间推移而演进，还能用于构建强大的开发者工具。

下面介绍一下GraphQL的有哪些好处：

请求你所要的数据不多不少
获取多个资源只用一个请求
自定义接口数据的字段
强大的开发者工具
API 演进无需划分版本

本篇文章中将搭配koa实现一个GraphQL查询的例子，逐步从简单kao服务到mongodb的数据插入查询再到GraphQL的使用，
让大家快速看到：

搭建koa搭建一个后台项目
后台路由简单处理方式
利用mongoose简单操作mongodb
掌握GraphQL的入门姿势

项目如下图所示

1、搭建GraphQL工具查询界面。

2、前端用jq发送ajax的使用方式

入门项目我们都已经是预览过了，下面我们动手开发吧！！！

lets do it

首先建立一个项目文件夹，然后在这个项目文件夹新建一个server.js(node服务)、config文件夹、mongodb文件夹、router文件夹、controllers文件夹以及public文件夹(这个主要放前端静态数据展示页面)，好啦，项目的结构我们都已经建立好，下面在server.js文件夹里写上

server.js

// 引入模块
import Koa from 'koa'
import KoaStatic from 'koa-static'
import Router from 'koa-router'
import bodyParser from 'koa-bodyparser'


const app = new Koa()
const router = new Router();

// 使用 bodyParser 和 KoaStatic 中间件
app.use(bodyParser());
app.use(KoaStatic(__dirname + '/public'));

// 路由设置test
router.get('/test', (ctx, next) => {
  ctx.body="test page"
});

app
  .use(router.routes())
  .use(router.allowedMethods());

app.listen(4000);

console.log('graphQL server listen port: ' + 4000)

在命令行npm install koa koa-static koa-router koa-bodyparser --save

安装好上面几个模块，

然后运行node server.js，不出什么意外的话，你会发现报如下图的一个error

原因是现在的node版本并没有支持es6的模块引入方式。

放心我们用神器babel-polyfill转译一下就阔以了。详细的请看阮一峰老师的这篇文章

下面在项目文件夹新建一个start.js，然后在里面写上以下代码：

start.js

require('babel-core/register')({
  'presets': [
    'stage-3',
    ["latest-node", { "target": "current" }]
  ]
})

require('babel-polyfill')
require('./server')

然后在命令行，运行npm install babel-core babel-polyfill babel-preset-latest-node babel-preset-stage-3 --save-dev安装几个开发模块。

安装完毕之后，在命令行运行 node start.js，之后你的node服务安静的运行起来了。用koa-router中间件做我们项目路由模块的管理，后面会写到router文件夹中统一管理。

打开浏览器，输入localhost:4000/test，你就会发现访问这个路由node服务会返回test page文字。如下图

yeah~~kao服务器基本搭建好之后，下面就是，链接mongodb然后把数据存储到mongodb数据库里面啦。

实现mongodb的基本数据模型

tip：这里我们需要mongodb存储数据以及利用mongoose模块操作mongodb数据库

在mongodb文件夹新建一个index.js和 schema文件夹，在 schema文件夹文件夹下面新建info.js和student.js。
在config文件夹下面建立一个index.js，这个文件主要是放一下配置代码。

又一波文件建立好之后，先在config/index.js下写上链接数据库配置的代码。

config/index.js

export default {
  dbPath: 'mongodb://localhost/graphql'
}

然后在mongodb/index.js下写上链接数据库的代码。

mongodb/index.js

// 引入mongoose模块
import mongoose from 'mongoose'
import config from '../config'

// 同步引入 info model和 studen model
require('./schema/info')
require('./schema/student')

// 链接mongodb
export const database = () => {
  mongoose.set('debug', true)

  mongoose.connect(config.dbPath)

  mongoose.connection.on('disconnected', () => {
    mongoose.connect(config.dbPath)
  })
  mongoose.connection.on('error', err => {
    console.error(err)
  })

  mongoose.connection.on('open', async () => {
    console.log('Connected to MongoDB ', config.dbPath)
  })
}

上面我们我们代码还加载了info.js和 studen.js这两个分别是学生的附加信息和基本信息的数据模型，为什么会分成两个信息表？原因是顺便给大家介绍一下联表查询的基本方法（嘿嘿~~~）

下面我们分别完成这两个数据模型

mongodb/schema/info.js

// 引入mongoose
import mongoose from 'mongoose'

// 
const Schema = mongoose.Schema

// 实例InfoSchema
const InfoSchema = new Schema({
  hobby: [String],
  height: String,
  weight: Number,
  meta: {
    createdAt: {
      type: Date,
      default: Date.now()
    },
    updatedAt: {
      type: Date,
      default: Date.now()
    }
  }
})
// 在保存数据之前跟新日期
InfoSchema.pre('save', function (next) {
  if (this.isNew) {
    this.meta.createdAt = this.meta.updatedAt = Date.now()
  } else {
    this.meta.updatedAt = Date.now()
  }

  next()
})
// 建立Info数据模型
mongoose.model('Info', InfoSchema)

上面的代码就是利用mongoose实现了学生的附加信息的数据模型，用同样的方法我们实现了student数据模型

mongodb/schema/student.js

import mongoose from 'mongoose'

const Schema = mongoose.Schema
const ObjectId = Schema.Types.ObjectId


const StudentSchema = new Schema({
  name: String,
  sex: String,
  age: Number,
  info: {
    type: ObjectId,
    ref: 'Info'
  },
  meta: {
    createdAt: {
      type: Date,
      default: Date.now()
    },
    updatedAt: {
      type: Date,
      default: Date.now()
    }
  }
})

StudentSchema.pre('save', function (next) {
  if (this.isNew) {
    this.meta.createdAt = this.meta.updatedAt = Date.now()
  } else {
    this.meta.updatedAt = Date.now()
  }

  next()
})

mongoose.model('Student', StudentSchema)

实现保存数据的控制器

数据模型都链接好之后，我们就添加一些存储数据的方法，这些方法都写在控制器里面。然后在controler里面新建info.js和student.js，这两个文件分别对象，操作info和student数据的控制器，分开写为了方便模块化管理。

实现info数据信息的保存，顺便把查询也先写上去，代码很简单

controlers/info.js

import mongoose from 'mongoose'
const Info = mongoose.model('Info')

// 保存info信息
export const saveInfo = async (ctx, next) => {
  // 获取请求的数据
  const opts = ctx.request.body
  
  const info = new Info(opts)
  const saveInfo = await info.save() // 保存数据
  console.log(saveInfo)
  // 简单判断一下 是否保存成功，然后返回给前端
  if (saveInfo) {
    ctx.body = {
      success: true,
      info: saveInfo
    }
  } else {
    ctx.body = {
      success: false
    }
  }
}

// 获取所有的info数据
export const fetchInfo = async (ctx, next) => {
  const infos = await Info.find({}) // 数据查询

  if (infos.length) {
    ctx.body = {
      success: true,
      info: infos
    }
  } else {
    ctx.body = {
      success: false
    }
  }
}

上面的代码，就是前端用post（路由下面一会在写）请求过来的数据，然后保存到mongodb数据库，在返回给前端保存成功与否的状态。也简单实现了一下，获取全部附加信息的的一个方法。下面我们用同样的道理实现studen数据的保存以及获取。

实现studen数据的保存以及获取

controllers/sdudent.js

import mongoose from 'mongoose'
const Student = mongoose.model('Student')

// 保存学生数据的方法
export const saveStudent = async (ctx, next) => {
  // 获取前端请求的数据
  const opts = ctx.request.body
  
  const student = new Student(opts)
  const saveStudent = await student.save() // 保存数据

  if (saveStudent) {
    ctx.body = {
      success: true,
      student: saveStudent
    }
  } else {
    ctx.body = {
      success: false
    }
  }
}

// 查询所有学生的数据
export const fetchStudent = async (ctx, next) => {
  const students = await Student.find({})

  if (students.length) {
    ctx.body = {
      success: true,
      student: students
    }
  } else {
    ctx.body = {
      success: false
    }
  }
}

// 查询学生的数据以及附加数据
export const fetchStudentDetail = async (ctx, next) => {

  // 利用populate来查询关联info的数据
  const students = await Student.find({}).populate({
    path: 'info',
    select: 'hobby height weight'
  }).exec()

  if (students.length) {
    ctx.body = {
      success: true,
      student: students
    }
  } else {
    ctx.body = {
      success: false
    }
  }
}

实现路由，给前端提供API接口

数据模型和控制器在上面我们都已经是完成了，下面就利用koa-router路由中间件，来实现请求的接口。我们回到server.js，在上面添加一些代码。如下

server.js

import Koa from 'koa'
import KoaStatic from 'koa-static'
import Router from 'koa-router'
import bodyParser from 'koa-bodyparser'

import {database} from './mongodb' // 引入mongodb
import {saveInfo, fetchInfo} from './controllers/info' // 引入info controller
import {saveStudent, fetchStudent, fetchStudentDetail} from './controllers/student' // 引入 student controller

database() // 链接数据库并且初始化数据模型

const app = new Koa()
const router = new Router();

app.use(bodyParser());
app.use(KoaStatic(__dirname + '/public'));

router.get('/test', (ctx, next) => {
  ctx.body="test page"
});

// 设置每一个路由对应的相对的控制器
router.post('/saveinfo', saveInfo)
router.get('/info', fetchInfo)

router.post('/savestudent', saveStudent)
router.get('/student', fetchStudent)
router.get('/studentDetail', fetchStudentDetail)

app
  .use(router.routes())
  .use(router.allowedMethods());

app.listen(4000);

console.log('graphQL server listen port: ' + 4000)

上面的代码，就是做了，引入mongodb设置，info以及student控制器，然后链接数据库，并且设置每一个设置每一个路由对应的我们定义的的控制器。

安装一下mongoose模块 npm install mongoose --save

然后在命令行运行node start，我们服务器运行之后，然后在给info和student添加一些数据。这里是通过postman的谷歌浏览器插件来请求的，如下图所示

yeah~~~保存成功，继续按照步骤多保存几条，然后按照接口查询一下。如下图

嗯，如图都已经查询到我们保存的全部数据，并且全部返回前端了。不错不错。下面继续保存学生数据。

tip: 学生数据保存的时候关联了信息里面的数据哦。所以把id写上去了。

同样的一波操作，我们多保存学生几条信息，然后查询学生信息，如下图所示。

好了，数据我们都已经保存好了，铺垫也做了一大把了，下面让我们真正的进入，GrapgQL查询的骚操作吧~~~~

重构路由，配置GraphQL查询界面

别忘了，下面我们建立了一个router文件夹，这个文件夹就是统一管理我们路由的模块，分离了路由个应用服务的模块。在router文件夹新建一个index.js。并且改造一下server.js里面的路由全部复制到router/index.js。

顺便在这个路由文件中加入，graphql-server-koa模块，这是koa集成的graphql服务器模块。graphql server是一个社区维护的开源graphql服务器，可以与所有的node.js http服务器框架一起工作：express，connect，hapi，koa和restify。可以点击链接查看详细知识点。

加入graphql-server-koa的路由文件代码如下：

router/index.js

import { graphqlKoa, graphiqlKoa } from 'graphql-server-koa'
import {saveInfo, fetchInfo} from '../controllers/info'
import {saveStudent, fetchStudent, fetchStudentDetail} from '../controllers/student'


const router = require('koa-router')()

router.post('/saveinfo', saveInfo)
      .get('/info', fetchInfo)
      .post('/savestudent', saveStudent)
      .get('/student', fetchStudent)
      .get('/studentDetail', fetchStudentDetail)
      .get('/graphiql', async (ctx, next) => {
        await graphiqlKoa({endpointURL: '/graphql'})(ctx, next)
      })
module.exports = router

之后把server.js的路由代码去掉之后的的代码如下：

server.js

import Koa from 'koa'
import KoaStatic from 'koa-static'
import Router from 'koa-router'
import bodyParser from 'koa-bodyparser'

import {database} from './mongodb'

database()

const GraphqlRouter = require('./router')

const app = new Koa()
const router = new Router();

const port = 4000

app.use(bodyParser());
app.use(KoaStatic(__dirname + '/public'));

router.use('', GraphqlRouter.routes())

app.use(router.routes())
   .use(router.allowedMethods());

app.listen(port);

console.log('GraphQL-demo server listen port: ' + port)

恩，分离之后简洁，明了了很多。然后我们在重新启动node服务。在浏览器地址栏输入http://localhost:4000/graphiql，就会得到下面这个界面。如图：

没错，什么都没有就是GraphQL查询服务的界面。下面我们把这个GraphQL查询服务完善起来。

编写GraphQL Schema

看一下我们第一张图，我们需要什么数据，在GraphQL查询界面就编写什么字段，就可以查询到了，而后端需要定义好这些数据格式。这就需要我们定义好GraphQL Schema。

首先我们在根目录新建一个graphql文件夹，这个文件夹用于存放管理graphql相关的js文件。然后在graphql文件夹新建一个schema.js。

这里我们用到graphql模块，这个模块就是用javascript参考实现graphql查询。向需要详细学习，请使劲戳链接。

我们先写好info的查询方法。然后其他都差不多滴。

graphql/schema.js

// 引入GraphQL各种方法类型

import {
  graphql,
  GraphQLSchema,
  GraphQLObjectType,
  GraphQLString,
  GraphQLID,
  GraphQLList,
  GraphQLNonNull,
  isOutputType
} from 'graphql';

import mongoose from 'mongoose'
const Info = mongoose.model('Info') // 引入Info模块

// 定义日期时间 类型
const objType = new GraphQLObjectType({
  name: 'mete',
  fields: {
    createdAt: {
      type: GraphQLString
    },
    updatedAt: {
      type: GraphQLString
    }
  }
})

// 定义Info的数据类型
let InfoType = new GraphQLObjectType({
  name: 'Info',
  fields: {
    _id: {
      type: GraphQLID
    },
    height: {
      type: GraphQLString
    },
    weight: {
      type: GraphQLString
    },
    hobby: {
      type: new GraphQLList(GraphQLString)
    },
    meta: {
      type: objType
    }
  }
})

// 批量查询
const infos = {
  type: new GraphQLList(InfoType),
  args: {},
  resolve (root, params, options) {
    return Info.find({}).exec() // 数据库查询
  }
}

// 根据id查询单条info数据

const info = {
  type: InfoType,
  // 传进来的参数
  args: {
    id: {
      name: 'id',
      type: new GraphQLNonNull(GraphQLID) // 参数不为空
    }
  },
  resolve (root, params, options) {
    return Info.findOne({_id: params.id}).exec() // 查询单条数据
  }
}

// 导出GraphQLSchema模块

export default new GraphQLSchema({
  query: new GraphQLObjectType({
    name: 'Queries',
    fields: {
      infos,
      info
    }
  })
})

看代码的时候建议从下往上看~~~~，上面代码所说的就是，建立info和infos的GraphQLSchema，然后定义好数据格式，查询到数据，或者根据参数查询到单条数据，然后返回出去。

写好了info schema之后我们在配置一下路由，进入router/index.js里面，加入下面几行代码。

router/index.js

import { graphqlKoa, graphiqlKoa } from 'graphql-server-koa'
import {saveInfo, fetchInfo} from '../controllers/info'
import {saveStudent, fetchStudent, fetchStudentDetail} from '../controllers/student'

// 引入schema
import schema from '../graphql/schema'

const router = require('koa-router')()

router.post('/saveinfo', saveInfo)
      .get('/info', fetchInfo)
      .post('/savestudent', saveStudent)
      .get('/student', fetchStudent)
      .get('/studentDetail', fetchStudentDetail)




router.post('/graphql', async (ctx, next) => {
        await graphqlKoa({schema: schema})(ctx, next) // 使用schema
      })
      .get('/graphql', async (ctx, next) => {
        await graphqlKoa({schema: schema})(ctx, next) // 使用schema
      })
      .get('/graphiql', async (ctx, next) => {
        await graphiqlKoa({endpointURL: '/graphql'})(ctx, next) // 重定向到graphiql路由
      })
module.exports = router

详细请看注释，然后被忘记安装好npm install graphql-server-koa graphql --save这两个模块。安装完毕之后，重新运行服务器的node start（你可以使用nodemon来启动本地node服务，免得来回启动。）

然后刷新http://localhost:4000/graphiql，你会发现右边会有查询文档，在左边写上查询方式，如下图

重整Graphql代码结构，完成所有数据查询

现在是我们把schema和type都写到一个文件上面了去了，如果数据多了，字段多了变得特别不好维护以及review，所以我们就把定义type的和schema分离开来，说做就做。

在graphql文件夹新建info.js，studen.js，文件，先把info type 写到info.js代码如下

graphql/info.js

import {
  graphql,
  GraphQLSchema,
  GraphQLObjectType,
  GraphQLString,
  GraphQLID,
  GraphQLList,
  GraphQLNonNull,
  isOutputType
} from 'graphql';

import mongoose from 'mongoose'
const Info = mongoose.model('Info')


const objType = new GraphQLObjectType({
  name: 'mete',
  fields: {
    createdAt: {
      type: GraphQLString
    },
    updatedAt: {
      type: GraphQLString
    }
  }
})

export let InfoType = new GraphQLObjectType({
  name: 'Info',
  fields: {
    _id: {
      type: GraphQLID
    },
    height: {
      type: GraphQLString
    },
    weight: {
      type: GraphQLString
    },
    hobby: {
      type: new GraphQLList(GraphQLString)
    },
    meta: {
      type: objType
    }
  }
})


export const infos = {
  type: new GraphQLList(InfoType),
  args: {},
  resolve (root, params, options) {
    return Info.find({}).exec()
  }
}


export const info = {
  type: InfoType,
  args: {
    id: {
      name: 'id',
      type: new GraphQLNonNull(GraphQLID)
    }
  },
  resolve (root, params, options) {
    return Info.findOne({
      _id: params.id
    }).exec()
  }
}

分离好info type 之后，一鼓作气，我们顺便把studen type 也完成一下，代码如下，原理跟info type 都是相通的，

graphql/student.js

import {
  graphql,
  GraphQLSchema,
  GraphQLObjectType,
  GraphQLString,
  GraphQLID,
  GraphQLList,
  GraphQLNonNull,
  isOutputType,
  GraphQLInt
} from 'graphql';

import mongoose from 'mongoose'

import {InfoType} from './info'
const Student = mongoose.model('Student')


let StudentType = new GraphQLObjectType({
  name: 'Student',
  fields: {
    _id: {
      type: GraphQLID
    },
    name: {
      type: GraphQLString
    },
    sex: {
      type: GraphQLString
    },
    age: {
      type: GraphQLInt
    },
    info: {
      type: InfoType
    }
  }
})


export const student = {
  type: new GraphQLList(StudentType),
  args: {},
  resolve (root, params, options) {
    return Student.find({}).populate({
      path: 'info',
      select: 'hobby height weight'
    }).exec()
  }
}

tips：上面因为有了联表查询，所以引用了info.js

然后调整一下schema.js的代码，如下：

import {
  GraphQLSchema,
  GraphQLObjectType
} from 'graphql';
// 引入 type 
import {info, infos} from './info'
import {student} from './student'

// 建立 schema
export default new GraphQLSchema({
  query: new GraphQLObjectType({
    name: 'Queries',
    fields: {
      infos,
      info,
      student
    }
  })
})

看到代码是如此的清新脱俗，是不是深感欣慰。好了，graophql数据查询都已经是大概比较完善了。
课程的数据大家可以自己写一下，或者直接到我的github项目里面copy过来我就不一一重复的说了。

下面写一下前端接口是怎么查询的，然后让数据返回浏览器展示到页面的。

前端接口调用

在public文件夹下面新建一个index.html，js文件夹，css文件夹，然后在js文件夹建立一个index.js，在css文件夹建立一个index.css，代码如下

public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>GraphQL-demo</title>
  <link rel="stylesheet" href="./css/index.css">
</head>
<body>
  <h1 class="app-title">GraphQL-前端demo</h1>
  <div id="app">
    <div class="course list">
      <h3>课程列表</h3>
      <ul id="courseList">
        <li>暂无数据....</li>
      </ul>
    </div>
    <div class="student list">
      <h3>班级学生列表</h3>
      <ul id="studentList">
        <li>暂无数据....</li>
      </ul>
    </div>
  </div>
  <div class="btnbox">
    <div class="btn" id="btn1">点击常规获取课程列表</div>
    <div class="btn" id="btn2">点击常规获取班级学生列表</div>
    <div class="btn" id="btn3">点击graphQL一次获取所有数据，问你怕不怕？</div>
  </div>
  <div class="toast"></div>
  <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.js"></script>
  <script src="./js/index.js"></script>
</body>
</html>

我们主要看js请求方式代码如下

window.onload = function () {

  $('#btn2').click(function() {
    $.ajax({
      url: '/student',
      data: {},
      success:function (res){
        if (res.success) {
          renderStudent (res.data)
        }
      }
    })
  })

  $('#btn1').click(function() {
    $.ajax({
      url: '/course',
      data: {},
      success:function (res){
        if (res.success) {
          renderCourse(res.data)
        }
      }
    })
  })

  function renderStudent (data) {
    var str = ''
    data.forEach(function(item) {
      str += '<li>姓名：'+item.name+'，性别：'+item.sex+'，年龄：'+item.age+'</li>'
    })
    $('#studentList').html(str)
  }

  function renderCourse (data) {
    var str = ''
    data.forEach(function(item) {
      str += '<li>课程：'+item.title+'，简介：'+item.desc+'</li>'
    })
    $('#courseList').html(str)
  }
  
  // 请求看query参数就可以了，跟查询界面的参数差不多

  $('#btn3').click(function() {
    $.ajax({
      url: '/graphql',
      data: {
        query: `query{
          student{
            _id
            name
            sex
            age
          }
          course{
            title
            desc
          }
        }`
      },
      success:function (res){
        renderStudent (res.data.student)
        renderCourse (res.data.course)
      }
    })
  })
}

css的代码我就不贴出来啦。大家可以去项目直接拿嘛。

所有东西都已经完成之后，重新启动node服务，然后访问，http://localhost:4000/就会看到如下界面。界面丑，没什么设计美化细胞，求轻喷~~~~

操作点击之后就会想第二张图一样了。

所有效果都出来了，本篇文章也就到此结束了。

附上项目地址： https://github.com/naihe138/GraphQL-demo

ps：喜欢的话丢一个小星星(star)给我嘛

GraphQL 搭配 Koa 最佳入门实践

GraphQL 搭配 Koa 最佳入门实践

lets do it

实现mongodb的基本数据模型

实现保存数据的控制器

实现路由，给前端提供API接口

重构路由，配置GraphQL查询界面

编写GraphQL Schema

重整Graphql代码结构，完成所有数据查询

前端接口调用

Recommend

从90年代的SRNN开始，纵览循环神经网络27年的研究进展

绿地集团投资6000万元入股竞界电竞进军电子竞技产业

神秘股东入局，酷派“急撇”与乐视关系

高德集团与国家旅游局战略合作推出全域旅游信息系统

英特尔处理器硬件设计漏洞

Multiplying Matrices, Fast and Slow – Investigations

Simple Sql Templates

GitHub - Wisser/Jailer: Jailer Database Subsetting and Relational Data Browsing...

Java® Notes for Professionals book

滴滴出行 X Apple Pay 5折优惠，封顶优惠30元

About Joyk