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
130
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
120
フロントエンドテストを書きやすくするために工夫したこと
hayato_yokoyama
1
77
Other Decks in Programming
See All in Programming
Team operations that are not burdened by SRE
kazatohiei
1
270
Create a website using Spatial Web
akkeylab
0
310
DroidKnights 2025 - 다양한 스크롤 뷰에서의 영상 재생
gaeun5744
3
330
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
210
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
330
Deep Dive into ~/.claude/projects
hiragram
10
2.1k
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
230
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
220
Java on Azure で LangGraph!
kohei3110
0
170
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
andpad
0
280
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
510
PicoRuby on Rails
makicamel
2
110
Featured
See All Featured
Practical Orchestrator
shlominoach
188
11k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
800
Code Reviewing Like a Champion
maltzj
524
40k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
How to train your dragon (web standard)
notwaldorf
94
6.1k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Typedesign – Prime Four
hannesfritz
42
2.7k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Optimizing for Happiness
mojombo
379
70k
A designer walks into a library…
pauljervisheath
207
24k
Agile that works and the tools we love
rasmusluckow
329
21k
Become a Pro
speakerdeck
PRO
28
5.4k
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は 併用したくない みたいなことが書いてます
ご清聴、ありがとうございました 🍡