2017の23日目の記事です。今回はJavaScriptでGraphQLのサーバ/クライアントや関連ツールを提供しているApolloのツールセットでRailsプロジェクトでGraphQLのモックサーバを立ち上げるところまでを試してみます。APIとVue.js製のSPAからなるアプリケーションを開発していて、スキーマファースト開発を取り入れています。GraphQLで通信するAPIを実験的に導入しはじめていますが、こちらは明示的な開発フローを決めず導入しようとしているため、なかなかサクサクと開発が進まないのが現状です。そこで、GraphQLでも先にインタフェースだけを決めてから、モックサーバを使ってフロントエンドとバックエンドで並行開発していけばよいのでは、という発想になります。そもそもGraphQLはサーバに対するクエリを書くためのスキーマありきの技術であり、それがRESTの文脈におけるAPIとは異なる点です。その点で、スキーマファースト開発と呼ぶと語弊があるかもしれません。ここでは「GraphQLの型やフィールドだけを書いて、実際にデータを問い合わせる部分(リゾルバ)を書かない」ことをスキーマファースト開発とひとまず呼びます。裏の実装を後回しにして、フロントエンド/バックエンドでインタフェースについて合意が取れればモックサーバを使って開発を進められる、という状態を目指します。利用ツール上述したとおり、Apolloのツールセットを使います。www.apollographql.com具体的には次のものを使います。languageダミーデータを返してくれるサーバのことをスタブサーバと呼んだりもしますが、graphql-toolsが"Mocking"という言葉を使っているので、この記事ではモックサーバと呼ぶことにします。今回はRailsでgraphql-rubyを使っている状況を想定します。Railsプロジェクトにおける最終的な構成は次のとおりです(関係する部分だけ書いています)。type_defs.js詳細は次の通りです。想定する開発フローは次の通りです。graphql-rubyのDSLでGraphQLの型やフィールドを書く追加した型やフィールドのダミーデータを書くモックサーバで使うレビューモックサーバを立ち上げるgraphql-rubyでGraphQLスキーマをダンプしてApolloで使える形式にするExpressとApolloでGraphQLモックサーバを立ち上げるフロントエンド/バックエンドが並行して開発するそれぞれ説明します。graphql-rubyのDSLでGraphQLの型やフィールドを書くこれはgraphql-rubyをふつうに使うときとほぼ同じになります。書かない点が違いといえます。!types.Stringendこのように開発に必要な型とフィールドだけを書いていきます。追加した型やフィールドのダミーデータを書くモックサーバとして動かすには、サーバになんらかのデータを返してもらう必要があります。Apolloのgraphql-toolsで作れるモックサーバは、フィールドの型に応じてある程度ランダムにデータを返してくれるようになっています。実際に返ってくるであろうものに近いデータを返したほうがフロントエンドの開発ではありがたいということもあるでしょう。ダミーデータを見ればフィールドの表現しているものの雰囲気がわかるという利点もあります。Apolloのモックサーバが返す値を指定するために、次のようなオブジェクトを定義します。}),};GraphQLの型に対して、型のフィールドとダミーデータを持つオブジェクトを書き、それを返す関数を持たせているだけです。これを書いておくだけで、connectionなどを使ってクエリがネストしているときも、graphql-toolsのモックサーバがいい感じにダミーデータを返してくれるようになります。上述した流れでスキーマとダミーデータだけ書けたら、チームでレビューするなりして合意をとります。モックサーバを立ち上げるApolloを使ってモックサーバを立ち上げます。Expressとapollo-serverを使って、次のようなサーバを書きます。