GraphQLをServer Componentsで使いたい

BARフロントえんどう #1 「フロントエンドリアーキテクト」で使用した資料です！
https://cybozu.connpass.com/event/297123/

Transcript

1. GraphQLを Server Componentsで使いたい BARフロントえんどう #1 2023.10.31 Ohnishi Taro(@taroro_tarotaro)
2. 自己紹介 • 大西太郎( @taroro_tarotaro) • ベースマキナで管理画面のローコードSaaSを作ってます • もうすぐエンジニア4年目に突入します🚀 • GraphQL歴は半年弱くらい • Next.js, Apollo Client, Go, gqlgen, Tailwind CSS, etc.
3. はじめに
4. はじめに 今後のリアーキテクチャでRSC(React Server Components)の考慮は必須… • RSCを使うならできるだけSC(Server Components)に寄せたい • SCの強みを活かしながらGraphQLを使えるか…？
5. GraphQLとは
6. GraphQLとは • グラフ構造に従ってclientでフィールドを指定してデータ取得ができる
7. GraphQLとは • グラフ構造に従ってclientでフィールドを指定してデータ取得ができる
8. GraphQLとは • グラフ構造に従ってclientでフィールドを指定してデータ取得ができる • 1リクエストでまとめて取得する ◦ WaterFall問題への解決策の1つ ▪ fetch→render→fetch→render … • ※パフォーマンス以外にも良さはたくさんあるが省略… https://www.developerway.com/posts/how-to-fetch-data-in-react
9. GraphQLのよくある使い方 • 1クエリ/ページが理想 • 各コンポーネントで必要な値（Fragment）を宣言してルートで一括取得する • 取った値はpropsかcontextで渡す
10. SCでGraphQLを使う
11. SCでGraphQLを使う SC(Server Components) • Async Componentでのシンプルなデータ取得 • DBに近い分、各Componentで取得してもWaterfallが気にならない • Suspenseでのローディングとストリーミング
12. SCでGraphQLを使う SC(Server Components) × GraphQL • Async Componentでのシンプルなデータ取得 ◦ 取得はできる（Apolloなどの対応も進められている） • DBに近い分、各Componentで取得してもWaterfallが気にならない ◦ 1クエリ/ページなのでWaterfallにならないのは同様 • Suspenseでのローディングとストリーミング
13. SCでGraphQLを使う SC(Server Components) × GraphQL • Async Componentでのシンプルなデータ取得 ◦ 取得はできる（Apolloなどの対応も進められている） • DBに近い分、各Componentで取得してもWaterfallが気にならない ◦ 1クエリ/ページなのでWaterfallにならないのは同様 • Suspenseでのローディングとストリーミング ◦ 1クエリ/ページなので全体がローディングされてしまう ◦ 1クエリだからストリーミングは無理…？
14. SCでGraphQLを使う SC(Server Components) × GraphQL • Async Componentでのシンプルなデータ取得 ◦ 取得はできる（Apolloなどの対応も進められている） • DBに近い分、各Componentで取得してもWaterfallが気にならない ◦ 1クエリ/ページなのでWaterfallにならないのは同様 • Suspenseでのローディングとストリーミング ◦ 1クエリ/ページなので全体がローディングされてしまう ◦ 1クエリだからストリーミングは無理…？ ◦ defer directive
15. defer directive GraphQL responseの一部を、clientで指定して遅延(defer)できる
16. defer directive GraphQL responseの一部を、clientで指定して遅延(defer)できる →@defer × SCで組み合わせられるか試す
17. GraphQL @defer × SC SCはpromiseを渡せばSuspenseでローディングできる
18. GraphQL @defer × SC SCはpromiseを渡せばSuspenseでローディングできる →@deferで分割したチャンクのpromiseをSCに渡す
19. GraphQL @defer × SC SCはpromiseを渡せばSuspenseでローディングできる →@deferで分割したチャンクのpromiseをSCに渡す 1. queryが呼ばれる 2. 各チャンクのpromiseを作る 3. promiseを各コンポーネントに渡す 4. 各チャンクが返ってきたらpromiseをresolveする
20. GraphQL @defer × SC SCはpromiseを渡せばSuspenseでローディングできる →@deferで分割したチャンクのpromiseをSCに渡す 1. queryが呼ばれる 2. 各チャンクのpromiseを作る 3. promiseを各コンポーネントに渡す 4. 各チャンクが返ってきたらpromiseをresolveする
21. GraphQL @defer × SC SCはpromiseを渡せばSuspenseでローディングできる →@deferで分割したチャンクのpromiseをSCに渡す 1. queryが呼ばれる 2. 各チャンクのpromiseを作る 3. promiseを各コンポーネントに渡す 4. 各チャンクが返ってきたらpromiseをresolveする
22. GraphQL @defer × SC SCはpromiseを渡せばSuspenseでローディングできる →@deferで分割したチャンクのpromiseをSCに渡す 1. queryが呼ばれる 2. 各チャンクのpromiseを作る 3. promiseを各コンポーネントに渡す 4. 各チャンクが返ってきたらpromiseをresolveする
23. GraphQL @defer × SC SCはpromiseを渡せばSuspenseでローディングできる →@deferで分割したチャンクのpromiseをSCに渡す 1. queryが呼ばれる 2. 各チャンクのpromiseを作る 3. promiseを各コンポーネントに渡す 4. 各チャンクが返ってきたらpromiseをresolveする
24. GraphQL @defer × SC promiseをどうやって渡すか…？
25. GraphQL @defer × SC promiseをどうやって渡すか…？ props（Promise型のprops…？）, context（SCにはない）, ...
26. GraphQL @defer × SC promiseをどうやって渡すか…？ props（Promise型のprops…？）, context（SCにはない）, ... →クラスのインスタンスでpromiseをキャッシュする
27. GraphQL @defer × SC promiseをどうやって渡すか…？ props（Promise型のprops…？）, context（SCにはない）, ... →クラスのインスタンスでpromiseをキャッシュする • React.cacheでリクエスト単位にできる https://zenn.dev/cybozu_frontend/articles/react-cache-and-nextjs
28. GraphQL @defer × SC promiseをどうやって渡すか…？ props（Promise型のprops…？）, context（SCにはない）, ... →クラスのインスタンスでpromiseをキャッシュする • React.cacheでリクエスト単位にできる https://github.com/apollographql/apollo-client-nextjs/blob/main/package/src/rsc/registerApolloClient.tsx#L6-L11
29. 出来上がったもの（アプリケーションコードのみ） deferするかどうかは親が決めて子は知らなくて良いのも嬉しい
31. まとめ
32. まとめ • 素朴にSCでGraphQLを使うとSuspenseでのストリーミングが活かせない • defer directiveとpromiseのキャッシュでまるでComponent単位のfetchに…！
33. まとめ • 素朴にSCでGraphQLを使うとSuspenseでのストリーミングが活かせない • defer directiveとpromiseのキャッシュでまるでComponent単位のfetchに…！ すぐ使えるか…？ • 今回試した方法は、あくまで僕が雑に作ったサンプル • @deferなしならApollo Clientで取得可能 • SC, @defer, Suspenseに対応したGraphQLクライアントはまだない…？ • @deferに対応したGraphQLサーバーも少ない…
34. まとめ • 素朴にSCでGraphQLを使うとSuspenseでのストリーミングが活かせない • defer directiveとpromiseのキャッシュでまるでComponent単位のfetchに…！ まだ難しいところはいろいろ…（ぜひ懇親会でお話ししたいです󰢧） • revalidate • CCでのデータ取得 • SSRからのhydration
35. ありがとうございました！