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.4k
GraphQL 入門
インターン先で行った勉強会で使った資料です。
デモアプリのリンク
https://github.com/tiking76/ApolloGraphQL/tree/main
tiking
September 21, 2021
Tweet
Share
More Decks by tiking
See All by tiking
デザインシステムっていいな
tiking76
0
200
みんなTCAって 知ってる?ver2.0
tiking76
1
340
みんなTCAって知ってる?
tiking76
0
990
最近きてるかもって思ってるデザイン
tiking76
0
270
Swiftのちょっとうれしい構文
tiking76
0
110
p1assさんを作ろうと試みました
tiking76
0
150
PRのときに使われがちな略語のやつ
tiking76
0
120
swiftでもグラフ書いてみたくない??
tiking76
0
240
コードでUI構築してみた
tiking76
0
120
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Rails Girls Zürich Keynote
gr2m
95
14k
Optimizing for Happiness
mojombo
379
70k
Why Our Code Smells
bkeepers
PRO
339
57k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
Designing for Performance
lara
610
69k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Building Applications with DynamoDB
mza
96
6.6k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
YesSQL, Process and Tooling at Scale
rocio
173
14k
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でフロントエンドの複雑性とたたかう
もっとやりたい人は一緒に 勉強会やりましょう!!
ご静聴ありがとうございました🙏