0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

コード譜投稿アプリを作る #3(railsにgraphql導入)

Last updated at Posted at 2022-09-18

←前回の記事

GraphQLの導入経緯

当初は導入するつもりはなかったのですが、新しくジョインするところがRails&GraphQLでバックエンドを実装しているらしいので練習がてら急遽導入することに決めました。
これまではshopifyのカートシステムのgraphQLAPIを使ってフロントを実装する、ということはやっていたので呼び出し側ではgraphQL使ったことがありますが、APIを作成したことはなかったので慣れておかないと…

GraphQLがどんなものかとか、REST APIとどう違うかなどは他に良い記事がいくつもあるので省略。

GraphQLのインストール

GraphQL公式のRails用チュートリアルをみながら進めていきます。

まずはgemをダウンロード

Gemfileに追加して、

Gemfile
gem "graphql"

コマンド実行

$ docker-compose run --rm web bundle install
$ docker-compose run --rm rails g graphql:install

もう一度bundle installが必要な場合があるそうです。

$ docker-compose run --rm web bundle install

これでインストールが完了。

実装

今回はコード譜をScoreというオブジェクトで表現したいと考えているので、そのテーブルを最初に作成します。

まずはテーブル作成。
持たせる属性はとりあえずtitleだけ

$ docker-compose run --rm web bundle exec rails g model Score title:string
$ docker-compose run --rm web bundle exec rails db:migrate

そしてGraphQLオブジェクトを以下のコマンドで作成。
最後に指定しているScoreと同名のテーブル(↑でつくったやつ)から型定義ファイルを作成してくれます。

$ docker-compose run --rm web rails g graphql:object Score

/app/graphql/types/score_type.rbが作成されます。

/app/graphql/types/score_type.rb
# frozen_string_literal: true

module Types
  class ScoreType < Types::BaseObject
    field :id, ID, null: false
    field :title, String
    field :created_at, GraphQL::Types::ISO8601DateTime, null: false
    field :updated_at, GraphQL::Types::ISO8601DateTime, null: false
  end
end

特に指定していないのにちゃんとtitleも反映されていますね :thumbsup:

/app/graphql/types/query_type.rbを編集。
schemaを定義します。いったんqueryだけ

/app/graphql/types/query_type.rb
module Types
  class QueryType < Types::BaseObject
    # Add `node(id: ID!) and `nodes(ids: [ID!]!)`
    include GraphQL::Types::Relay::HasNodeField
    include GraphQL::Types::Relay::HasNodesField

    field :scores, [Types::ScoreType], null: false
    def scores
      Score.all
    end

    field :score, Types::ScoreType, null: false do
      argument :id, Int, required: false
    end
    def score(id:)
      Score.find(id)
    end
  end
end

これでGraphQL使えるようになったと思うので、コンソールで動き確かめてみます。

$ docker-compose rum --rm web bundle exec rails c

でコンソール起動

> Score.create(title: "title")

でデータ作成。
公式ではGraphQL::Schemaを継承したクラスを作成していますが、AppSchemaでも動作確認できました。

> AppSchema.execute("{scores{id title}}").to_hash
    Score Load (17.1ms)  SELECT `scores`.* FROM `scores`
    => {"data"=>{"scores"=>[{"id"=>"1", "title"=>"title"}]}}

ちゃんと取得できてそうです!
uuidにしたいけどmysqlじゃ難しいっぽいな…

とりあえずここまで。次回はフロントで表示するところまでやろうかと思います!

補足

graphqlの動作をローカルのサーバー上で確認できるgraphiqlというgemがあるらしいのですが、ActionDispatch::Request::Session::DisabledSessionErrorとエラーが出て表示できず。
Rails7系からAPIモードにするとセッション無効になるとかで、良い解決方法は無さそうだったので今回はこのgemの使用は見送りました。コンソールでも確認できたし別にいいかな。apollo使えればそれで同じこともできるはずなので。

参考にさせていただいたサイト・記事

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?