GraphQL＠GraphQL-API¶
はじめに¶
本サイトにつきまして、以下をご認識のほど宜しくお願いいたします。
01. GraphQLの仕組み¶
アーキテクチャ¶
GraphQL は、GraphQL-API の GraphQL サーバー、GraphQL クライアント、から構成される。
従来の RESTful-API を使用した場合、バックエンドのエンドポイントが増えるたびに、フロントエンドが指定すべきエンドポイントも増えていく。
一方で、GraphQL-API を使用した場合、単一のエンドポイントを GraphQL で指定すれば、GraphQL-API が適切な宛先にルーティングしてくれる。
GraphQLサーバー¶
▼ APIスキーマ¶
GraphQL-API が受信する CRUD のデータ型や必須データを定義したもの。受信したデータのバリデーションに使用する。
GraphQLクライアント¶
▼ クエリ¶
GraphQL-API に送信する CRUD の実際のデータを定義したもの。
02. CRUD¶
Query¶
▼ APIスキーマ (サーバー側)¶
＊例＊
ここでは、Query 処理を受信するための API スキーマを定義したとする。
# ルート型
type Query {
user: User!
}
# User型
type User {
id: ID!
name: String!
email: String!
}
▼ クエリ (クライアント側)¶
データ読出のクエリを定義する。
＊例＊
ここでは、前述の Query 処理の API スキーマで定義した GetUser() 関数を使用すると仮定する。
query GetUser {
user {
id
name
}
}
$ curl \
-X POST \
-H "Content-Type: application/json" \
--data 'query GetUser { user { id name }}'
{
"data": {
"user": {
"id": "hoge",
"name": "foo",
}
}
}
Mutation¶
▼ APIスキーマ (サーバー側)¶
＊例＊
ここでは、Mutation 処理を受信するための API スキーマを定義したとする。
# ルート型
type Mutation {
createUser(data: UserCreateInput!): User!
}
# User型
type User {
id: ID!
name: String!
email: String!
}
# UserCreateInput型
input UserCreateInput {
id: ID
name: String!
email: String!
}
▼ クエリ (クライアント側)¶
データ作成/更新/削除のクエリを定義する。
＊例＊
ここでは、前述の Mutation 処理の API スキーマで定義した CreateUser() 関数を実行すると仮定する。
mutation CreateUser {
createUser(data: {name: "bar", email: "example@gmail.com"}) {
name
}
}
クライアント側で CreateUser() 関数を実行する。
$ curl \
-X POST \
-H "Content-Type: application/json" \
--data 'mutation CreateUser { createUser(data: { name: "bar", email: "example@gmail.com"}) { name }}'
{
"data": {
"createUser": {
"name": "bar",
}
}
}