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.9k
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
ローコードSaaSのUXを向上させるためのTypeScript
taro28
2
870
Sequenceを理解する
taro28
1
230
propsのバケツリレー対策でGlobal_Stateを使うその前に
taro28
11
4.4k
状態ってなに?🙃
taro28
2
520
ReactのSuspenseを使った非同期処理のエラーハンドリング
taro28
9
6.8k
一口目から美味しいReactのスルメ本🦑
taro28
3
1.4k
T-falってすごい【社内LT】
taro28
1
280
Reactは何を提供するLibraryなのか?
taro28
7
1.5k
Other Decks in Technology
See All in Technology
ユーザーストーリーマッピングから始めるアジャイルチームと並走するQA / Starting QA with User Story Mapping
katawara
0
210
運用しているアプリケーションのDBのリプレイスをやってみた
miura55
1
740
地方拠点で エンジニアリングマネージャーってできるの? 〜地方という制約を楽しむオーナーシップとコミュニティ作り〜
1coin
1
230
【Developers Summit 2025】プロダクトエンジニアから学ぶ、 ユーザーにより高い価値を届ける技術
niwatakeru
2
1.4k
2025-02-21 ゆるSRE勉強会 Enhancing SRE Using AI
yoshiiryo1
1
380
(機械学習システムでも) SLO から始める信頼性構築 - ゆる SRE#9 2025/02/21
daigo0927
0
150
Larkご案内資料
customercloud
PRO
0
650
「海外登壇」という 選択肢を与えるために 〜Gophers EX
logica0419
0
710
ビジネスモデリング道場 目的と背景
masuda220
PRO
9
560
Developer Summit 2025 [14-D-1] Yuki Hattori
yuhattor
19
6.3k
分解して理解する Aspire
nenonaninu
1
300
エンジニアの育成を支える爆速フィードバック文化
sansantech
PRO
3
1.1k
Featured
See All Featured
Side Projects
sachag
452
42k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
960
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
Adopting Sorbet at Scale
ufuk
74
9.2k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Speed Design
sergeychernyshev
27
790
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
Building an army of robots
kneath
303
45k
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
ありがとうございました!