GraphQL入門-Spring Bootで作ってみた/GraphQL Spring Boot Sample

Transcript

1. GraphQL入門 Spring Bootで作ってみた 2019年12月13日 @ky0314 on twitter
2. 自己紹介 https://www.instagram.com/p/ByuGDP5AAky/?utm_source=ig_web_copy_link https://cookpad.com/recipe/5093087
3. 本日の目的 • GraphQLというものが一体なんなのかを知っても らう • GraphQLの概要を知ってもらう • Spring Bootで最小限の実装をして、イメージを掴 んでもらう • 僕のアウトプットの練習の場
4. 目次 1. GraphQLとは？ 2. GraphQLの基本的な文法 3. Spring Bootで作ってみた
5. GraphQLとは？ GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools. --- https://graphql.org/
6. GraphQLとは？
7. GraphQLとは？ • Facebookが開発した新しいWeb APIの規格 • 2015年に一般公開 • クライアントとサーバーで「型」を共有できる • 必要なデータをクライアント側で指定できる • サーバー側は単一のエンドポイントを用意するだけ
8. GraphQLとは？ • クライアントとサーバーで「型」を共有できる 「スキーマ」と呼ばれる定義を作成し、これをクライアント側とサーバー側で共有することで、 ドキュメントに頼らず開発時にエディタレベルで保管や型チェックを行うことができる。 { type User { id: ID! name: String! occupation: Occupation } type Occupation { name: String! } }
9. GraphQLとは？ • 必要なデータをクライアント側で指定できる // 名前だけ必要な時のリクエストの例 { getAllUsers { name } } // 色々なデータが必要な時のリクエストの例 { getAllUsers { name id occupation age birthday } } 通常のRESTなAPIはレスポンスに含まれるデータが決まっているが、 GraphQLの存在する世界では、クライアント側が APIを呼ぶ際にレスポンスに必要なデータを指 定する 「過剰な取得」と「過小な取得」をなくすことができる
10. GraphQLとは？ • サーバー側は単一のエンドポイントを用意するだけ サーバー側が用意するエンドポイントは1つ(通常は”/graphql”)のみ。 様々な種類のリクエストに対応するために無限にエンドポイントを増やす必 要がなくなる。 /api/user/info /api/user/info_with_details /api/user/info_with_details_and_occupations /api/v2/user/detail /api/v2/user/detail_with_hogehoge . . . . /graphql
11. GraphQLとは？ 長いAPIの歴史の中で育まれた (主に開発面での)「辛み」 を解決するために生まれたAPIの規格である。 一般ユーザー目線では、例えばスマホアプリの過剰な通信を抑えることができる、などのメリットがある
12. GraphQLの基本的な文法
13. GraphQLの基本的な文法 • スキーマ • クエリ GraphQLの主要な登場人物
14. GraphQLの基本的な文法 スキーマ GraphQLを採用したAPIはエンドポイントの集合ではなく、 定義された「型」の集合と考える ※1 この型定義を『スキーマ』と呼ぶ ※1 Eve Porcello Alex Banks　著、尾崎 沙耶、あんどうやすし訳 『初めてのGraphQL』O'Reilly Japan, Inc ,2019, p.132 サーバー エンドポイント クライアント サーバー クライアント スキーマ サーバーとクライアント間での 「契約」 -> スキーマ駆動開発
15. GraphQLの基本的な文法 スキーマ type Player { id: ID! # <- フィールド名: データ型で定義する name: String! # <- 型名の後の「!」はNon-Nullable、「!」がなければNullable => Kotlinと逆 team: Team # <- 組み込みのスカラー型(Int, Float, String, Boolean, ID)の他に、 # 自分で定義した型も使える positions: [Position!] # <- 複数の値を持つリストは[ ]で囲む } type Team { id: ID! teamName: String! field: Field! } 型定義の例 (プロ野球選手の情報を取得する APIを想定) この他にもEnumやInterface等、色々とありますが今日は割愛
16. GraphQLの基本的な文法 クエリ # 実際にリクエストをするときは以下のような文字列のクエリをAPI にパラメーターとして送る { getPlayerByID(id: ID!) { id name # <- ここで、APIに返してもらいたいフィールドを指定する } } 定義された型に基づきデータを取得する問い合わせ言語 # どんなクエリが使えるかも「型」として事前に定義される type Query { getPlayerByID(id: ID!): Player # <- パラメーターと戻り値も型で定義される }
17. GraphQLの基本的な文法 実際に動かしたイメージ
18. Spring Bootで作ってみた
19. Spring Bootで作ってみた 結論： 先人たちのおかげであっさり作れます
20. Spring Bootで作ってみた Gradleに依存を追加 dependencies { ….. implementation("com.graphql-java-kickstart:graphql-spring-boot-starter:5.7.3") implementation("com.graphql-java-kickstart:graphiql-spring-boot-starter:5.7.3") implementation("com.graphql-java-kickstart:altair-spring-boot-starter:5.7.3") implementation("com.graphql-java-kickstart:graphql-java-tools:5.5.1") }
21. Spring Bootで作ってみた resourcesにスキーマの定義ファイルを作成 type Player { id: ID! name: String! team: Team positions: [Position!] } type Position { id: ID! positionName: String! } type Query { getPlayerByID(id: ID!): Player getAllPlayers: [Player!] } schemas.graphqls
22. Spring Bootで作ってみた スキーマで定義された型に対応するデータ型を作成 data class Player(val id: String, val name: String) enum class Team(val id: String, val teamName: String, val field: Field) { YANKEES(id = "1", teamName = "NewYork Yankees", field = Field.YANKEE_STADIUM), CUBS(id = "2", teamName = "Chicago Cubs", field = Field.WRIGLEY_FIELD), MARINERS(id = "3", teamName = "Seattle Mariners", field = Field.T_MOBILE_PARK), ANGELS(id = "4", teamName = "LosAngels Angels of Anaheim", field = Field.ANGEL_STADIUM); }
23. Spring Bootで作ってみた スキーマで定義された Queryを解決するResolverを実装する @Component class QueryResolver( val playerRepository: PlayerRepository ) : GraphQLQueryResolver { // スキーマで定義されたQueryと同じ名前のメソッドを定義すると勝手に呼ばれる(Reflection) fun getPlayerByID(id: String): Player? = playerRepository.getPlayerByID(id = id) fun getAllPlayers(): List<Player> = playerRepository.getAllPlayers() }
24. Spring Bootで作ってみた 以上です。お疲れ様でした。 (もちろんRepositoryとかは別途実装する必要があるけど)
25. Spring Bootで作ってみた ここまでの手順で http://localhost:8080/graphiql にアクセスすると、もう動いてます
26. Spring Bootで作ってみた スキーマで定義されたけど Kotlin側のdata classで持っていないプロパティはどうする？ data class Player(val id: String, val name: String) type Player { id: ID! name: String! team: Team positions: [Position!] }
27. Spring Bootで作ってみた GraphQLResolver<T> を実装すると、勝手に解決してくれます @Component class PlayerResolver( val teamRepository: TeamRepository, val positionRepository: PositionRepository ) : GraphQLResolver<Player> { fun getTeam(player: Player): Team? { return teamRepository.getTeamByPlayer(player = player) } fun getPositions(player: Player): List<Position> { return positionRepository.getPositionByPlayer(player = player) } }
28. 結論: GraphQLの何が嬉しいか • APIの大量発生がなくなる • GraphQLオンリーならControllerがそもそもいらない • 「型」が事前に定義されることによる開発効率のアップ • 従来の開発に比べて大きく変わらない
29. GraphQLについて思ったこと • QueryResolverは一箇所にまとめたい、もしくはQueryに名前空間 欲しい • 画像とか送れるのかな？ -> やろうと思えば出来るらしい • 絶対 N+1 問題起きそう -> 起きるし、解決方法もある • 地味にGraphiQLが神だと思う
30. 今日触れなかったこと • クライアント側の実装 • mutation • subscription • N+1問題どうする問題 • ファイルアップロードチャレンジ • 認証周り
31. ご静聴ありがとうございました 今回作ったコードはこちら https://github.com/fisherman08/KotlinGraphQL