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
120
React+Graphqlで快適スキーマ駆動開発
React+Graphqlの開発体験がすごくいいので、皆さんも試してみてください。
takuma.n
June 04, 2023
Tweet
Share
Other Decks in Programming
See All in Programming
Play Billing Library 7.0.0 変更点まとめ@potatotips#88
kako351
0
160
リハビリmruby
kishima
1
160
実用的かつリーズナブルな 「Azure × Gemini × LINE」~キャラクターBot 実装ライブデモ~
tomodo_ysys
1
170
大規模マルチテナントを解決するYugabyteDBという選択肢
nnaka2992
1
250
みんなのオブザーバビリティプラットフォームを作ってるんだがパフォーマンスがやばい #mackerelio #srenext
ne_sachirou
0
370
HMSコンペ 11th Solution (team : kansai-kaggler)
t88
1
680
CSC307 Lecture 09
javiergs
PRO
1
500
I/O Extended Android in Korea 2024 ~ Whats new in Android development tools
pluu
0
250
12年前の『型システム入門』翻訳の思い出話
mame
11
1.2k
「2024年版 Kotlin サーバーサイドプログラミング実践開発」の補講 〜O/Rマッパー編〜
n_takehata
2
260
DynamoDB コスト最適化っぽいことの基本 with Terraform
kuro_kurorrr
2
250
最近追加した型の紹介とその振り返り
aki19035vc
0
170
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
15
4.9k
Optimizing for Happiness
mojombo
373
69k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
325
21k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
18
1.2k
The Illustrated Children's Guide to Kubernetes
chrisshort
39
47k
The Cost Of JavaScript in 2023
addyosmani
31
4.7k
Principles of Awesome APIs and How to Build Them.
keavy
124
16k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
Practical Orchestrator
shlominoach
185
10k
Making Projects Easy
brettharned
111
5.7k
10 Git Anti Patterns You Should be Aware of
lemiorhan
652
58k
Raft: Consensus for Rubyists
vanstee
134
6.5k
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
モックサーバー