コンテンツにスキップ

GraphQL@GraphQL-API

はじめに

本サイトにつきまして、以下をご認識のほど宜しくお願いいたします。


01. GraphQLの仕組み

アーキテクチャ

GraphQLは、GraphQL-APIのGraphQLサーバー、GraphQLクライアント、から構成される。

従来のRESTful-APIを使用した場合、バックエンドのエンドポイントが増えるたびに、フロントエンドが指定すべきエンドポイントも増えていく。

一方で、GraphQL-APIを使用した場合、単一のエンドポイントをGraphQLで指定すれば、GraphQL-APIが適切な宛先にルーティングしてくれる。

graphql-api


GraphQLサーバー

▼ スキーマ

GraphQL-APIが受信するCRUDのデータ型や必須データを定義したもの。受信したデータのバリデーションに使用する。


GraphQLクライアント

▼ クエリ

GraphQL-APIに送信するCRUDの実際のデータを定義したもの。


02. CRUD

Query

▼ スキーマ (サーバー側)

*例*

ここでは、Query処理を受信するためのスキーマを定義したとする。

# ルート型
type Query {
  user: User!
}

# User型
type User {
  id: ID!
  name: String!
  email: String!
}

▼ クエリ (クライアント側)

データ読出のクエリを定義する。

*例*

ここでは、前述のQuery処理のスキーマで定義した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

▼ スキーマ (サーバー側)

*例*

ここでは、Mutation処理を受信するためのスキーマを定義したとする。

# ルート型
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処理のスキーマで定義した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",
    }
  }
}