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
74
Next.js AppRouter × GraphQL 〜 夢見た理想と現実の課題 〜
Hayato Yokoyama
November 12, 2024
Tweet
Share
More Decks by Hayato Yokoyama
See All by Hayato Yokoyama
フロントエンドテストを書きやすくするために工夫したこと
hayato_yokoyama
1
67
Other Decks in Programming
See All in Programming
採用事例の少ないSvelteを選んだ理由と それを正解にするためにやっていること
oekazuma
2
1.1k
週次リリースを実現するための グローバルアプリ開発
tera_ny
1
110
Cloudflare MCP ServerでClaude Desktop からWeb APIを構築
kutakutat
1
580
Jaspr Dart Web Framework 박제창 @Devfest 2024
itsmedreamwalker
0
100
技術的負債と向き合うカイゼン活動を1年続けて分かった "持続可能" なプロダクト開発
yuichiro_serita
0
160
開発者とQAの越境で自動テストが増える開発プロセスを実現する
92thunder
1
200
情報漏洩させないための設計
kubotak
4
900
AppRouterを用いた大規模サービス開発におけるディレクトリ構成の変遷と問題点
eiganken
1
190
Jakarta EE meets AI
ivargrimstad
0
290
rails statsで大解剖 🔍 “B/43流” のRailsの育て方を歴史とともに振り返ります
shoheimitani
2
960
nekko cloudにおけるProxmox VE利用事例
irumaru
3
460
責務を分離するための例外設計 - PHPカンファレンス 2024
kajitack
8
2k
Featured
See All Featured
Code Review Best Practice
trishagee
65
17k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
RailsConf 2023
tenderlove
29
940
Making the Leap to Tech Lead
cromwellryan
133
9k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.6k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Documentation Writing (for coders)
carmenintech
67
4.5k
Designing on Purpose - Digital PM Summit 2013
jponch
116
7k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
127
18k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
1
110
Bash Introduction
62gerente
609
210k
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は 併用したくない みたいなことが書いてます
ご清聴、ありがとうございました 🍡