GraphQL周りの開発環境を整える

GraphQLとは？

Facebookが開発しているWeb APIの規格です。最近では、GithubもAPIをGraphQLに採用しています。

GraphQL

GraphQLの特徴は、APIを開発する際に、リクエストとレスポンスをクライアント側で柔軟に変更できる点です。ユースケースによっては、RESTful APIに比べて明らかに管理コストが削減できます。

また、各種言語のプラグインを用いることで簡単にGraphQL APIサーバーを構築できるほか、APIの変更・バージョンアップなどに強い（変更コストを少なくできる）のが大きなメリットです。

筆者の関わっているプロジェクトはSPAサイトが多く、毎回APIサーバーを一から書くのが面倒だったので、最近ではAPIを作る際はGraphQLを使うようにしています。

開発環境

開発サーバー

こちらは、各種言語のプラグインなりモジュールを導入するのが一番良いでしょう。

# node.js
npm install graphql --save

# ruby
# Gemfile
gem 'graphql'

bundle install

dockerが使える環境であれば、prismaを使うのも手です。

prisma

npm i -g prisma
prisma init my-graphql-server # REPL で実装を選ぶ
cd my-grhapql-server
docker-compose up -d
prisma deploy

面倒なCRUDの構築などをprismaが全部やってくれます。コマンドラインからクエリやスキーマの設定もできるので、本当に爆速でGraphQLサーバーが構築できます。

ただし、prismaはCreateやDELETEもできてしまうため、本番環境で使う際にはprismaサーバーの前に、ユーザーがリクエストを飛ばす「ユーザー専用GraphQLサーバー」が必要になるでしょう。

GUI環境

GraphQLには、ブラウザでAPIの動作を確認できるGraphQL Playgroundがあります。

各言語のGraphQLプラグインにはこちらが用意されていることがほとんどなので、サーバーを立てればそのままGraphQL Playgroundも使えると言うこと多いでしょう。

例えば、node.jsのexpress-graphqlであれば、expressの待ち受けで渡す変数に「graphiql: true」を与えるだけで、GraphQL Playgroundが起動します。

# node.js

const express = require('express')
const graphqlHTTP = require('express-graphql')
.
. # 以下略
.
app.post('/', graphqlHTTP({
  schema: schema,
  rootValue: root,
  graphiql: true # => GraphQL Playgroundをオンにする
}))

また、他のサードパーティアプリだと、無料のAltair GraphQL Clientが各種言語に対応していて使いやすいです。

Altair GraphQL Client

macOS、Windows、Linux、Webブラウザに対応しているので、どんな環境でも使えます。

動作的には、GraphQL Playgroundを基本に、より細かい使い勝手を向上させている感じです。ローカルAPIだけでなく、ネットで公開されている全てのGraphQLサーバーのデータを読めるので、ローカル・本番両方で使えるので便利です。

サクサク動作だけでなく、見た目もモダンで洗練されているので、常用GraphQLアプリとしてもストレスなくGraphQLの操作ができます。

GraphQL周りの開発環境を整える方法を見てきました。

REST APIと比べて格段に簡単で、スピーディにAPIを構築できるGraphQL。これからのAPIの定番となりそうですね。