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
テーブルが200以上あるSaaSでRSCとGraphQLを併用する理由
Search
msickpaler
December 11, 2024
Technology
2
1.6k
テーブルが200以上あるSaaSでRSCとGraphQLを併用する理由
msickpaler
December 11, 2024
Tweet
Share
Other Decks in Technology
See All in Technology
Oracle Cloud Infrastructure:2025年6月度サービス・アップデート
oracle4engineer
PRO
2
260
PostgreSQL 18 cancel request key長の変更とRailsへの関連
yahonda
0
120
生成AIで小説を書くためにプロンプトの制約や原則について学ぶ / prompt-engineering-for-ai-fiction
nwiizo
4
2.2k
Observability infrastructure behind the trillion-messages scale Kafka platform
lycorptech_jp
PRO
0
140
2年でここまで成長!AWSで育てたAI Slack botの軌跡
iwamot
PRO
4
740
SalesforceArchitectGroupOsaka#20_CNX'25_Report
atomica7sei
0
190
ひとり情シスなCTOがLLMと始めるオペレーション最適化 / CTO's LLM-Powered Ops
yamitzky
0
440
「Chatwork」の認証基盤の移行とログ活用によるプロダクト改善
kubell_hr
1
190
【PHPカンファレンス 2025】PHPを愛するひとに伝えたい PHPとキャリアの話
tenshoku_draft
0
120
Understanding_Thread_Tuning_for_Inference_Servers_of_Deep_Models.pdf
lycorptech_jp
PRO
0
130
Clineを含めたAIエージェントを 大規模組織に導入し、投資対効果を考える / Introducing AI agents into your organization
i35_267
4
1.6k
フィンテック養成勉強会#54
finengine
0
180
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
Designing Experiences People Love
moore
142
24k
Code Reviewing Like a Champion
maltzj
524
40k
Done Done
chrislema
184
16k
Building Applications with DynamoDB
mza
95
6.5k
Producing Creativity
orderedlist
PRO
346
40k
The Invisible Side of Design
smashingmag
300
51k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Transcript
テーブルが200 以上あるSaaS で RSC とGraphQL を併用する理由 by ficilcom 株式会社 msickpaler
自己紹介 現在のポジション ficilcom 株式会社 フロントエンドエンジニア 経歴 フロントエンドエンジニア歴4 年 App Router
をstable release から使っている TypeScript の記事多め 個人開発はRemix
アジェンダ 1. プロダクト紹介 NeX-Ray 2. RSC とGraphQL のおさらい 3. RSC
とGraphQL の併用理由 4. まとめ
NeX-Ray とは あらゆるWeb データをひとつに いろんなメディア情報を一元管理 マーケティングミックスモデリング SaaS での価格モデル ワンクリックでレポート可視化 戦略的なマーケティングを支援
NeX-Ray で頻出する画面
アーキテクチャ
フロントエンドのテックスタック フレームワーク: Next.js(App Router) データフェッチ: GraphQL, Apollo Client RSC とGraphQL
を併用している
前提知識
RSC とは? サーバーで実行されるreact コンポーネント 主な特徴 サーバー側で動作するので同じネットワークやデータセンターでは高速通信できる 一度しかレンダリングされないのでパフォーマンスが良い GraphQL とは? クエリ言語の一種で、必要なデータを1
回のリクエストで取得できる 主な特徴 一度で必要なデータを取得できる 一度GraphQL のスキーマを作ってしまえば、API の変更無しでフロントエンド側で取得するデータを選べる
NeX-Ray の例を紹介していく
NeX-Ray の技術的課題 初期リリース時にテーブル数200 超え(今後も増え続ける) メンテが大変 BtoB SaaS なので会社ごとのセキュリティ担保や権限管理が必要 テナント分離 権限管理
膨大なテーブルのカラム数 MAX 300 カラム超えのテーブルもある
GraphQL の採用理由 スタートアップで200 テーブルを素直に扱うのはメンテコストが高すぎる BtoB SaaS ではテナント分離が重要なのでRLS が必須 カラムの取捨選択をしないと300 カラムすべてを取得することになる
RLS(Row-Level Security) を利用しながらDB スキーマから自動的にGraphQL のAPI を生成できるPostGraphile は 唯一無二の選択肢だった つまりGraphQL の利用はサーバーサイド都合で不可欠だった。 よって、GraphQL 採用は確定
PostGraphile の例 const app = express(); app.use(postgraphile(DATABASE_URL, schemaName)); app.listen(4000);
PostGraphile のデメリット 自動生成故に間にロジックを差し込みにくい NeX-Ray の場合だと、権限やサブスクリプション情報などで条件分岐する場合に実装が面倒くさい
RSC の採用理由 NeX-Ray での活用方法 権限管理ロジック 連携している媒体のアカウントごとのview / edit / admin
権限の制御 組織のグループやユーザーごとのview / edit / admin 権限の制御 サブスクリプションごとの権限の制御 メトリクスの計算ロジック 期間ごとに見たいデータを表示する クリック率, コンバージョン率, インプレッション単価, 成約単価, クリック単価, 予算達成率 …etc. 権限管理をRSC で実行することでPostGraphile のデメリットを補っている
まとめ: RSC とGraphQL の併用した結果 GraphQL(PostGraphile) RLS によるテナント管理のセキュリティ担保 自動生成されたAPI エンドポイント 広告モデルとの相性の良さ
RSC 権限管理をサーバーサイドで行うことでセキュリティ向上 計算をサーバーサイドで行うことでパフォーマンス向上 Nex-Ray では、GraphQL とRSC を適材適所に活用し、併用することで快適な開発 環境を実現できている