Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
GraphQLをServer Componentsで使いたい
Search
taro
October 31, 2023
Technology
8
3.1k
GraphQLをServer Componentsで使いたい
BARフロントえんどう #1 「フロントエンドリアーキテクト」で使用した資料です!
https://cybozu.connpass.com/event/297123/
taro
October 31, 2023
Tweet
Share
More Decks by taro
See All by taro
VitestのIn-Source Testingが便利
taro28
10
3k
ローコードサービスの進化のためのモノレポ移行
taro28
2
480
ローコードSaaSのUXを向上させるためのTypeScript
taro28
2
1.1k
Sequenceを理解する
taro28
1
280
propsのバケツリレー対策でGlobal_Stateを使うその前に
taro28
12
4.8k
状態ってなに?🙃
taro28
2
560
ReactのSuspenseを使った非同期処理のエラーハンドリング
taro28
9
7.2k
一口目から美味しいReactのスルメ本🦑
taro28
3
1.5k
T-falってすごい【社内LT】
taro28
1
330
Other Decks in Technology
See All in Technology
現場で効くClaude Code ─ 最新動向と企業導入
takaakikakei
1
260
Apache Spark もくもく会
taka_aki
0
140
Django's GeneratedField by example - DjangoCon US 2025
pauloxnet
0
160
20250910_障害注入から効率的復旧へ_カオスエンジニアリング_生成AIで考えるAWS障害対応.pdf
sh_fk2
3
280
roppongirb_20250911
igaiga
1
250
「全員プロダクトマネージャー」を実現する、Cursorによる仕様検討の自動運転
applism118
22
12k
Snowflake Intelligence × Document AIで“使いにくいデータ”を“使えるデータ”に
kevinrobot34
1
120
5分でカオスエンジニアリングを分かった気になろう
pandayumi
0
260
AIがコード書きすぎ問題にはAIで立ち向かえ
jyoshise
1
110
EncryptedSharedPreferences が deprecated になっちゃった!どうしよう! / Oh no! EncryptedSharedPreferences has been deprecated! What should I do?
yanzm
0
490
Autonomous Database - Dedicated 技術詳細 / adb-d_technical_detail_jp
oracle4engineer
PRO
4
10k
Webアプリケーションにオブザーバビリティを実装するRust入門ガイド
nwiizo
7
890
Featured
See All Featured
The Language of Interfaces
destraynor
161
25k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Side Projects
sachag
455
43k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Embracing the Ebb and Flow
colly
87
4.8k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Transcript
GraphQLを Server Componentsで使いたい BARフロントえんどう #1 2023.10.31 Ohnishi Taro(@taroro_tarotaro)
自己紹介 • 大西太郎( @taroro_tarotaro) • ベースマキナで管理画面のローコードSaaSを作ってます • もうすぐエンジニア4年目に突入します🚀 • GraphQL歴は半年弱くらい
• Next.js, Apollo Client, Go, gqlgen, Tailwind CSS, etc.
はじめに
はじめに 今後のリアーキテクチャでRSC(React Server Components)の考慮は必須… • RSCを使うならできるだけSC(Server Components)に寄せたい • SCの強みを活かしながらGraphQLを使えるか…?
GraphQLとは
GraphQLとは • グラフ構造に従ってclientでフィールドを指定してデータ取得ができる
GraphQLとは • グラフ構造に従ってclientでフィールドを指定してデータ取得ができる
GraphQLとは • グラフ構造に従ってclientでフィールドを指定してデータ取得ができる • 1リクエストでまとめて取得する ◦ WaterFall問題への解決策の1つ ▪ fetch→render→fetch→render …
• ※パフォーマンス以外にも良さはたくさんあるが省略… https://www.developerway.com/posts/how-to-fetch-data-in-react
GraphQLのよくある使い方 • 1クエリ/ページが理想 • 各コンポーネントで必要な値(Fragment)を宣言してルートで一括取得する • 取った値はpropsかcontextで渡す
SCでGraphQLを使う
SCでGraphQLを使う SC(Server Components) • Async Componentでのシンプルなデータ取得 • DBに近い分、各Componentで取得してもWaterfallが気にならない • Suspenseでのローディングとストリーミング
SCでGraphQLを使う SC(Server Components) × GraphQL • Async Componentでのシンプルなデータ取得 ◦ 取得はできる(Apolloなどの対応も進められている)
• DBに近い分、各Componentで取得してもWaterfallが気にならない ◦ 1クエリ/ページなのでWaterfallにならないのは同様 • Suspenseでのローディングとストリーミング
SCでGraphQLを使う SC(Server Components) × GraphQL • Async Componentでのシンプルなデータ取得 ◦ 取得はできる(Apolloなどの対応も進められている)
• DBに近い分、各Componentで取得してもWaterfallが気にならない ◦ 1クエリ/ページなのでWaterfallにならないのは同様 • Suspenseでのローディングとストリーミング ◦ 1クエリ/ページなので全体がローディングされてしまう ◦ 1クエリだからストリーミングは無理…?
SCでGraphQLを使う SC(Server Components) × GraphQL • Async Componentでのシンプルなデータ取得 ◦ 取得はできる(Apolloなどの対応も進められている)
• DBに近い分、各Componentで取得してもWaterfallが気にならない ◦ 1クエリ/ページなのでWaterfallにならないのは同様 • Suspenseでのローディングとストリーミング ◦ 1クエリ/ページなので全体がローディングされてしまう ◦ 1クエリだからストリーミングは無理…? ◦ defer directive
defer directive GraphQL responseの一部を、clientで指定して遅延(defer)できる
defer directive GraphQL responseの一部を、clientで指定して遅延(defer)できる →@defer × SCで組み合わせられるか試す
GraphQL @defer × SC SCはpromiseを渡せばSuspenseでローディングできる
GraphQL @defer × SC SCはpromiseを渡せばSuspenseでローディングできる →@deferで分割したチャンクのpromiseをSCに渡す
GraphQL @defer × SC SCはpromiseを渡せばSuspenseでローディングできる →@deferで分割したチャンクのpromiseをSCに渡す 1. queryが呼ばれる 2. 各チャンクのpromiseを作る
3. promiseを各コンポーネントに渡す 4. 各チャンクが返ってきたらpromiseをresolveする
GraphQL @defer × SC SCはpromiseを渡せばSuspenseでローディングできる →@deferで分割したチャンクのpromiseをSCに渡す 1. queryが呼ばれる 2. 各チャンクのpromiseを作る
3. promiseを各コンポーネントに渡す 4. 各チャンクが返ってきたらpromiseをresolveする
GraphQL @defer × SC SCはpromiseを渡せばSuspenseでローディングできる →@deferで分割したチャンクのpromiseをSCに渡す 1. queryが呼ばれる 2. 各チャンクのpromiseを作る
3. promiseを各コンポーネントに渡す 4. 各チャンクが返ってきたらpromiseをresolveする
GraphQL @defer × SC SCはpromiseを渡せばSuspenseでローディングできる →@deferで分割したチャンクのpromiseをSCに渡す 1. queryが呼ばれる 2. 各チャンクのpromiseを作る
3. promiseを各コンポーネントに渡す 4. 各チャンクが返ってきたらpromiseをresolveする
GraphQL @defer × SC SCはpromiseを渡せばSuspenseでローディングできる →@deferで分割したチャンクのpromiseをSCに渡す 1. queryが呼ばれる 2. 各チャンクのpromiseを作る
3. promiseを各コンポーネントに渡す 4. 各チャンクが返ってきたらpromiseをresolveする
GraphQL @defer × SC promiseをどうやって渡すか…?
GraphQL @defer × SC promiseをどうやって渡すか…? props(Promise型のprops…?), context(SCにはない), ...
GraphQL @defer × SC promiseをどうやって渡すか…? props(Promise型のprops…?), context(SCにはない), ... →クラスのインスタンスでpromiseをキャッシュする
GraphQL @defer × SC promiseをどうやって渡すか…? props(Promise型のprops…?), context(SCにはない), ... →クラスのインスタンスでpromiseをキャッシュする •
React.cacheでリクエスト単位にできる https://zenn.dev/cybozu_frontend/articles/react-cache-and-nextjs
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
出来上がったもの(アプリケーションコードのみ) deferするかどうかは親が決めて子は知らなくて良いのも嬉しい
None
まとめ
まとめ • 素朴にSCでGraphQLを使うとSuspenseでのストリーミングが活かせない • defer directiveとpromiseのキャッシュでまるでComponent単位のfetchに…!
まとめ • 素朴にSCでGraphQLを使うとSuspenseでのストリーミングが活かせない • defer directiveとpromiseのキャッシュでまるでComponent単位のfetchに…! すぐ使えるか…? • 今回試した方法は、あくまで僕が雑に作ったサンプル •
@deferなしならApollo Clientで取得可能 • SC, @defer, Suspenseに対応したGraphQLクライアントはまだない…? • @deferに対応したGraphQLサーバーも少ない…
まとめ • 素朴にSCでGraphQLを使うとSuspenseでのストリーミングが活かせない • defer directiveとpromiseのキャッシュでまるでComponent単位のfetchに…! まだ難しいところはいろいろ…(ぜひ懇親会でお話ししたいです) • revalidate •
CCでのデータ取得 • SSRからのhydration
ありがとうございました!