Apollo GraphQL Mock Server のすすめ

ApolloはGraphQL導入を圧倒的に楽にしてくれるツール

https://www.apollographql.com

https://github.com/apollographql

今回は、GraphQLモックサーバーの作り方について

モックサーバーを使うと、アプリやウェブのUI実装でバックエンドの開発を待つことなく開発が進められたり、UIテストを用意にすることができます。

nodeを使うのでバージョン管理が手軽なanyenvを利用
(既に使える場合、MockServer用ディレクトリを作るまでスキップ可)

Install anyenv

https://github.com/anyenv/anyenv

srea at SREA-MacBookPro in ~/data/ (develop)
$ brew install anyenv

srea at SREA-MacBookPro in ~/data/ (develop)
$ anyenv init
# Load anyenv automatically by adding
# the following to ~/.zshrc:

eval "$(anyenv init -)"


srea at SREA-MacBookPro in ~/data/ (develop)
$ eval "$(anyenv init -)"
ANYENV_DEFINITION_ROOT(/Users/srea/.config/anyenv/anyenv-install) doesn't exist. You can initialize it by:
> anyenv install --init

srea at SREA-MacBookPro in ~/data/ (develop)
$ anyenv install --init
Manifest directory doesn't exist: /Users/srea/.config/anyenv/anyenv-install
Do you want to checkout ? [y/N]: y
Cloning https://github.com/anyenv/anyenv-install.git master to /Users/srea/.config/anyenv/anyenv-install...
Cloning into '/Users/srea/.config/anyenv/anyenv-install'...
remote: Enumerating objects: 48, done.
remote: Total 48 (delta 0), reused 0 (delta 0), pack-reused 48
Unpacking objects: 100% (48/48), done.

Completed!

Install nodenv

https://github.com/nodenv/nodenv

$ anyenv install nodenv

...

Install nodenv succeeded!
Please reload your profile (exec $SHELL -l) or open a new session.

$ nodenv
nodenv 1.3.0

MockServer用ディレクトリを作る

$ mkdir graphql-mock-server
$ cd graphql-mock-server
$ nodenv init
$ nodenv install 10.16.0
$ nodenv local 10.16.0
$ node -v
v10.16.0
$ npm -v
6.9.0

GraphQL MockServer を作る

2つのファイルを作る

少し前まではapollo-codegenでしたが、今はapolloに統合されています。

{
  "name": "graphql-mock",
  "version": "0.0.1",
  "description": "GraphQL-Mock-Server",
  "main": "server.js",
  "dependencies": {
    "apollo": "^2.16.0",
    "apollo-server": "^2.7.0",
    "faker": "^4.1.0",
    "get-graphql-schema": "^2.1.2",
    "graphql": "^14.1.1",                                                                                                                                                         
    "graphql-import": "^0.7.1",
    "graphql-schema-typescript": "^1.2.8",
    "moment": "^2.24.0",
    "node": "^11.7.0",
    "node-datetime": "^2.1.2"
  }
}
const { buildClientSchema } = require('graphql');
const introspectionResult = require('./schema.json');
const { ApolloServer } = require('apollo-server');

const schema = buildClientSchema(introspectionResult);

const server = new ApolloServer({
  schema,
  mocks: true,
});

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

スキーマ定義をダウンロード

今回はパブリックなAPIから

$ npm install
$ apollo schema:download --endpoint=https://graphql-pokemon.now.sh/ schema.json
  ✔ Loading Apollo Project
  ✔ Saving schema to schema.json

ブラウザを開く

$ node server.js
🚀 Server ready at http://localhost:4000/

GraphQL Playgroundが開き、ここでQueryを実行することができます。
データはデフォルトで型に合わせたランダムな値を返します。
(Stringの場合は Hello World)
このデータは書き換えることが可能なので、特定のテストパターン数種類を用意して返すといったことも可能です。

おまけ

schema.jsonではなくschema.graphql形式でダウンロードする方法
https://github.com/prisma/get-graphql-schema

$ npm install get-graphql-schema
$ get-graphql-schema 'https://graphql-pokemon.now.sh/' > schema.graphql
"""Represents a Pokémon's attack types"""
type Attack {
  """The name of this Pokémon attack"""
  name: String

  """The type of this Pokémon attack"""
  type: String

  """The damage of this Pokémon attack"""
  damage: Int
}
...
...

schema.graphql形式でMock Serverを動かす方法はこれ

const { importSchema } = require('graphql-import')
const typeDefs = importSchema('./schema.graphql')
const { ApolloServer, gql } = require('apollo-server');
const server = new ApolloServer({
    typeDefs,
    mocks: true,
});

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

参考リンク