Ruby on Rails & GraphQLの環境構築と実装
2022.07.13
はじめに
RailsとGraphQLで開発しているプロジェクトに参画したのですが、
環境構築を1からしたことがなかったので、やり方をまとめていきたいと思います！
GraphQLとは？
GraphQLを導入することで、1つのエンドポイントで色々なレスポンスを返すことができます。
どういうレスポンスが必要なのかをクライアント側で指定することができ、その指定された値だけを返す処理はGraphQLが行ってくれるので、このページではこの値は不要だとか、そういった面倒なことをバックエンド側で考える必要がなくなります。
Rails環境の構築
まずはGraphQL導入の前に、Rails環境構築をしていきましょう。
Controllerを使って、DBの値を返すようなAPIを作ります。
バージョン情報
1 2 3 4 | $ rails -v Rails 7.0.3 $ ruby -v ruby 3.0.2p107 (2021-07-07 revision 0db68f0233) [x86_64-darwin20] |
Hello Worldまで
以下コマンドを入力し、Ruby on Railsのプロジェクトを作成しましょう。
1 | $ rails new test_graphql_api |
そうしたら、HelloWorldを返却する用のControllerを実装します。
app/controllers下に以下ファイルを追加しましょう。
1 2 3 4 5 | class HelloController < ApplicationController def hello render json: { message: "Hello World!" } end end |
あとはconfig/routes.rbにhelloの情報を追加し、
1 2 3 | Rails.application.routes.draw do root "hello#hello" end |
rails s コマンドを実行して、起動したサーバーにアクセスすると、HelloControllerで実装したJsonが返ってくるようになりました！
DBを扱ったAPIを作成する
デフォルトのrailsアプリではsqlite3が入っているので、これを使っていきます。
以下のコマンドでUserモデルファイルを作成し、DBに反映させましょう。
1 2 | $ rails g model User name:string age:integer $ rails db:migrate |
もしモデルとテーブルを作成し直したい場合は以下コマンドでいけます。
1 2 3 | $ rails d model User $ rails g model User ... $ rails db:migrate:reset |
これでUsersテーブルができたので、Usersテーブルを使った以下のAPIを実装します。
- Userの追加
- Userの一覧取得
- 特定Userの取得
まずはUser関連を扱うControllerクラスを作成しましょう！
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | class UsersController < ApplicationController skip_before_action :verify_authenticity_token # Userの一覧取得 def index users = User.all render json: users end # Userの追加 def add user = User.create(name: params["name"], age: params["age"]) render json: user end # 特定Userの取得 def user user = User.find(params[:id]) render json: user end end |
User用のルーティングも設定します。
1 2 3 4 5 6 7 | Rails.application.routes.draw do root "hello#hello" get 'users', to: 'users#index' get 'users/:id', to: 'users#user' post 'users', to: 'users#add' end |
これで一通りの実装が完了しました！
動作確認
Usersテーブルに何も入ってない状態になっているので、まずはUserデータを追加するAPIを叩きましょう。
適当なUserをいくつか追加しておきます。
これでUserテーブルにデータが追加されたので、他のAPIも叩いてみましょう。
無事取得できましたね！
GraphQLに置き換える
ここからが本題です。
さきほどのUsersControllerをGraphlQL化していきましょう！
まずはGraphQLのインストールからです。
1 2 | gem 'graphql' gem 'graphiql-rails' # ブラウザ上でGraphQLを確認できるようにするやつ |
Gemfileに上記を入れて、 bundle install しましょう。
その後以下コマンドを叩くと、GraphQL用のController作成やroutes.rbの設定など自動で行ってくれます。
1 | $ rails g graphql:install |
あとは上記コマンドによって作成されたapp/graphql下で、GraphQLのAPIを作成していきましょう。
GraphQL用のUserモデルの作成
まずはGraphQL用のUserモデルを作成します。
以下コマンドによって、DBのテーブルを参照してapp/graphql/types下に作成されます。
1 | $ rails g graphql:object User |
1 2 3 4 5 6 7 8 9 10 11 | # frozen_string_literal: true module Types class UserType < Types::BaseObject field :id, ID, null: false field :name, String field :age, Integer field :created_at, GraphQL::Types::ISO8601DateTime, null: false field :updated_at, GraphQL::Types::ISO8601DateTime, null: false end end |
まずは実装が単純な「Userの一覧取得」から実装していきましょう。
Userの一覧取得の実装
app/graphql下にqueries/resolversフォルダを作成し、以下のファイルを追加します。
1 2 3 4 5 6 7 8 9 10 11 12 | module Queries module Resolvers class Users < GraphQL::Schema::Resolver type [Types::UserType], null: false description "Userの一覧取得" def resolve ::User.all end end end end |
そうしたら以下のコードをquery_type.rbに書き足すだけです。
1 | field :users, resolver: Queries::Resolvers::Users |
Resolverを使わなくてもquery_type.rbに直接書き足していくだけでもいいのですが、実装するAPIが多くなると肥大化してしまうため、分離しています。
これでUserの一覧取得は実装できましたので、graphiqlで確認してみましょう！
左側がリクエストで、右側でレスポンスになります。
さきほどのHTTPリクエストと同じようなデータが取得できていますね！
GraphQLでは、リクエスト中のnameやageを削除することで、レスポンスを操作することが可能です。
次にリクエスト時にidが必要な「特定Userの取得」を実装してみましょう。
特定Userの取得の実装
ほとんどUserの一覧取得と同じ感じで実装できます。
まずはResolverを追加しましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | module Queries module Resolvers class User < GraphQL::Schema::Resolver type Types::UserType, null: false description "特定Userの取得" argument :id, String, required: true, description: "Userのid" def resolve(params) # ::Userとしているのは、Queries::Resolvers::Userとして呼ばれるのを防ぐ為 ::User.find(params[:id]) end end end end |
最後にquery_type.rbにUserの定義を追加します。
1 | field :user, resolver: Queries::Resolvers::User |
これで実装できましたので、graphiqlで確認してみましょう！
HTTPリクエストと同じく、id:1の指定でhoge美のデータが取得できましたね！
最後にUserの追加を実装していきましょう。
Userの追加
データの追加にはMutationが利用できます。
以下コマンドを実行して、ファイルを作成しましょう。
1 | $ rails g graphql:mutation AddUser |
これによってapp/graphql/mutations/add_user.rbが作成されたので、ここを編集していきます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | module Mutations class AddUser < BaseMutation field :user, Types::UserType, null: false argument :name, String, required: true argument :age, Integer, required: true def resolve(params) user = User.create(name: params[:name], age: params[:age]) { "user": user } end end end |
ほとんどResolverで書いたやつと同じですね。
注意点としては、レスポンスにフィールド名を指定する必要があるため、Userモデルそのままで返すとエラーになっちゃう点です。
query_type.rbと同じくmutation_type.rbも存在しますが、ここへの記述はさきほどのコマンド実行によって完了しています。
1 | field :add_user, mutation: Mutations::AddUser |
これで実装は完了したので、graphiqlで確認していきましょう！
いろいろ試していたのでidの数値が大きくなっていますが、ここまで順調に進んでいれば3になっていると思います。
addUserをした後にusersを叩くと、しっかりと追加されていることが確認できますね！
まとめ
ControllerにAPIを実装するのと、そう変わらない手間でGraphQLAPIの作成ができたと思います。
冒頭で述べたGraphQLの利点以外にも、APIごとに必要なパラメータやレスポンスの型などが、MutationやResolverでわかりやすくなってる点が個人的には好みなところです。
今回のコードは以下のリポジトリにまとめてありますので、ぜひ確認してみてください！
https://github.com/ryuto-imai/test_graphql_api
書いた人はこんな人
IT技術10月 27, 2023Jiraの自動化- IT技術8月 16, 2023Lighthouseで計測したパフォーマンススコアのばらつきを減らす方法
- IT技術11月 7, 2022Ruby on Rails＆GraphQLのエラーレスポンス
- IT技術7月 13, 2022Ruby on Rails & GraphQLの環境構築と実装
関連記事
採用情報
\ あの有名サービスに参画!? /
バックエンドエンジニア
\ クリエイティブの最前線 /
フロントエンドエンジニア
\ 世界を変える…！ /
Androidエンジニア
\ みんなが使うアプリを創る /
iOSエンジニア
