Zenn
🍣

【Rails7】RailsAPI×GraphQLの環境構築したらちょっと詰まった

2023/10/05に公開
GraphQL
Rails
API
tech

どうも、おいどん。です

Rails×GraphQLの組み合わせを触っているのですが、少し詰まってしまったので、備忘録的に記事に残しておこうと思います

TL;DR

  • Rails×GraphQLの環境構築の仕方がわかる
  • 初学者の私が詰まったので、初学者の人必見かもしれない

今回作成したリポジトリ

https://github.com/umaidashi/rails-graphql

環境構築

rubyとrailsのバージョン

$ ruby -v                
ruby 3.2.2 (2023-03-30 revision e51014f9c0) [arm64-darwin22]

$ rails -v       
Rails 7.0.8

railsアプリを作成

  • apiモードで作っていきます
$ rails new rails-graphql --api

必要なgemを追加

$ bundle add graphql

$ bundle add graphiql-rails
  • 2つ目はgraphqlではなくgraphiqlでiが入っているので注意して下さい

graphqlに必要なファイルを生成する

$ rails g graphql:install

create app/graphql/types
create app/graphql/types/.keep
...
  • たくさんcreateされます

/graphiqlのroutingする

gem graphiql-railsの機能で、localhostのIDEからクエリを叩ける機能があるのですが、そのパスが/graphiqlなので、config/routes.rbに追加してあげます。
また、開発環境のみアクセスできるようにif文をかまします

config/routes.rb
...
post "/graphql", to: "graphql#execute" # これは `rails g graphql:install`で追加されるはず

# この下を追加
if Rails.env.development?
    mount GraphiQL::Rails::Engine, at: "/graphiql", graphql_path: "/graphql"
end

一旦起動してみる

$ rails s

Routing Errorだったのが、ActionDispatch::Request::Session::DisabledSessionError in GraphiQL::Rails::Editors#showになっているとおもいます

セッションがDisabledだと言われているので有効化しましょう
config/application.rbに以下の2行を追加します

config/application.rb
config.middleware.use ActionDispatch::Cookies
config.middleware.use ActionDispatch::Session::CookieStore

再起動してみましょう
セッションエラーは解消しましたが、Loading...から動かないと思います

railsをAPIモードで使用する場合は、もう一つ設定する必要があるみたいです

APIモードに必要な設定を追加する

https://github.com/rmosolgo/graphiql-rails#note-on-api-mode
公式ドキュメントの↑の部分に記述がありました

config/application.rbにrequire "sprockets/railtie"を追加する

config/application.rb
require "rails/all"
require "sprockets/railtie" # これを追加

この状態でサーバー起動すると、

$ rails s

Expected to find a manifest file in `app/assets/config/manifest.js` (Sprockets::Railtie::ManifestNeededError)
But did not, please create this file and use it to link any assets that need
to be rendered by your app:

Example:
  //= link_tree ../images
  //= link_directory ../javascripts .js
  //= link_directory ../stylesheets .css
and restart your server

こんなエラーが出ると思います。
公式ドキュメントにある通り、app/assets/config/manifest.jsを作ってあげましょう

app/assets/config/manifest.jsを作成する

作成したら、公式ドキュメントにある以下の2行を書き込みましょう

app/assets/config/manifest.js
//= link graphiql/rails/application.css
//= link graphiql/rails/application.js

これでサーバーを起動すると、graphiqlのIDEが開くはずです

試しにテストクエリを叩いてみる

rails g graphql:installした時点で生成された、app/graphql/types/query_type.rbに予めテストクエリが用意されています
試しに叩いてみましょう

テストクエリ

無事にHello Worldが表示されれば環境構築Okです
自由にAPIを作りましょう！！

おわりに

環境構築はできるようになったけど、APIを作るのはまた別の話...
いろんなサービスでRailsが使われてて歴史もあって、なんだかRailsは夢があると感じました

Railsマスターしたったるで！
おいどん。でした〜

Discussion