why we should go with GraphQL

Transcript

1. 結局 GraphQL は何がいいのか? Yan
2. 本⽇の資料は Speaker Deck にて公開しています 撮影等ご⾃由に！
3. 今⽇お話すること 1. ⾃⼰紹介 3. GraphQL の特徴 5. GraphQL だからできたこと
4. 1. ⾃⼰紹介 近藤 智哉 (@mtyk_15) Kondo Motoya 󰠁GraphQL / React (バックエンド‧フロン トエンドを担当することが多いです) エン‧ジャパン株式会社 → 株式会社 RevComm → Kalonade 株式会社 → SHE 株式会社 🥰 旅⾏
5. GraphQL 触ったことありますか?
6. GraphQLとは APIを開発するためのQuery⾔語
7. 3. GraphQL の特徴 グラフ構造がベースになっているクエリ⾔語 ‧クライアントで必要な情報だけ取得できる Schema ベースで開発できる ‧Schema ⾃体に表現⼒がある ‧Schema をクライアント間 (Backend/Frontend) で共有できる
8. 3. GraphQL の特徴 グラフ構造がベースになっているクエリ⾔語 User を Node として name, email が Leaf になっている。 type User { name: String! email: String! }
9. 3. GraphQL の特徴 グラフ構造がベースになっているクエリ⾔語 このように他の Node を Leaf として 追加できる。 type Event { title: String! published_at: String! host_user: User }
10. 3. GraphQL の特徴 グラフ構造がベースになっているクエリ⾔語 フロントエンドからは必要な情報 だけを取得できる。 query { getEvent(id: String) { title host_user { name } } }
11. 3. GraphQL の特徴 Schema ベースで開発できる - Schema⾃体に表現⼒がある。 Built-inの String, Int, Float, Boolean, IDといったScalarの他に、独⾃でScalarを定義するこ とができる。 これはバリデーションロジックを含むので、Serializer や Validator としても利⽤できる。 type User { id: ID!　　 name: String! email: String! url: URL! published_at: DateTimeISO! }
12. 3. GraphQL の特徴 Schema ベースで開発できる - Schema⾃体に表現⼒がある。 SchemaにDirectiveを追加することで、クライアントに対して情報や処理を追加できる。 type User { id: ID!　　 name: String! email: String! url: URL! @deprecated(reason: "この項目は Event.url に移動しました") published_at: DateTimeISO! }
13. 3. GraphQL の特徴 Schema ベースで開発できる - Schema をクライアント間で共有できる Schema を元に型を⽣成できる。 TypeScript の型を⽣成できるので、Schema を信頼して開発できる。 Schema Entity や Service レベルの型を⽣成 APIClient の型を ⽣成
14. GraphQL だからできたこと
15. 3. GraphQL だからできたこと Fragment colocation を利⽤した拡張性の⾼いフロントエンド開発 GraphQL の仕様⾃体が Layered Architecture と相性が良い
16. 3. GraphQL だからできたこと Fragment colocation を利⽤した拡張性の⾼いフロントエンド開発 ‧Component ごとに Fragmentを定義し、Pageで⼀括取得する⽅法 ‧メンテコスト低くオーバーフェッチングを防ぐことができる
17. 3. GraphQL だからできたこと GraphQL の仕様⾃体が Layered Architecture と相性が良い ‧Schemaを設計すると、 Entity や Service のIFが⼿に⼊る。
18. GraphQL 良さそうですよね 😃