Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
GraphQL 入門
Search
tiking
September 21, 2021
0
1.1k
GraphQL 入門
インターン先で行った勉強会で使った資料です。
デモアプリのリンク
https://github.com/tiking76/ApolloGraphQL/tree/main
tiking
September 21, 2021
Tweet
Share
More Decks by tiking
See All by tiking
デザインシステムっていいな
tiking76
0
160
みんなTCAって 知ってる?ver2.0
tiking76
1
300
みんなTCAって知ってる?
tiking76
0
840
最近きてるかもって思ってるデザイン
tiking76
0
200
Swiftのちょっとうれしい構文
tiking76
0
56
p1assさんを作ろうと試みました
tiking76
0
100
PRのときに使われがちな略語のやつ
tiking76
0
88
swiftでもグラフ書いてみたくない??
tiking76
0
170
コードでUI構築してみた
tiking76
0
83
Featured
See All Featured
The Mythical Team-Month
searls
216
42k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
Visualization
eitanlees
136
14k
Building an army of robots
kneath
300
41k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
Six Lessons from altMBA
skipperchong
21
3k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
Statistics for Hackers
jakevdp
789
220k
Build your cross-platform service in a week with App Engine
jlugia
225
17k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
25
2.3k
What's new in Ruby 2.0
geeforr
337
31k
Happy Clients
brianwarren
92
6.4k
Transcript
GraphQL入門 舘佳紀
自己紹介 名前 : 舘佳紀 大学 : 会津大学学部4年 好きな言語 swift twitter @tikin0716
gitHub tiking76
そもそもGraphQLってなに??
GraphQL • クエリ言語 • 既存のデータに対するクエリを実行するランタイム • データの構造がグラフ構造になっている • Facebook製
導入プロダクト例
GraphQLのメリット・デメリット
メリット • スキーマと仕様が1対1になっている • GraphQL はイントロスペクションが可能でクライ アントは、利用できるデータ型のリストをリクエス トできる。 →スキーマからのコードの自動生成もできる。
デメリット • REST経験者だと学習コストが高い • キャッシュが REST よりも複雑になる
GraphQLのスキーマ
GraphQl SDL(Schema Definition Language) • スキーマ設計の記述言語として、 SDLと して汎用的に決めている • 型の定義として明示的でわかりやすい
Interface • 標準で持つ型(Scala、Type)には String , Intなどがある • !はnon-nullableのこと • オブジェクトのインターフェースとして
定義したいときに用います。
Type • implementsで定義したinterface型を実 装できる • オブジェクトとして定義したいときに用いま す。
Query • idやfirstを変数として扱いたい時は、 $idとかにしてあげる • 1Viewに対して、1queryだといい • REST時のGETの挙動を担当してる
Mutation • idやfirstを変数として扱いたい時は、$id とかにしてあげる • 1Viewに対して、1Mutationだといい • REST時のGETの以外の全ての挙動を担 当してる。→値を書き換えること
Fragment • ある程度の粒度でまとめ たいときに使う。 • 大体は1コンポーネント1 フラグメントだったりしま す、またコンポーネントへ の引数をフラグメントのみ にすると可読性も上がり
ます。
RESTとの比較
None
リクエストタイプの比較 REST • GET • POST • PUT • DELET
GraphQL • Query • Mutation
Clientサイドでは…
Apollo • GraphQLベースのデータスタックです。 • GraphQLのAPIClientととして、よく使います • サーバーサイドにも同様なものがあるため、プロジェクトでの統一ができます。 https://www.apollographql.com/docs/ios/
GUIのツール GraphQL Playground
GUIのツール xcode-graphql
実際に動かしてみた…
仕様技術 • サンプルAPI(https://apollo-fullstack-tutorial.herokuapp.com/graphql) • SwiftUI2.0 • APIClientにはApollo
デモ
スキーマから自動生成もできるみたい… Installation - Client (iOS)
最後に…
まとめ • スキーマと仕様が1対1になっている点が最高 • 考え方を改める点でREST経験者だと学習コストが高い • Client側だとクエリからコードが自動生成されるライブラリーもあり、開発環境は整 い出している感はある • 宣言的UIと相性がいいと言われているのは、レスポンスの情報を一画面の情報を
受け取れるから
None
おまけ apollo-iosだとこの記事をみてやるといいかもしれません https://note.com/npaka/n/n9fc19f1284ee
出典 • https://javascript.plainenglish.io/building-graphql-server-with-node-js-c31 ee3f54761 • https://spec.graphql.org/June2018/ • GraphQLでフロントエンドの複雑性とたたかう
もっとやりたい人は一緒に 勉強会やりましょう!!
ご静聴ありがとうございました🙏