Rails6のAPIモードでGraphQLを使う方法(エラー対策も含む) #Rails

はじめに

railsでGraphQLを使うための方法をまとめてみました。

必要最低限の実装にとどめ、GraphQLの動作確認ができることをメインに紹介します。(+αでエラーの対策を記載しました。)
そのため、Queryの設定はしていません。

【参考】
Rails APIモードで始めるGraphQL
【Rails】graphql-rubyでAPIを作成

アプリ作成

ターミナル

$ rails new demo-graphql --api       #オプションで--apiをつけるとAPIモードでappを作成

Gemfileにgraphql, graphiql-rails(開発環境で使用)を追加

Gemfile

gem 'graphql'    #追加

group :development, :test do
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
  gem 'graphiql-rails'   #開発環境に追加
end

コメントアウトを外す

config/application.rb

require "sprockets/railtie"    #コメントアウトを外す

ターミナルで下記を実行

ターミナル

$ bundle install
$ rails generate graphql:install   #GraphQLに関するファイルが作成されます

routes.rbに下記を追加

routes.rb

Rails.application.routes.draw do
  if Rails.env.development?
    # add the url of your end-point to graphql_path.
    mount GraphiQL::Rails::Engine, at: "/graphiql", graphql_path: "/graphql" 
  end
  post '/graphql', to: 'graphql#execute'  #ここはrails generate graphql:installで自動生成される
end

動作確認

rails sした後にhttp://localhost:3000/graphiqlに接続。(graphqlではなくgraphiqlと"i"が入っているので注意してください。上記のroutesで変更しています。)
下記の画面になれば接続成功！

試しにQueryを送ると設定をしていないのでエラーが返ってきます。

GraphiQLに接続できない場合(Sprockets::Rails::Helper::AssetNotPrecompiled in GraphiQL::Rails::Editors#show)

どの記事を見ても上記の設定しか紹介されておらず、そのまま実装してもエラーが出たので対策方法を紹介します。
APIモードで作成するとassetsが作成されないのでそれが原因のようです。
[Rails6][sprockets4.0.0]Sprocketsを無効にするためにapp/assetsフォルダ以下を削除すると、Sprockets::Railtie::ManifestNeededErrorが出た

どちらかをやれば大丈夫なので開発環境に合わせて選択してください。

エラー内容↓

対策① assets/config/manifest.jsを作成する

assets/config/manifest.jsファイルを作成し、下記を記載する。

assets/config/manifest.js

//= link graphiql/rails/application.css
//= link graphiql/rails/application.js

対策② gem 'sprocket'のバージョン3.7.2に下げる

sprockets4.0.0になってからassetsファイルがないとエラーが出るようです。

なのでバージョンを下げると解消できます。

Gemfile

gem 'sprockets', '~> 3.7.2'  #追加する

ターミナル

$ bundle update

終わりに

今回はrails6でGraphQLを使えるようにすることにフォーカスを当てました。
実際にQueryを作成してデータを受け取るところは他の記事を参考にしてください。