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

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

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

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

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

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

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

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

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

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