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
実践!難読化ガイド
mitchan
0
250
Our Websites Need a Lifestyle Change, Not a Diet
ryantownsend
0
150
状態管理ライブラリZustandの導入から運用まで
k1tikurisu
3
470
What is Parser
yui_knk
9
4.2k
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
530
Composing an API the *right* way (Droidcon New York 2024)
zsmb
2
180
LangChainの現在とv0.3にむけて
os1ma
4
940
watsonx.ai Dojo #2 生成AIを使ったアプリ開発入門編
oniak3ibm
PRO
0
240
なぜアジャイルがうまくいかないのか?
yum3
1
110
LangGraphでのHuman-in-the-Loopの実装
os1ma
3
1.1k
KSPの導入・移行を前向きに検討しよう!
shxun6934
PRO
0
290
Ebitengineの1vs1ゲーム WebRTCの活用
ponyo877
0
380
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
334
56k
Building a Scalable Design System with Sketch
lauravandoore
458
32k
Making the Leap to Tech Lead
cromwellryan
128
8.8k
Rebuilding a faster, lazier Slack
samanthasiow
78
8.6k
No one is an island. Learnings from fostering a developers community.
thoeni
18
2.9k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
225
22k
The Illustrated Children's Guide to Kubernetes
chrisshort
47
48k
Building a Modern Day E-commerce SEO Strategy
aleyda
36
6.8k
Raft: Consensus for Rubyists
vanstee
136
6.5k
How To Stay Up To Date on Web Technology
chriscoyier
786
250k
The World Runs on Bad Software
bkeepers
PRO
64
11k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
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
モックサーバー