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
Next.js AppRouter × GraphQL 〜 夢見た理想と現実の課題 〜
Search
Hayato Yokoyama
November 12, 2024
Programming
0
140
Next.js AppRouter × GraphQL 〜 夢見た理想と現実の課題 〜
Hayato Yokoyama
November 12, 2024
Tweet
Share
More Decks by Hayato Yokoyama
See All by Hayato Yokoyama
実はすごいスピードで進化しているCSS
hayato_yokoyama
0
130
フロントエンドテストを書きやすくするために工夫したこと
hayato_yokoyama
1
78
Other Decks in Programming
See All in Programming
構文解析器入門
ydah
7
1.9k
Prompt Engineeringの再定義「Context Engineering」とは
htsuruo
0
110
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
3
290
新しいモバイルアプリ勉強会(仮)について
uetyo
1
200
JetBrainsのAI機能の紹介 #jjug
yusuke
0
110
Gemini CLI のはじめ方
ttnyt8701
1
110
0から始めるモジュラーモノリス-クリーンなモノリスを目指して
sushi0120
0
170
抽象化という思考のツール - 理解と活用 - / Abstraction-as-a-Tool-for-Thinking
shin1x1
1
860
ZeroETLで始めるDynamoDBとS3の連携
afooooil
0
130
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
4
1.4k
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
190
知って得する@cloudflare_vite-pluginのあれこれ
chimame
1
120
Featured
See All Featured
Embracing the Ebb and Flow
colly
86
4.8k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
The Cult of Friendly URLs
andyhume
79
6.5k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Practical Orchestrator
shlominoach
189
11k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
BBQ
matthewcrist
89
9.8k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Transcript
Next.js AppRouter × GraphQL 〜 夢見た理想と現実の課題 〜 2024/11/12 ディップ株式会社 横山
隼
自己紹介 • ディップ株式会社 • 2022年新卒入社 • スポットバイトルWEB・アプリの開発 • フロントエンド 大好き
横山 隼
みなさん、GraphQL 聞いたこと・使ったことありますか?
GraphQLを使うと フロントエンドの都合で必要なデータを リクエスト 1回(少数)で過不足なく取れる
GraphQLとは? 簡単に3ステップで 1. スキーマ定義 a. フロントエンドとバックエンドのインターフェースとなるデータ構造を定義 2. リゾルバ作成 a. バックエンドで定義したスキーマのデータを実際に操作・取得する関数を作成
3. クエリ実行 a. フロントエンドでどんなデータが欲しいかを書いて、リクエスト
採用してみた • スキーマ駆動開発でFE・BE間の連携がスムーズになる • 過不足なくデータフェッチ • スキーマからのコード生成で型安全 …etc チームで技術選定する際もこんな感じのことを考え採用
ぶっちゃけノリ(絶対にそんなこと言うな)
ちょっと後悔(もっと言うな)
スポットバイトルWEBで Next.js AppRouter に GraphQL を使ってみて、 感じた光と闇をお話します。
型安全 最高! • 型安全 ◦ APIリクエストする際の引数の型や返り値の型、 子コンポーネントに渡す Propsの型、 • GraphQL-Codegen
+ フラグメントコロケーション で実現 ◦ Quramyさん Fragment Composition of GraphQL ◦ GraphQL-Codegen 公式サイト
プロダクトの変化 • プロダクトは生き物 • GraphQLを使うほどにレスポンスが複雑じゃないかも🤔
GraphQL vs Next.js StreamingSSR 「1回で過不足なく取ってこれる」 は「なにか 1つが重いと全体が遅れる」 • Next.js的にはStreamingSSRしてほしい ◦
できた部分から順次ブラウザに送って先に表示するという思想 • GraphQLでは一発で取れるけど、部分的な遅延読み込みが難しい ◦ 「一部だけ遅延させ、他の部分を先に表示」が難しい ◦ 限定的だけどできなくはない( @defer ディレクティブ)
知見不足からの学び • 開発当初 Next.js AppRouter × GraphQLの知見や情報が少なかった • Next.js AppRouter
や GraphQL は何を解決しようとしていて、 我々は何を解決したかったのか →ここをしっかり考える必要あった • ノリで選んだツケが回ってきた でもチームでサポートし合って素早い開発ができた
最後に • GraphQL × Next.jsは課題もあるけど、 GraphQLならではの開発体験の良さもある(僕は好き) • 今後、良い手法が確立されて タイミングがあえば、リプレイスするかも (また、みなさんにシェアします)
https://zenn.dev/h_yokoyama/articles/nextjs-fetch-colocation ぶっちゃけ 次はAppRouterとGraphQLは 併用したくない みたいなことが書いてます
ご清聴、ありがとうございました 🍡