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} -} -