GraphQL は、API向けのクエリ言語であり、既存のアプリケーションデータを用いてクエリを実行するためのランタイムです。
クエリ (Queries)
基本クエリとJSONレスポンス
{ status }
JSON Response:
{
"data": {
"status": "available"
}
}
ネストされたオブジェクト
{
hero {
name
height
}
}
リスト (配列)
{
friends {
name
}
}
引数 (Arguments)
{
hero(id: "1000") {
id
name
}
}
エイリアス (Aliases)
{
luke: hero(id: "1000") {
name
}
han: hero(id: "1001") {
name
}
}
オペレーション名と変数 (Variables)
Query Definition:
query FindHero($id: String!) {
hero(id: $id) {
name
}
}
Variables Payload (JSON):
{
"id": "1000"
}
ミューテーション (Mutations)
mutation CreateReviewForEpisode($ep: Episode!, $review: ReviewInput!) {
createReview(episode: $ep, review: $review) {
stars
commentary
}
}
インラインフラグメント (Inline Fragments)
{
search(q: "john") {
id
... on User {
name
}
... on Comment {
body
author {
name
}
}
}
}
HTTP経由でのリクエスト
GET リクエスト
fetch('https://api.example.com/graphql?query={me{name}}')
POST リクエスト
fetch('https://api.example.com/graphql', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
query: 'query GetHero($id: String!) { hero(id: $id) { name } }',
variables: { id: '1000' }
})
})
スキーマ定義言語 (SDL)
基本型
type Query {
me: User
users(limit: Int): [User]
}
type User {
id: ID!
name: String
}
組み込みスカラー型
| スカラー型 | 説明 |
|---|---|
Int |
符号付き32ビット整数 |
Float |
符号付き倍精度浮動小数点数 |
String |
UTF-8文字列 |
Boolean |
真偽値 (true または false) |
ID |
文字列としてシリアライズされる一意識別子 |
型定義キーワード
| キーワード | 説明 |
|---|---|
type |
複数のフィールドを持つオブジェクト型 |
scalar |
カスタムのプリミティブスカラー型 |
interface |
実装型が満たすべきフィールドを定義する抽象型 |
union |
複数の異なるオブジェクト型をグループ化する抽象型 |
enum |
許可された離散文字列値の列挙型 |
input |
クエリやミューテーションの引数として渡す複合オブジェクト型 |
型修飾子 (Type Modifiers)
| 修飾子 | 説明 |
|---|---|
String |
nullを許容する文字列 |
String! |
null非許容の必須文字列 |
[String] |
null許容の文字列を含むnull許容リスト |
[String]! |
null許容の文字列を含む必須リスト |
[String!]! |
null非許容文字列を含む必須リスト |
インターフェース (Interfaces)
interface Entity {
id: ID!
}
type User implements Entity {
id: ID!
name: String
}
列挙型 (Enums)
enum Direction {
NORTH
EAST
SOUTH
WEST
}
ユニオン型 (Unions)
union SearchResult = Human | Droid | Starship
type Query {
search(text: String): [SearchResult]
}