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
2.2k
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
Sequenceを理解する
taro28
1
180
propsのバケツリレー対策でGlobal_Stateを使うその前に
taro28
11
3.4k
状態ってなに?🙃
taro28
1
420
ReactのSuspenseを使った非同期処理のエラーハンドリング
taro28
8
5.7k
一口目から美味しいReactのスルメ本🦑
taro28
3
1.3k
T-falってすごい【社内LT】
taro28
1
240
Reactは何を提供するLibraryなのか?
taro28
7
1.4k
Other Decks in Technology
See All in Technology
require(ESM)とECMAScript仕様
uhyo
3
820
エンジニアのキャリアをちょっと楽しくする3本の軸/Three Pillars to Make an Engineer's Career More Enjoyable
kwappa
0
2.8k
プロンプトエンジニアリングでがんばらない-Agentic Workflow へ-近藤憲児
kenjikondobai
4
990
推しは推せるときに推せ! プロダクトにフィードバックしていこう
nakasho
0
370
SIEMを用いて、セキュリティログ分析の可視化と分析を実現し、PDCAサイクルを回してみた
coconala_engineer
0
340
On Your Data を超えていく!
hirotomotaguchi
2
700
オーナーシップを持つ領域を明確にする
konifar
13
3.2k
LLM開発・活用の舞台裏@2024.04.25
yushin_n
3
770
今年のRubyKaigiはProfiler Year🤘
osyoyu
0
190
ChatworkのSRE部って実は 半分くらいPlatform Engineering部かもしれない
saramune
0
160
本当のAWS基礎
toru_kubota
0
540
MapLibreとAmazon Location Service
dayjournal
1
160
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
648
58k
Making Projects Easy
brettharned
108
5.5k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
227
16k
Six Lessons from altMBA
skipperchong
21
3k
Happy Clients
brianwarren
92
6.4k
Practical Orchestrator
shlominoach
182
9.7k
YesSQL, Process and Tooling at Scale
rocio
164
13k
Building a Scalable Design System with Sketch
lauravandoore
456
32k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
187
16k
Visualization
eitanlees
136
14k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
19
1.7k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
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
ありがとうございました!