GraphQL 入門

インターン先で行った勉強会で使った資料です。
デモアプリのリンク
https://github.com/tiking76/ApolloGraphQL/tree/main

Transcript

1. GraphQL入門 舘佳紀
2. 自己紹介 名前 : 舘佳紀 大学 : 会津大学学部4年 好きな言語　swift twitter @tikin0716 gitHub tiking76
3. そもそもGraphQLってなに？？
4. GraphQL • クエリ言語 • 既存のデータに対するクエリを実行するランタイム • データの構造がグラフ構造になっている • Facebook製
5. 導入プロダクト例
6. GraphQLのメリット・デメリット
7. メリット • スキーマと仕様が１対１になっている • GraphQL はイントロスペクションが可能でクライ アントは、利用できるデータ型のリストをリクエス トできる。 →スキーマからのコードの自動生成もできる。
8. デメリット • REST経験者だと学習コストが高い • キャッシュが REST よりも複雑になる
9. GraphQLのスキーマ
10. GraphQl SDL(Schema Definition Language) • スキーマ設計の記述言語として、　　SDLと して汎用的に決めている
 • 型の定義として明示的でわかりやすい　　　　　　　　　　　　　　　　　　　　

11. Interface • 標準で持つ型(Scala、Type)には String , Intなどがある • !はnon-nullableのこと • オブジェクトのインターフェースとして 定義したいときに用います。
12. Type • implementsで定義したinterface型を実 装できる • オブジェクトとして定義したいときに用いま す。
13. Query • idやfirstを変数として扱いたい時は、 $idとかにしてあげる • 1Viewに対して、1queryだといい • REST時のGETの挙動を担当してる
14. Mutation • idやfirstを変数として扱いたい時は、$id とかにしてあげる • 1Viewに対して、1Mutationだといい • REST時のGETの以外の全ての挙動を担 当してる。→値を書き換えること
15. Fragment • ある程度の粒度でまとめ たいときに使う。 • 大体は1コンポーネント1 フラグメントだったりしま す、またコンポーネントへ の引数をフラグメントのみ にすると可読性も上がり ます。
16. RESTとの比較
18. リクエストタイプの比較 REST • GET • POST • PUT • DELET GraphQL • Query • Mutation
19. Clientサイドでは…
20. Apollo • GraphQLベースのデータスタックです。 • GraphQLのAPIClientととして、よく使います • サーバーサイドにも同様なものがあるため、プロジェクトでの統一ができます。 https://www.apollographql.com/docs/ios/
21. GUIのツール GraphQL Playground
22. GUIのツール xcode-graphql
23. 実際に動かしてみた…
24. 仕様技術 • サンプルAPI(https://apollo-fullstack-tutorial.herokuapp.com/graphql) • SwiftUI2.0 • APIClientにはApollo
25. デモ
26. スキーマから自動生成もできるみたい… Installation - Client (iOS)
27. 最後に…
28. まとめ • スキーマと仕様が１対１になっている点が最高 • 考え方を改める点でREST経験者だと学習コストが高い • Client側だとクエリからコードが自動生成されるライブラリーもあり、開発環境は整 い出している感はある • 宣言的UIと相性がいいと言われているのは、レスポンスの情報を一画面の情報を 受け取れるから
30. おまけ apollo-iosだとこの記事をみてやるといいかもしれません https://note.com/npaka/n/n9fc19f1284ee
31. 出典 • https://javascript.plainenglish.io/building-graphql-server-with-node-js-c31 ee3f54761 • https://spec.graphql.org/June2018/ • GraphQLでフロントエンドの複雑性とたたかう
32. もっとやりたい人は一緒に 勉強会やりましょう！！
33. ご静聴ありがとうございました🙏