Upgrade to Pro — share decks privately, control downloads, hide ads and more …

GraphQL 入門

tiking
September 21, 2021
780

GraphQL 入門

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

tiking

September 21, 2021
Tweet

Transcript

  1. GraphQL入門 舘佳紀

  2. 自己紹介 名前 : 舘佳紀 大学 : 会津大学学部4年 好きな言語 swift twitter @tikin0716

    gitHub tiking76
  3. そもそもGraphQLってなに??

  4. GraphQL • クエリ言語 • 既存のデータに対するクエリを実行するランタイム • データの構造がグラフ構造になっている • Facebook製

  5. 導入プロダクト例

  6. GraphQLのメリット・デメリット

  7. メリット • スキーマと仕様が1対1になっている • 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との比較

  17. None
  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. まとめ • スキーマと仕様が1対1になっている点が最高 • 考え方を改める点でREST経験者だと学習コストが高い • Client側だとクエリからコードが自動生成されるライブラリーもあり、開発環境は整 い出している感はある • 宣言的UIと相性がいいと言われているのは、レスポンスの情報を一画面の情報を

    受け取れるから
  29. None
  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. ご静聴ありがとうございました🙏