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.3k
GraphQL 入門
インターン先で行った勉強会で使った資料です。
デモアプリのリンク
https://github.com/tiking76/ApolloGraphQL/tree/main
tiking
September 21, 2021
Tweet
Share
More Decks by tiking
See All by tiking
デザインシステムっていいな
tiking76
0
180
みんなTCAって 知ってる?ver2.0
tiking76
1
320
みんなTCAって知ってる?
tiking76
0
920
最近きてるかもって思ってるデザイン
tiking76
0
240
Swiftのちょっとうれしい構文
tiking76
0
78
p1assさんを作ろうと試みました
tiking76
0
130
PRのときに使われがちな略語のやつ
tiking76
0
100
swiftでもグラフ書いてみたくない??
tiking76
0
210
コードでUI構築してみた
tiking76
0
93
Featured
See All Featured
Measuring & Analyzing Core Web Vitals
bluesmoon
5
220
Building Applications with DynamoDB
mza
93
6.2k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Optimizing for Happiness
mojombo
376
70k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
How STYLIGHT went responsive
nonsquared
96
5.3k
Side Projects
sachag
452
42k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
Site-Speed That Sticks
csswizardry
3
300
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でフロントエンドの複雑性とたたかう
もっとやりたい人は一緒に 勉強会やりましょう!!
ご静聴ありがとうございました🙏