1. HOME
  2. ブログ
  3. IT技術
  4. Ruby on Rails & GraphQLの環境構築と実装
Ruby on Rails & GraphQLの環境構築と実装

Ruby on Rails & GraphQLの環境構築と実装

はじめに

RailsとGraphQLで開発しているプロジェクトに参画したのですが、

環境構築を1からしたことがなかったので、やり方をまとめていきたいと思います!

GraphQLとは?

GraphQLを導入することで、1つのエンドポイントで色々なレスポンスを返すことができます。

どういうレスポンスが必要なのかをクライアント側で指定することができ、その指定された値だけを返す処理はGraphQLが行ってくれるので、このページではこの値は不要だとか、そういった面倒なことをバックエンド側で考える必要がなくなります。

Rails環境の構築

まずはGraphQL導入の前に、Rails環境構築をしていきましょう。

Controllerを使って、DBの値を返すようなAPIを作ります。

バージョン情報

Hello Worldまで

以下コマンドを入力し、Ruby on Railsのプロジェクトを作成しましょう。

そうしたら、HelloWorldを返却する用のControllerを実装します。

app/controllers下に以下ファイルを追加しましょう。

あとはconfig/routes.rbにhelloの情報を追加し、

rails s コマンドを実行して、起動したサーバーにアクセスすると、HelloControllerで実装したJsonが返ってくるようになりました!

DBを扱ったAPIを作成する

デフォルトのrailsアプリではsqlite3が入っているので、これを使っていきます。

以下のコマンドでUserモデルファイルを作成し、DBに反映させましょう。

もしモデルとテーブルを作成し直したい場合は以下コマンドでいけます。

これでUsersテーブルができたので、Usersテーブルを使った以下のAPIを実装します。

  • Userの追加
  • Userの一覧取得
  • 特定Userの取得

まずはUser関連を扱うControllerクラスを作成しましょう!

User用のルーティングも設定します。

これで一通りの実装が完了しました!

動作確認

Usersテーブルに何も入ってない状態になっているので、まずはUserデータを追加するAPIを叩きましょう。

適当なUserをいくつか追加しておきます。

これでUserテーブルにデータが追加されたので、他のAPIも叩いてみましょう。

無事取得できましたね!

GraphQLに置き換える

ここからが本題です。

さきほどのUsersControllerをGraphlQL化していきましょう!

まずはGraphQLのインストールからです。

Gemfileに上記を入れて、 bundle install しましょう。

その後以下コマンドを叩くと、GraphQL用のController作成やroutes.rbの設定など自動で行ってくれます。

あとは上記コマンドによって作成されたapp/graphql下で、GraphQLのAPIを作成していきましょう。

GraphQL用のUserモデルの作成

まずはGraphQL用のUserモデルを作成します。

以下コマンドによって、DBのテーブルを参照してapp/graphql/types下に作成されます。

まずは実装が単純な「Userの一覧取得」から実装していきましょう。

Userの一覧取得の実装

app/graphql下にqueries/resolversフォルダを作成し、以下のファイルを追加します。

そうしたら以下のコードをquery_type.rbに書き足すだけです。

Resolverを使わなくてもquery_type.rbに直接書き足していくだけでもいいのですが、実装するAPIが多くなると肥大化してしまうため、分離しています。

これでUserの一覧取得は実装できましたので、graphiqlで確認してみましょう!

左側がリクエストで、右側でレスポンスになります。

さきほどのHTTPリクエストと同じようなデータが取得できていますね!

GraphQLでは、リクエスト中のnameやageを削除することで、レスポンスを操作することが可能です。

次にリクエスト時にidが必要な「特定Userの取得」を実装してみましょう。

特定Userの取得の実装

ほとんどUserの一覧取得と同じ感じで実装できます。

まずはResolverを追加しましょう。

最後にquery_type.rbにUserの定義を追加します。

これで実装できましたので、graphiqlで確認してみましょう!

HTTPリクエストと同じく、id:1の指定でhoge美のデータが取得できましたね!

最後にUserの追加を実装していきましょう。

Userの追加

データの追加にはMutationが利用できます。

以下コマンドを実行して、ファイルを作成しましょう。

これによってapp/graphql/mutations/add_user.rbが作成されたので、ここを編集していきます。

ほとんどResolverで書いたやつと同じですね。

注意点としては、レスポンスにフィールド名を指定する必要があるため、Userモデルそのままで返すとエラーになっちゃう点です。

query_type.rbと同じくmutation_type.rbも存在しますが、ここへの記述はさきほどのコマンド実行によって完了しています。

これで実装は完了したので、graphiqlで確認していきましょう!

いろいろ試していたのでidの数値が大きくなっていますが、ここまで順調に進んでいれば3になっていると思います。

addUserをした後にusersを叩くと、しっかりと追加されていることが確認できますね!

まとめ

ControllerにAPIを実装するのと、そう変わらない手間でGraphQLAPIの作成ができたと思います。

冒頭で述べたGraphQLの利点以外にも、APIごとに必要なパラメータやレスポンスの型などが、MutationやResolverでわかりやすくなってる点が個人的には好みなところです。

今回のコードは以下のリポジトリにまとめてありますので、ぜひ確認してみてください!

https://github.com/ryuto-imai/test_graphql_api

関連記事

採用情報

\ あの有名サービスに参画!? /

バックエンドエンジニア

\ クリエイティブの最前線 /

フロントエンドエンジニア

\ 世界を変える…! /

Androidエンジニア

\ みんなが使うアプリを創る /

iOSエンジニア