GraphQL 项目中的前端 mock 方案

在使用 GraphQL （以下简称 gql）的前端项目中，往往需要等待后台同学定义好 Schema 并架设好 Playground 以后才能进行联调。如果后台同学阻塞了，前端只能被动等待。如果对于 gql 项目来说也能够和 REST 一样有一套 mock 方案就好了。经过一系列实践，我选择了 mocker-api 加 Apollo 的方案来实现。

mocker-api

mocker-api 是一个基于 node 实现的接口 mock 工具（前身是webpack-api-mocker，依赖于 webpack-dev-server，现在可独立运行）。由于我们的项目大都和 webpack 结合，所以这里仅简单介绍其与 webpack 结合的用法。

在 webpack 的 devServer 配置项中，引入以下内容：

devServer: {
  before (app) {
    require('mocker-api')(app, resolve('./mock/index.js'))
  }
}

这样便完成了 webpack 和 mocker-api 的结合。接下来我们要到 /mock/index.js 里面写逻辑：

// /mock/index.js

module.exports = {
  'POST /api': (req, res) => {
    return res.send('Hello world')
  }
}

此时开启 webpack-dev-server，在页面中使用 POST 方式请求 /api，即可得到内容为 Hello world 的响应。

Apollo

Apollo 是一套完整的 GraphQL 实现方案，支持多种语言的服务端和客户端，在这里我们主要使用 apollo-server 来搭建前端的 gql mock 服务。

在 /mock 目录下新建 /gql 目录，再往里面分别建立 /resolvers 目录，types 目录和 index.js 入口文件。下面我们以一个”查询书籍信息“的例子来讲述这个 gql mock 服务是怎么做的。

在 /types 目录下新建 Books.js：

const { gql } = require('apollo-server')

module.exports = gql`
"""
书籍
"""
type Book {
  id: ID!
  "标题"
  title: String
  "作者"
  author: String
}

type Query {
  books: [Book]
}

type Mutation {
  addBook(title: String, author: String): [Book]
}
`

接下来，在 /resolvers 目录底下新建 Books.js：

const books = [
  {
    id: parseInt(Math.random() * 10000),
    title: 'Harry Potter and the Chamber of Secrets',
    author: 'J.K. Rowling'
  },
  {
    id: parseInt(Math.random() * 10000),
    title: 'Jurassic Park',
    author: 'Michael Crichton'
  }
]

module.exports = {
  query: {
    books: () => books,
  },
  mutation: {
    addBook: (root, book) => {
      book.id = parseInt(Math.random() * 10000)
      books.push(book)
      return books
    }
  }
}

最后在入口文件 index.js 里分别引入上面两个文件：

const { ApolloServer } = require('apollo-server')

const typeDefs = [
  require('./types/Books')
]

const resolvers = {
  Query: {
    ...require('./resolvers/Books').query
  },
  Mutation: {
    ...require('./resolvers/Books').mutation
  }
}

const server = new ApolloServer({ typeDefs, resolvers })

server.listen().then(({ url }) => {
  console.log(`🚀 Apollo server ready at ${url}`);
})

运行 node ./mock/gql/index.js，即可在 localhost:4000 打开 Playground 进行调试了。

使用 mocker-api 把请求转发到本地的 Playground

在实际的业务中，gql 接口往往被封装成形如 /api/gql 的形式，和其他的 rest 接口一起供客户端调用。为了让 /api/gql 接口能够被转发到 localhost:4000 的 Playground，我们可以利用 mocker-api 进行转发。

改写 /mock/index.js，为其增加一个 /api/gql 的地址：

const axios = require('axios')

module.exports = {
  'POST /api': (req, res) => {
    return res.send('Hello world')
  },
  'POST /api/gql': async (req, res) => {
    const reqBody = req.body
    const { data: result } = await axios({
      url: 'http://localhost:4000',
      method: 'POST',
      data: reqBody
    }).catch(e => e)
    return res.send({
      data: result.data
    })
  }
}

这里我使用了 axios 往 apollo-server 发起请求。

此时在 webpack-dev-server 所启动的页面中往 /api/gql 发起一个 gql 请求，即可验证接口：

      fetch('/api/gql', {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ query: 'query GetBooks {  books {    title  }}' })
      })
        .then(res => res.json())
        .then(result => console.log(result))

由于 mocker-api 支持 hot reload，所以当我们什么时候不再需要 mock 数据时，直接在 /mock/index.js 中把 'POST /api/gql' 这一段注释掉即可，无需重启 dev server。

至此，GraphQL 项目中的前端 mock 方案大功告成。