GraphQLのクライアントサイド実装

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

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

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

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

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

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

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

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

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

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

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