GraphQLに取り組んだ新卒が ぶつかった壁を共有したい

GraphQLのタスクに取り掛かったときに詰まった部分の紹介です。

Transcript

1. 0 GraphQLに取り組んだ新卒が ぶつかった壁を共有したい 2023-11-24 第69回NearMe技術勉強会 Kaito Asahi
2. 1 このスライドはこんな⽅におすすめ🥁 • GraphQLってなんぞやと思っていらっしゃる⽅ ◦ 「Query, Mutationってなんや？」 • バックエンドのタスクに取り組み始めた⽅ ◦ 「なんか、GraphQLをうちで使うらしいわ〜」 • 新しい技術に興味ある⽅ ※注意 • Mutationのハンズオンは含みません（queryだけ） • typeDefs, resolversの実装は含みません ※過去の勉強会にて、GraphQL、その統合ツールのApolloに関してはこちらにあります！ https://speakerdeck.com/nearme_tech/rustzhi-graphqltong-he-turu-apollo-routerwoshi-tutemita-hanzuon
3. 2 何で詰んだのか？
4. 3 何で詰んだのか？ → カスタムの型を利⽤したときに、 subfieldsのselectionを明⽰していなかった
5. 4 GraphQLのクイックチェック • GraphQLとは？ ◦ APIのための問い合わせ⾔語 ◦ クライアント/サーバー通信のための⾔語仕様 • GraphQLの特徴 ◦ 階層構造のクエリ ▪ クエリと、レスポンスの構造が⼀致 ◦ 強い型付け
6. 5 GraphQLのクイックチェック • RESTと何が異なるの？ ◦ REST ▪ 各エンドポイントに対して、固有のレスポンスを返す • オーバーフェッチ、アンダーフェッチ ▪ エンドポイントの管理が⼤変 • ~/posts, ~/users ◦ GraphQL ▪ リソース数に関わらず、エンドポイントは1つ ▪ クライアントからの固有の型に適したレスポンスを返す ※参考：https://aws.amazon.com/jp/compare/the-difference-between-graphql-and-rest/
7. 6 GraphQLのクイックチェック • QueryとMutation ◦ Query ▪ いわゆる、GETメソッド ◦ Mutation ▪ いわゆる、POST, PUT, DELETEメソッド • 何かしらデータベースに変化を起こす
8. 7 GraphQLのクイックチェック • 簡単にGraphQLを触ってみる • https://studio.apollographql.com/ ◦ ここから、sign in（もしくはsign up）してください
9. 8 GraphQLのクイックチェック • 簡単にGraphQLを触ってみる • “Connect your API”を選択
10. 9 GraphQLのクイックチェック • 簡単にGraphQLを触ってみる • オープンなエンドポイントを今回は利⽤ ◦ https://countries.trevorblades.com
11. 10 GraphQLのクイックチェック • 簡単にGraphQLを触ってみる • そのまま”Continue”
12. 11 GraphQLのクイックチェック • 簡単にGraphQLを触ってみる • “current”を選択
13. 12 GraphQLのクイックチェック • 簡単にGraphQLを触ってみる • “Run in Explorer”をクリック
14. 13 GraphQLのクイックチェック • 簡単にGraphQLを触ってみる • これで準備完了
15. 14 GraphQLのクイックチェック • 簡単にGraphQLを触ってみる • これで準備完了
16. 15 GraphQLのクイックチェック • 簡単にGraphQLを触ってみる • “Operation”部分に、以下のクエリを書く query ExampleQuery { countries { code name } }
17. 16 GraphQLのクイックチェック • 簡単にGraphQLを触ってみる • “Operation”部分に、以下のクエリを書く ◦ “countries”の中の、”code”, “name”値を取得 query ExampleQuery { countries { code name } }
18. 17 GraphQLのクイックチェック • 簡単にGraphQLを触ってみる • “Response”を確認してみましょう
19. 18 GraphQLのクイックチェック • 簡単にGraphQLを触ってみる • “emoji”を追加する query ExampleQuery { countries { code name emoji } }
20. 19 GraphQLのクイックチェック • 簡単にGraphQLを触ってみる • “Response”を確認してみましょう
21. 20 それで、結論の詰んだポイントはどういうの？
22. 21 GraphQLのクイックチェック • カスタムな型 • countriesは、カスタムな型である”Country”型の配列を返す ◦ ⻑いので⼀部省略
23. 22 GraphQLのクイックチェック • カスタムな型 • countriesは、カスタムな型である”Country”型の配列を返す ◦ StringやIDなどは、スカラー型
24. 23 GraphQLのクイックチェック • カスタムな型 • countriesは、カスタムな型である”Country”型の配列を返す ◦ StringやIDなどは、スカラー型
25. 24 GraphQLのクイックチェック • カスタムな型 • continentも、カスタムの型”Continent” → 何を返すのかは明⽰しなければいけない（これ指定しないで詰んだことあり...） query ExampleQuery { countries { code name continent } } query ExampleQuery { countries { code name continent { code name } } }
26. 25 Thank you