GraphQLについて基本的なことをメモる

最近GraphQLを使うことが多いので基本的なことをメモる。

GraphQLとREST APIの違い

GraphQL

エンドポイントが1つだけ
1回のリクエストで複数のデータを取得できる
必要なデータのみ取得することができる

REST API

エンドポイントが複数必要になる
各リソースごとにリクエストが発生する
不要なデータまで取得してしまうことがある

GraphQLの構成

クエリ言語とスキーマ言語の2つで構成されている

クエリ: フロント側からのリクエスト
スキーマ: サーバー側からのレスポンス

クエリ言語

サーバーに対してリクエストするための言語でGraphQLの場合はquery、mutation、subscriptionがある。

| 種類 | 意味 | 効果 | | ---- | ---- | ---- | | query | データの取得 | GET | | mutation | データの更新 | POST/PUT/DELETE | | subscription | イベントの通知 | Websocket |

スキーマ言語

GraphQL APIの仕様を記述するための言語
クエリからのリクエストを記述したスキーマに従って処理しレスポンスを返す
言語やフレームワークには依存しない
スキーマでは定義のみ行いデータの操作はしない
- データ操作はリゾルバで行う
- リゾルバとはフィールドのデータを返す関数のこと

GraphQLのアーキテクチャ

GraphQLサーバー

GraphQLを使用するには専用のサーバーの構築が必要でGraphQLクライアントから送信されたクエリを解析&実行してレスポンスを返す。下記が主なライブラリとなる。

GraphQL Ruby
Apollo Server
GraphQL.js

GraphQLクライアント

フロントエンド側からデータの取得や更新をクエリで指定してGraphQLサーバーにリクエストを送信する。下記が主なライブラリとなる

Apollo Client
Relay

GraphQLの基本

※GraphQL.jsのチュートリアルで試してます

まずはGraphQL.js のインストール

npm install --save graphql

ほぼチュートリアルのママ書いてみる

const { graphql, buildSchema } = require('graphql');

// スキーマ（定義のみでデータの操作は行わない）
const schema = buildSchema(`
  type Query {
    hello: String
  }
`);

// リゾルバ（特定のフィールドのデータを返す関数でデータの操作を行う部分）
const rootValue = { hello: () => 'Hello world!' };

const source = '{ hello }';

// レスポンスの出力
graphql({ schema, source, rootValue }).then((response) => {
  console.log(response);
});

レスポンスを表示

node hello.js
{ data: [Object: null prototype] { hello: 'Hello world!' } }

この流れでデータを取得できる

スキーマ定義
リゾルバでデータを返す
フロントエンド側からクエリを発行する
データの取得

型

組み込みの型で5種類ある

String (文字列型)
Int (整数型)
Float (浮動小数点数型)
Boolean (論理型)
ID (ID型、実態はString型で重複しないものである必要がある)

ユーザーが自由に定義できる型

オブジェクト型
スカラー型
列挙型の3種類ある

オブジェクト型

type User {
  name: String! // !はnullにならない事を意味する
  age: Int
  id: ID!
  friends: [String] // 配列として定義することも可能
}

スカラー型

scalar Date

列挙型

enum Country {
  JAPAN
  FRANCE
}