React+Graphqlで快適スキーマ駆動開発

React+Graphqlの開発体験がすごくいいので、皆さんも試してみてください。

Transcript

1. React + Graphqlで 快適スキーマ駆動開発
2. 自己紹介 宮沢 趣味：ラップバトル観戦、ポーカー 基本Typescriptを触ってます
3. フォローしてね🐣
4. 今日話すこと Graphqlを使ったスキーマ駆動開発の流れと 改善されること Reactとの親和性 一般的なサービス開発の流れと問題点
5. 一般的なサービス開発の 流れと問題点
6. APIできたら繋ぎこみ APIで受け取る値は ハードコーディング Swaggerなどで API定義書用意 API開発進める サーバーサイド フロントエンド
7. フロントが後手に回りがち🥲 Swaggerの仕様と 実際のAPIが違くね？🤔 Swagger（yml）書きにくい🤮
8. Graphqlを使った場合
9. .graphqlによる API定義書が書きやすい
10. スキーマ ファイル を定義
11. .graphqlファイル書く API定義（Swagger） + モックサーバー + 型
12. モックサーバー
13. モックサーバーと繋ぐことで フロントはハードコーディン グせずに済む！
14. フロントとサーバー両方とも Typescriptなら
15. .graphqlから型生成して その型をAPI側とフロント側 で共有することで 乖離がなくなる
16. ここからReact絡めたお話
17. Graphql Code Generater
18. こいつがすごい
19. Graphqlの定義ファイル TypeScriptの型 React Hooks + ↓
20. 実際のコードで見てみよう
21. フォローしてね🐣
22. https://zenn.dev/tackman/articles/9a49e53315b83d
23. モックサーバー