0 GraphQLに取り組んだ新卒が ぶつかった壁を共有したい 2023-11-24 第69回NearMe技術勉強会 Kaito Asahi

1 このスライドはこんな⽅におすすめ🥁 ● GraphQLってなんぞやと思っていらっしゃる⽅ ○ 「Query, Mutationってなんや？」 ● バックエンドのタスクに取り組み始めた⽅ ○ 「なんか、GraphQLをうちで使うらしいわ〜」 ● 新しい技術に興味ある⽅ ※注意 ● Mutationのハンズオンは含みません（queryだけ） ● typeDefs, resolversの実装は含みません ※過去の勉強会にて、GraphQL、その統合ツールのApolloに関してはこちらにあります！ https://speakerdeck.com/nearme_tech/rustzhi-graphqltong-he-turu-apollo-routerwoshi-tutemita-hanzuon

2 何で詰んだのか？

3 何で詰んだのか？ → カスタムの型を利⽤したときに、 subfieldsのselectionを明⽰していなかった

4 GraphQLのクイックチェック ● GraphQLとは？ ○ APIのための問い合わせ⾔語 ○ クライアント/サーバー通信のための⾔語仕様 ● GraphQLの特徴 ○ 階層構造のクエリ ■ クエリと、レスポンスの構造が⼀致 ○ 強い型付け

5 GraphQLのクイックチェック ● RESTと何が異なるの？ ○ REST ■ 各エンドポイントに対して、固有のレスポンスを返す ● オーバーフェッチ、アンダーフェッチ ■ エンドポイントの管理が⼤変 ● ~/posts, ~/users ○ GraphQL ■ リソース数に関わらず、エンドポイントは1つ ■ クライアントからの固有の型に適したレスポンスを返す ※参考：https://aws.amazon.com/jp/compare/the-difference-between-graphql-and-rest/

6 GraphQLのクイックチェック ● QueryとMutation ○ Query ■ いわゆる、GETメソッド ○ Mutation ■ いわゆる、POST, PUT, DELETEメソッド ● 何かしらデータベースに変化を起こす

7 GraphQLのクイックチェック ● 簡単にGraphQLを触ってみる ● https://studio.apollographql.com/ ○ ここから、sign in（もしくはsign up）してください

8 GraphQLのクイックチェック ● 簡単にGraphQLを触ってみる ● “Connect your API”を選択

9 GraphQLのクイックチェック ● 簡単にGraphQLを触ってみる ● オープンなエンドポイントを今回は利⽤ ○ https://countries.trevorblades.com

10 GraphQLのクイックチェック ● 簡単にGraphQLを触ってみる ● そのまま”Continue”

11 GraphQLのクイックチェック ● 簡単にGraphQLを触ってみる ● “current”を選択

12 GraphQLのクイックチェック ● 簡単にGraphQLを触ってみる ● “Run in Explorer”をクリック

13 GraphQLのクイックチェック ● 簡単にGraphQLを触ってみる ● これで準備完了

14 GraphQLのクイックチェック ● 簡単にGraphQLを触ってみる ● これで準備完了

15 GraphQLのクイックチェック ● 簡単にGraphQLを触ってみる ● “Operation”部分に、以下のクエリを書く query ExampleQuery { countries { code name } }

16 GraphQLのクイックチェック ● 簡単にGraphQLを触ってみる ● “Operation”部分に、以下のクエリを書く ○ “countries”の中の、”code”, “name”値を取得 query ExampleQuery { countries { code name } }

17 GraphQLのクイックチェック ● 簡単にGraphQLを触ってみる ● “Response”を確認してみましょう

18 GraphQLのクイックチェック ● 簡単にGraphQLを触ってみる ● “emoji”を追加する query ExampleQuery { countries { code name emoji } }

19 GraphQLのクイックチェック ● 簡単にGraphQLを触ってみる ● “Response”を確認してみましょう

20 それで、結論の詰んだポイントはどういうの？

21 GraphQLのクイックチェック ● カスタムな型 ● countriesは、カスタムな型である”Country”型の配列を返す ○ ⻑いので⼀部省略

22 GraphQLのクイックチェック ● カスタムな型 ● countriesは、カスタムな型である”Country”型の配列を返す ○ StringやIDなどは、スカラー型

23 GraphQLのクイックチェック ● カスタムな型 ● countriesは、カスタムな型である”Country”型の配列を返す ○ StringやIDなどは、スカラー型

24 GraphQLのクイックチェック ● カスタムな型 ● continentも、カスタムの型”Continent” → 何を返すのかは明⽰しなければいけない（これ指定しないで詰んだことあり...） query ExampleQuery { countries { code name continent } } query ExampleQuery { countries { code name continent { code name } } }

25 Thank you