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
20240418_Google ColabにLLMが搭載されたようなのでPython x データ分析の勉強方法を考えてみる
doradora09
0
150
いつか使うかも貯金してたらめちゃめちゃ機能が増えてた話
riyaamemiya
0
460
開発パフォーマンスを最大化するための開発体制
ham0215
2
470
The AI Revolution Will Not Be Monopolized: Behind the scenes
inesmontani
PRO
1
130
ワールドカフェI /チューターを改良する / World Café I and Improving the Tutors
ks91
PRO
0
140
競技としてのKaggle、役に立つKaggle
yu4u
6
2.1k
プロンプトエンジニアリングでがんばらない-Agentic Workflow へ-近藤憲児
kenjikondobai
4
1.1k
R3のコードから見る実践LINQ実装最適化・コンカレントプログラミング実例
neuecc
3
1.2k
JAWS-UG Bedrock Claude Night
yamahiro
3
640
On Your Data を超えていく!
hirotomotaguchi
2
720
LangSmith入門―トレース/評価/プロンプト管理などを担うLLMアプリ開発プラットフォーム
os1ma
5
580
ServiceNow Knowledge 24の歩き方 EYストラテジー・アンド・コンサルティング
manarobot
0
210
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
25
4k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
358
22k
Embracing the Ebb and Flow
colly
80
4.2k
A Tale of Four Properties
chriscoyier
152
22k
Teambox: Starting and Learning
jrom
128
8.4k
Fireside Chat
paigeccino
22
2.6k
Building an army of robots
kneath
300
41k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Why Our Code Smells
bkeepers
PRO
331
56k
We Have a Design System, Now What?
morganepeng
44
6.8k
The Invisible Customer
myddelton
114
12k
Build The Right Thing And Hit Your Dates
maggiecrowley
25
2k
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
ありがとうございました!