Zenn
🦔

APIモードなRailsでGraphiQLにテストクエリを投げるまで

2022/06/19に公開
GraphQL
Rails
Ruby
note
tech

概要

RailsでのGraphQLを簡単に試す必要があり、その時のメモです。

まずはrails new

$ mkdir test-app
$ cd test-app
$ bundle init
$ cat Gemfile

# ... 省略
gem "rails"

$ bundle install --path vendor/bundle
$ bin/rails new --api --skip-test ./

graphqlとgraphiql-railsをインストールする

$ bundle add graphql
$ bundle add graphiql-rails
$ cat Gemfile

# ... 省略
gem "graphql", "~> 2.0"

group :development do
  gem "graphiql-rails", "~> 1.8"
end

$ bundle install
$ bin/rails g graphql:install

graphiqlを表示できるようにする

  • graphiqlのroutingを追加する。
$ cat config/routes.rb
Rails.application.routes.draw do
  post "/graphql", to: "graphql#execute"

  if Rails.env.development?
    mount GraphiQL::Rails::Engine, at: '/graphiql', graphql_path: '/graphql'
  end
end
  • sprockets/railtieをreqquireする。
  • sessionを有効にする。
  • graphiqlがassetsを見れるようにする。
$ cat config/application.rb

# ...省略
require "sprockets/railtie"

# ...省略
module TestApp
  class Application < Rails::Application
  
# ...省略
    config.middleware.use ActionDispatch::Cookies
    config.middleware.use ActionDispatch::Session::CookieStore
  end
end

$ mkdir -p app/assets/config
$ cat app/assets/config/manifest.js
//= link graphiql/rails/application.css
//= link graphiql/rails/application.js

参考: ※文中にはRails6とありますが、Rails7でも同様でした。
https://github.com/rmosolgo/graphiql-rails/blob/master/readme.md#note-on-api-mode

あとは起動してアクセス

$ bin/rails s

http://127.0.0.1:3000/graphiql

Discussion