867 Views
January 18, 24
スライド概要
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により 一瞬で必要な型や関数を構築できる