How to GraphQLを試す(Getting Started、Query)
Getting Started
最初に、How to GraphQLのGetting Startedを試します。
環境
Rubyのバージョンは、2.3.0以上が求められています。
本記事では、3.2.2を利用しました。
% ruby -v
ruby 3.2.2 (2023-03-30 revision e51014f9c0) [x86_64-darwin19]
依存関係のインストール
bundler, railsなどをinstallし、rails new、データベースを作り、サーバを起動します。
% gem install bundler
...
1 gem installed
% gem install rails
...
Installing ri documentation for rails-7.2.1
...
% rails new graphql-tutorial --skip-action-mailer --skip-action-mailbox --skip-action-text --skip-active-storage --skip-action-cable --skip-javascript --skip-system-test --skip-webpack-install
% cd graphql-tutorial
% bundle exec rails db:create
% bundle exec rails server
http://127.0.0.1:3000/ へアクセスし、Ruby on Railsのトップ画面が起動することを確認します。
サーバのセットアップ
続いて、GraphQLをサーバに追加します。
Gemfileに'graphql'を追加します。
gem 'graphql'
bundle install
bundle exec rails generate graphql:install
Gemfileにgraphiql-railsが入っていることを確認します。
もし、入っていなければ、追加します。
gem "graphiql-rails", group: :development
Query
続いて、GraphQLスキーマを定義し、Rubyでクエリリゾルバを実装し、GraphiQL Playgroundを使用して、クエリをテストします。
最初にLinkモデルを作ります。
% bundle exec rails g model Link url:string description:text
invoke active_record
create db/migrate/20240922095822_create_links.rb
create app/models/link.rb
invoke test_unit
create test/models/link_test.rb
create test/fixtures/links.yml
dbをmigrateします。
% bundle exec rails db:migrate
== 20240922095822 CreateLinks: migrating ======================================
-- create_table(:links)
-> 0.0021s
== 20240922095822 CreateLinks: migrated (0.0021s) =============================
Linkモデルができていることを確認します。
% cat app/models/link.rb
class Link < ApplicationRecord
end
続いて、rails consoleを実行し、ダミーのリンクを作成します。
% bundle exec rails c
Loading development environment (Rails 7.2.1)
graphql-tutorial(dev)> Link.create url: 'http://graphql.org/', desc
ription: 'The Best Query Language'
graphql-tutorial(dev)> Link.create url: 'http://dev.apollodata.com/
', description: 'Awesome GraphQL Client'
graphql-tutorial(dev)> exit
TRANSACTION (0.0ms) begin transaction
Link Create (0.5ms) INSERT INTO "links" ("url", "description", "created_at", "updated_at") VALUES ('http://graphql.org/', 'The Best Query Language', '2024-09-22 10:03:42.925831', '2024-09-22 10:03:42.925831') RETURNING "id" /*application='GraphqlTutorial'*/
TRANSACTION (0.5ms) commit transaction
TRANSACTION (0.0ms) begin transaction
Link Create (0.2ms) INSERT INTO "links" ("url", "description", "created_at", "updated_at") VALUES ('http://dev.apollodata.com/', 'Awesome GraphQL Client', '2024-09-22 10:03:42.927963', '2024-09-22 10:03:42.927963') RETURNING "id" /*application='GraphqlTutorial'*/
TRANSACTION (0.1ms) commit transaction
返送するためのクエリ
graphqlのLinkTypeオブジェクトを作ります。
% rails g graphql:object LinkType id:ID! url:String! description:String!
create app/graphql/types/link_type.rb
link_type.rbが作成されていることを確認します。
% cat app/graphql/types/link_type.rb
# frozen_string_literal: true
module Types
class LinkType < Types::BaseObject
field :id, ID, null: false
field :url, String, null: false
field :description, String, null: false
end
end
Query Resolver
ここまででgraphqlタイプは定義されましたが、GraphQLサーバが特定のクエリのデータを取得するために使用するリゾルバが定義されていません。
GraphQLタイプの各フィールドは、対応するリゾルバ関数が必要です。
bundle exec rails generate graphql:installのときに、app/graphql/types/query_type.rbは作成されています。
app/graphql/types/query_type.rbは、以下に変更します。
module Types
class QueryType < BaseObject
# queries are just represented as fields
# `all_links` is automatically camelcased to `allLinks`
field :all_links, [LinkType], null: false
# this method is invoked, when `all_link` fields is being resolved
def all_links
Link.all
end
end
end
fieldはいずれかの2つの方法のいずれかを指定できます。
-
fieldのメソッドはargumentsを受け入れること、および、objectやcontextにアクセスできる GraphQL::Schema::Resolver
Playgroundでテストする
GraphiQLでGraphQLクエリを実行します。
assetsにpre conpileするようにapp/assets/config/manifest.jsに以下を追加します。
//= link graphiql/rails/application.css
//= link graphiql/rails/application.js
railsサーバを起動しておきます。
% bundle exec rails s
ブラウザで http://127.0.0.1:3000/graphiql を開きます。
query_type.rbのfield、all_linksはLink.allを返し、返り値として[LinkType]の配列を返すようになっています。
LinkTypeは、link_type.rbの各fieldであるid、url、descriptionを返します。
続きは以下。
Discussion