ent.について
クライアントサイド実装編
1/9

前回までのあらすじ
・ent.を用いてGraphQLサーバーを立てた
クライアント リゾルバ ORM(ent.) DB
実装完了
これから実装
2/9

3/9
GraphQLクライアントライブラリ
・Apollo Client
・Relay
・Urql
最も使われているクライアントライブラリ。
機能が充実しているが、複雑な設定を行う必要がある。
GraphQLを利用し、リモートとローカルの状態管理ができる
高度な機能を多数そろえたライブラリ。
複雑な実装が必要だが、使いこなせば非常に便利。
軽量かつ多数の機能を持つライブラリ。
シンプルな記述で実装ができる。
Document cachingという独自のキャッシュ機構を持つ

4/9
GraphQLクライアントライブラリ比較
urql Apollo Relay

クライアントインスタンス作成時、
"Exchange"による拡張設定により、通信時の設定などを行う
5/9
Urqlによるクライアントサイド実装
このインスタンスを通信処理に渡してデータ通信を行う

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

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

GraphQLサーバーから受け取ったデータを画面上に表示した
8/9
取得したデータの画面表示
画像
タイトル
アバター&名前
いいね
コメント

9/9
まとめ & 次回予告
・GraphQLのクライアントライブラリは様々な種類がある
・graphql-codegenを使用して、フックを自動で作成できる
・ユーザー体験をより良くするために…
Apollo ClientやRelay、Urqlなどのライブラリを、
ユースケースに合わせて検討する
自動作成されたフックを使い、データフェッチ処理を
手軽に行うことができる
より高速なサイト実現のため、キャッシュ管理やSSRなどを
効率よく行うライブラリの模索を続行