WebDINO Japan エンジニア +渡邉浩平
サーバーへの問い合わせ (Query)
{ + pokemon(name: "Pikachu") { + classification + } +} +
サーバーからの応答 (Response, JSON形式)
{ + "data": { + "pokemon": { + "classification": "Mouse Pokémon" + } + } +} +
https://graphql-pokemon2.vercel.app
GraphQLとはAPIのクエリ言語
:::info +GraphQL以外の身近な言語の例:
オープンソースな仕様になっており、自由に貢献可能
効率的なデータ読み込み
オーバーフェッチを最小限に抑え、サーバーへのラウンドトリップを少なくする +FacebookがGraphQLを開発した理由は、モバイルネイティブアプリへの移行のため +スマホの普及に伴う低速、省電力なデバイスの利用の増加が背景
REST
https://www.howtographql.com/basics/1-graphql-is-the-better-rest/
GraphQL
GET /users/<id>
GET /users/<id>/posts
GET /users/<id>/followers
GET /?query={user(id:<id>){name,posts{title},followers(last:<count>){name}}}
さまざまなフロントエンド環境のサポート
単一APIの構築と正確なデータ構造の維持 +クライアントアプリケーションを実行するフロントエンドフレームワークとプラットフォームの多様化が背景
"""ポケモンを表します""" +type Pokemon { + """このオブジェクトのID""" + id: ID! + + """このポケモンの全国図鑑No.""" + number: String + + """このポケモンの名前""" + name: String + + """このポケモンの重さの最大と最小""" + weight: PokemonDimension + + """このポケモンの高さの最大と最小""" + height: PokemonDimension + + """このポケモンの分類""" + classification: String + + # ... +} +
特定のプログラミング言語に依存しないGraphQLスキーマ言語
"""ポケモンを表します""" +type Pokemon { +} + +"""ポケモンの寸法を表します""" +type PokemonDimension { +} +
オブジェクトの種類
"""ポケモンを表します""" +type Pokemon { + """このオブジェクトのID""" + id: ID! + + """このポケモンの名前""" + name: String + + """このポケモンの分類""" + classification: String + + """このポケモンの高さの最大と最小""" + height: PokemonDimension +} +
オブジェクトに含まれるフィールド
// JavaScript +const pokemonQuery = `{ + pokemon(name: "Pikachu") { + classification + } +}`; + +fetch(`http://example/?${new URLSearchParams({ query: pokemonQuery })}`) + .then(r => r.json()) + .then(({ data }) => console.log(data?.pokemon?.classification)); +// => "Mouse Pokémon" +
// Kotlin +val response = apolloClient.query(pokemonQuery).await() +Log.d(response?.data?.pokemon?.classification) +
// Swift +apollo.fetch(query: pokemonQuery) { result in + guard let data = try? result.get().data else { return } + print(data.pokemon?.classification) +} +
https://www.apollographql.com
短期間での開発
クライアントアプリケーションの設計変更に対応するためのツールが提供されている +継続的デプロイ (CD) が背景
IDE
GraphiQL, GraphQL Playground, etc.
コードの生成
$ graphql-codegen +
使う
import { usePokemonQuery } from "./generated"; + +export default () => { + const { data } = usePokemonQuery(); + return data?.pokemon?.classification; +}; +
GraphQL Code Generator +React, Vue, Kotlin, etc.
https://spec.graphql.org/June2018/#sec-JSON-Serialization
セキュリティの懸念事項は一般的なWebサービスと同様に存在
GraphQL仕様に含まないので一般的なWebの認証・認可の設計と同様に行う
HTTP GETメソッドによる一般的なHTTP キャッシュに加え、GraphQLではグローバルなオブジェクトの識別子の宣言によるキャッシュが存在
digraph { +apps[shape=diamond,label="モバイルアプリ?"] +apps->GraphQL[label=Yes] +apps->REST[label=No] +{rank=same;apps;GraphQL} +} +