Open8
【GraphQLクライアント】FragmentでのSuspense対応
Masaharu HoriデータをGraphQLサーバから取得している際、
スピナーやスケルトンの表示を行いたい。
現在開発しているプロジェクトでは、Fragment Colocationを採用しており、
各コンポーネントでFragmentを定義し、
ページでそれらを束ねたQueryを作成してリクエストしている。
ページ (Query) でサスペンドさせると、
画面全体がローディング状態になってしまい、体験が良くない。
できれば、必要な箇所だけローディング状態にしたい。
FragmentのコンポーネントをSuspenseで囲むことができたら、きれいに実装ができそう。
各クライアントのFragmentにおける、Suspense対応を見ていく。
Masaharu Horiまずは、今のプロジェクトでも導入しているApollo Client
Masaharu Horiロードマップで、今後の対応となっていた
Introduce a suspenseful useFragment that will suspend when the data is not yet loaded
Masaharu HoriApollo Clientの対応状況を調べる中で面白いものを見つけた
公演用のプルリクエストに、useSuspenseFragmentなるものが！
どこかで、今後について話すのかな？めっちゃ聞きたい😳
Masaharu Hori続いて、Relay
Masaharu Horiドキュメントを見る感じ、対応していそう
The component will suspend if any data for that specific fragment is missing, and the data is currently being fetched by a parent query.
Masaharu Horiちょっと脱線するけど、参考資料
Masaharu Hori続いて、urql