GraphQLのクライアントサイド実装
その①
1/11

自己紹介
名前：高野 且次(タカノ カツシ)
誕生日：1993/5/6 (現在29歳)
職業：株式会社マーケライズ/開発チーム所属
WEBエンジニア2年目
趣味：一人旅、温泉、水泳、ロードバイクなど
使用言語：PHP Python TypeScript
2/11

今回発表すること
・GraphQLとは？
今回は割愛すること
・GraphQLのサーバーサイド実装
・GraphQLクライアントサイドライブラリ「Urql」
・GraphQLクエリ自動型付けツール「graphql-codegen」
・コード/画面の設計・デザインについて
3/11

クライアント バックエンド
リクエスト
レスポンス
クライアント側のクエリ言語
から
リクエストを作成して送信す
る
受け取ったリクエストとスキーマ言語
より
レスポンスを作成して送信する
柔軟かつ効率的なデータ通信を行うための、比較的新しいAPI向けクエリ言
語
欲しいデータのみが
JSON型で返される
GraphQLとは？
4/11

Webサイトで見るGraphQL①
GraphQLのリクエストとレスポンスを実際に見るため、仮想SNS
を構築
5/11

Webサイトで見るGraphQL②
この投稿一覧は、様々なデータの集まりから成り立っ
ている
id
Post
img
title
account
name
accoun
t
avata
r
lik
e
account
comment
account
GraphQLなら一回のリクエストで必要な情報のみ取得で
6/11

Webサイトで見るGraphQL③
リクエストは1回の
み
全ての投稿データのレスポンス
レスポンスの中には、必要な情報だけ
が
入れ子で格納されている
7/11

GraphQLクライアントサイドライブラリ
「Urql」
GraphQLサーバーと通信するフックを作成できるライブラリ
・非常に賢いキャッシュ機能・Document Caching機能を持つ
・"Exchange"による拡張設定により、SSRなど様々な要件に対応で
きる
作成されたフック
8/11
通信の設定を行う部分

graphql-codegenによるフック自動作成・型
付け
GraphQLサーバーとクエリを用意すれ
ば、
自動でUrqlフックを作成してくれ、
関数と結果の型付けも行ってくれる
データを取得するフック
の型
取得したデータの
型
9/11

取得したデータを画面に表示する
取得したデータをmap関数
で
Postコンポーネントに引き
渡す
・
・
・
投稿者の名前
「いいね」した人数
コメントの数
渡されたデータから値を取り
出す
10/11

まとめ
・GraphQLはRESTに比べ、より柔軟で効率的に
データ通信を行うことができる
・Urqlによって、モダンなフロントエンド実装に適応すること
ができる
・GraphQLサーバーとクエリを用意すれば、graphql-codegenによ
り
一瞬で必要な型や関数を構築できる
11/11