【rails】GraphQLを使用してAPIを作成する方法を紹介します

今回の記事は、railsでのAPI作成方法を紹介します。

Lineやtwitter、facebookなど、APIを提供している企業が増える中で、いまいちAPIについてピンとこない方は、ぜひ一緒に学習していきましょう。

正直僕はこのgemを知って実際に書いたら、凄さに驚きを隠せませんでした!

versions
  • ruby 2.6.5
  • rails 6.1.1

graphqlのgemをインストールしよう

まずは準備からです。

~$ rails new graphql-test
~$ cd graphql-test
graphql-test$ rails db:create

Gemfileに以下を記述します。

gem 'graphql'
gem 'graphiql-rails', group: :development

bundle installを忘れずに行ったら、ターミナルに以下のコマンドを入力します。

graphql-test$ rails g graphql:install

これで準備が完了です。

rails sをして、http://localhost:3000/graphiqlにアクセスすると以下の画像のようになります。

これ見た瞬間に、「おーーーー」ってなりました。。。笑

※エラーが出る方は、assets/config/manifest.jsに以下を記述してください。

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

queryを実行して情報を取得する

GraphQLは、Type(型)を指定することでqueryを実行し、情報を取得します。

まずは、modelを作成していきます。

graphql-test$ rails g model todo title:string description:text

rails db:migrateを実行して、DBに値を保存しましょう。

graphql-test$ rails c
> Todo.create!(title: "hello", description: "world")

ついにGraphQLの準備です。

graphql-test$ rails g graphql:object Todo id:ID! title:String! description:String!

app/graphql/types/query_type.rbに以下を追記します。

field :todos, [Types::TodoType], null: false,  
description: "Returns all todos"  
def todos  
  Todo.all  
end

query実行の際の、メソッド名と処理を記述していますね。

続いて、app/graphql/types/todo_type.rbに以下を追記します。

    field :id, ID, null: false
    field :title, String, null: false  
    field :description, String, null: false  

ここでは、どの情報を取得するかを記述しています。

これで完了です。

それでは、先ほどのページにアクセスして以下を実行しましょう。

{
 todos {
   id
   title
   description
 }
}

//返り値

{
  "data": {
    "todos": [
      {
        "id": "1",
        "title": "hello",
        "description": "world"
      }
    ]
  }
}

これだけで感動したのは、僕だけですかね?笑

GraphQLのポイント

決まった形式で、必要な情報だけを返してくれる

Commentを紐付けて投稿する(応用編)

今度は、Todoモデルにコメントを紐付けて、投稿していきましょう。

投稿する場合は、mutationフォルダを使用します。

まずはcommentモデルを作成していきます。

graphql-test$ rails g model comment content:text todo:references
graphql-test$ rails db:migrate

アソシエーションを組みます。

// Todoモデル
has_many :comments

// Commentモデル
belongs_to :todo

それでは、GraphQLの準備をしていきましょう。

graphql-test$ rails g graphql:mutation CreateComment

app/graphql/mutations/create_comment.rbに以下を追記します。

field :comment, Types::CommentType, null: false

argument :todo_id, ID, required: true
argument :content, String, required: true

def resolve(**args)
  todo = Todo.find(args[:todo_id])
   comment = todo.comments.build(content: args[:content])
   comment.save
   {
     comment: comment
   }
end

app/graphql/types/comment_type.rbを以下のように編集します。

field :id, ID, null: false
field :content, String, null: false
field :todo, Types::TodoType, null: false

todoは外部キー制約で他テーブルなので、参照先を記述していますね。

最後に、todo_type.rbに以下を追記してください。

field :comments, [Types::CommentType], null: false

そしたら、またlocalhostにアクセスして以下を実行します。

mutation {
  createComment(
    input:{
      todoId: 1
      content: "HELLO WORLD"
    }
  ){
    comment {
      id
      content
      todo {
        id
        title
        comments {
          id
          content
        }
      }
    }
  }
}

// 返り値

{
  "data": {
    "createComment": {
      "comment": {
        "id": "1",
        "content": "HELLO WORLD",
        "todo": {
          "id": "1",
          "title": "hello",
          "comments": [
            {
              "id": "1",
              "content": "HELLO WORLD"
            }
          ]
        }
      }
    }
  }
}

あっという間にできましたね。

まとめ

  • GraphQLを使用すると簡単にAPIが作成可能になる
  • queryの実行はtypesディレクトリを使用する
  • DBへの保存はmutationsディレクトリを使用する

僕もまだ理解できていないところがありますが、とても勉強になりました!
参考サイトはもっと詳しく書いてあるので、興味のある方はぜひ読んでみてください。

参考

Web APIとは何なのか

「GraphQL」徹底入門 ─ RESTとの比較、API・フロント双方の実装から学ぶ

Apollo使ってGraphQLを自由自在に操(りたい)

Rails×GraphQLやる

【Rails】graphql-rubyでAPIを作成

GraphQLとRailsでAPIを構築する方法

Schemas and Types