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
3.1k
ローコードサービスの進化のためのモノレポ移行
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
extension 現場で使えるXcodeショートカット一覧
ktombow
0
210
業務自動化プラットフォーム Google Agentspace に入門してみる #devio2025
maroon1st
0
190
about #74462 go/token#FileSet
tomtwinkle
1
290
BirdCLEF+2025 Noir 5位解法紹介
myso
0
190
バイブコーディングと継続的デプロイメント
nwiizo
2
410
[2025-09-30] Databricks Genie を利用した分析基盤とデータモデリングの IVRy の現在地
wxyzzz
0
470
Why Governance Matters: The Key to Reducing Risk Without Slowing Down
sarahjwells
0
100
LLMアプリケーション開発におけるセキュリティリスクと対策 / LLM Application Security
flatt_security
7
1.8k
Goに育てられ開発者向けセキュリティ事業を立ち上げた僕が今向き合う、AI × セキュリティの最前線 / Go Conference 2025
flatt_security
0
350
o11yで育てる、強い内製開発組織
_awache
3
120
Where will it converge?
ibknadedeji
0
180
Findy Team+のSOC2取得までの道のり
rvirus0817
0
330
Featured
See All Featured
Side Projects
sachag
455
43k
Writing Fast Ruby
sferik
629
62k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
2.6k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
54
3k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
BBQ
matthewcrist
89
9.8k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Done Done
chrislema
185
16k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
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
ありがとうございました!