GraphQLとは何か

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

GraphQLは、APIのクエリ言語であり、既存のデータを使用してこれらのクエリを実行するためのランタイムです。GraphQLは、API内のデータの完全でわかりやすい説明を提供し、クライアントが必要なものだけを正確に要求できるようにし、時間をかけてAPIを進化させやすくし、強力な開発者ツールを有効にします。
引用: https://graphql.org/

要するに、クエリ言語でAPIのドキュメント、問い合わせを定義することで我々が開発しているAPIの変更を容易にしてくれるものです

GraphQLでできる事

graphqlドキュメントを介してフロント・バック間の分業がしやすくなる
バックエンド
- DBのスキーマからgraphqlのAPI定義(ドキュメント)を自動生成できる
フロントエンド
- バックエンドで自動生成したドキュメントからさらに自動で型生成することができる

→スキーマ変更を伴う改修をした時の実装コストが下がる！！(かもしれない

ハンズオン

ユーザーを取得するAPIを実装するケースを考えます

バックエンド

登場人物

graphql-ruby
graphiql-rails

前提として、graphqlのAPI開発に必要なファイル群を自動生成します

rails g graphql:install

実際のAPI開発に進みます。今回はUserを取得するエンドポイントを考えます

まず User のオブジェクトを生成します

rails g graphql:object User

するとusersテーブルのスキーマからGraphQL Type相当のコードが自動生成されます。

生成されたコードを見る

.ruby

# frozen_string_literal: true

module Types
  class UserType < Types::BaseObject
    field :id, ID, null: false
    field :email, String, null: false
    # こういう露出したくないフィールドは削る 
    # field :crypted_password, String
    # field :salt, String
    field :is_verified, Boolean, null: false
    field :deleted_at, GraphQL::Types::ISO8601DateTime
    field :name_sei, String, null: false
    field :name_mid, String, null: false
    field :name_mei, String, null: false
		...
    # associationは自分で追加してあげる必要がある(要N+１対策
    field :activities, [Types::ActivitiyType], null: false
  end
end

graphql/query_type.rb でエンドポイントを定義します

.ruby

field :users, [Types::UserType], null: false do
  description '全ユーザー返す'
end

def users
  User.all
end

次に graphql スキーマを吐かせないといけないのですが、標準でそのような rakeタスクは用意されていないので、自分で作る必要があります。

lib/tasks/graphql.rake

require "graphql/rake_task"
GraphQL::RakeTask.new(schema_name: "MySchema")

このrakeタスクを作成してから

$ rails graphql:schema:idl

を叩くと graphqlドキュメントが生成されます

こちら

type Query {
  """
  全てユーザー返す
  """
  users: [User!]!
}

type User {
  createdAt: ISO8601DateTime!
  deletedAt: ISO8601DateTime
  email: String!
  id: ID!
  nameSei: String!
  nameMid: String!
  nameMei: String!
  updatedAt: ISO8601DateTime!
  ...
}

APIはこれで OK

フロントエンド

登場人物

urql
graphql-codegen

まずはクエリを定義します。

export const UsersQuery = graphql(/* GraphQL query */ `
  query UserQuery {
    users {
      id,
      email,
      nameSei,
      nameMid,
      nameMei
    }
  }
`);

次にgraphqlの設定ファイルを置きます

codegen.ts

import type { CodegenConfig } from '@graphql-codegen/cli'

const config: CodegenConfig = {
   schema: './schema.graphql',
   documents: ['src/**/*.{ts,tsx}'],
   generates: {
      './src/graphql': {
        preset: 'client',
        plugins: []
      }
   }
}
export default config

これで

$ yarn graphql-codegen

すると型が自動生成されます。(自動生成された型は膨大なので割愛

実際に urql で呼び出すといい感じに型がついています

N+1対策