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
91
Next.js AppRouter × GraphQL 〜 夢見た理想と現実の課題 〜
Hayato Yokoyama
November 12, 2024
Tweet
Share
More Decks by Hayato Yokoyama
See All by Hayato Yokoyama
フロントエンドテストを書きやすくするために工夫したこと
hayato_yokoyama
1
76
Other Decks in Programming
See All in Programming
Ruby on cygwin 2025-02
fd0
0
140
Immutable ActiveRecord
megane42
0
130
いりゃあせ、PHPカンファレンス名古屋2025 / Welcome to PHP Conference Nagoya 2025
ttskch
1
270
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
5
3.8k
ISUCON14公式反省会LT: 社内ISUCONの話
astj
PRO
0
180
Spring gRPC について / About Spring gRPC
mackey0225
0
220
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
110
自分ひとりから始められる生産性向上の取り組み #でぃーぷらすオオサカ
irof
8
2.6k
Rails アプリ地図考 Flush Cut
makicamel
1
110
チームリードになって変わったこと
isaka1022
0
190
Software Architecture
hschwentner
6
2.1k
Compose でデザインと実装の差異を減らすための取り組み
oidy
1
300
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Practical Orchestrator
shlominoach
186
10k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Six Lessons from altMBA
skipperchong
27
3.6k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
29
2.2k
Building Your Own Lightsaber
phodgson
104
6.2k
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は 併用したくない みたいなことが書いてます
ご清聴、ありがとうございました 🍡