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
React+Graphqlで快適スキーマ駆動開発
Search
takuma.n
June 04, 2023
Programming
0
130
React+Graphqlで快適スキーマ駆動開発
React+Graphqlの開発体験がすごくいいので、皆さんも試してみてください。
takuma.n
June 04, 2023
Tweet
Share
Other Decks in Programming
See All in Programming
Memory API: Patterns, Use Cases, and Performance
josepaumard
1
190
How to debug Xdebug... or any other weird bug in PHP
dunglas
2
1.4k
2024-10-02 dev2next - Application Observability like you've never heard before
jonatan_ivanov
0
190
CSC509 Lecture 02
javiergs
PRO
0
170
MLOps in Mercari Group’s Trust and Safety ML Team
cjhj
1
130
自分だけの世界を創るクリエイティブコーディング / Creative Coding: Creating Your Own World
chobishiba
2
2k
.NET Aspireのクラウド対応検証: Azureと他環境での実践
ymd65536
1
560
ポケモンで考えるコミュニケーション / Communication Lessons from Pokémon
mackey0225
4
200
急速に利用拡大を続ける飲食店向けサービスで 店内端末同士のローカル通信を追加設定なしで実現した話
whatasoda
0
120
Jakarta EE as Seen Trough the Lens of the ASF
ivargrimstad
0
540
Cloud Adoption Framework にみる組織とクラウド導入戦略
tomokusaba
2
580
本編では話さない Zig の話
andpad
2
100
Featured
See All Featured
Happy Clients
brianwarren
97
6.7k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
225
22k
Art, The Web, and Tiny UX
lynnandtonic
296
20k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
23k
How GitHub Uses GitHub to Build GitHub
holman
473
290k
The Language of Interfaces
destraynor
154
24k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Gamification - CAS2011
davidbonilla
80
5k
Unsuck your backbone
ammeep
668
57k
Designing on Purpose - Digital PM Summit 2013
jponch
114
6.9k
Testing 201, or: Great Expectations
jmmastey
38
7k
Transcript
React + Graphqlで 快適スキーマ駆動開発
自己紹介 宮沢 趣味:ラップバトル観戦、ポーカー 基本Typescriptを触ってます
フォローしてね🐣
今日話すこと Graphqlを使ったスキーマ駆動開発の流れと 改善されること Reactとの親和性 一般的なサービス開発の流れと問題点
一般的なサービス開発の 流れと問題点
APIできたら繋ぎこみ APIで受け取る値は ハードコーディング Swaggerなどで API定義書用意 API開発進める サーバーサイド フロントエンド
フロントが後手に回りがち🥲 Swaggerの仕様と 実際のAPIが違くね?🤔 Swagger(yml)書きにくい🤮
Graphqlを使った場合
.graphqlによる API定義書が書きやすい
スキーマ ファイル を定義
.graphqlファイル書く API定義(Swagger) + モックサーバー + 型
モックサーバー
モックサーバーと繋ぐことで フロントはハードコーディン グせずに済む!
フロントとサーバー両方とも Typescriptなら
.graphqlから型生成して その型をAPI側とフロント側 で共有することで 乖離がなくなる
ここからReact絡めたお話
Graphql Code Generater
こいつがすごい
Graphqlの定義ファイル TypeScriptの型 React Hooks + ↓
実際のコードで見てみよう
フォローしてね🐣
https://zenn.dev/tackman/articles/9a49e53315b83d
モックサーバー