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
160
みんなTCAって 知ってる?ver2.0
tiking76
1
310
みんなTCAって知ってる?
tiking76
0
900
最近きてるかもって思ってるデザイン
tiking76
0
230
Swiftのちょっとうれしい構文
tiking76
0
66
p1assさんを作ろうと試みました
tiking76
0
120
PRのときに使われがちな略語のやつ
tiking76
0
94
swiftでもグラフ書いてみたくない??
tiking76
0
190
コードでUI構築してみた
tiking76
0
86
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
40
2.1k
Raft: Consensus for Rubyists
vanstee
136
6.6k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
22k
Agile that works and the tools we love
rasmusluckow
327
21k
Facilitating Awesome Meetings
lara
49
6k
Pencils Down: Stop Designing & Start Developing
hursman
119
11k
How GitHub (no longer) Works
holman
311
140k
Music & Morning Musume
bryan
46
6.1k
GraphQLの誤解/rethinking-graphql
sonatard
65
9.9k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
26
4.1k
Testing 201, or: Great Expectations
jmmastey
38
7k
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でフロントエンドの複雑性とたたかう
もっとやりたい人は一緒に 勉強会やりましょう!!
ご静聴ありがとうございました🙏