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
980
最近きてるかもって思ってるデザイン
tiking76
0
260
Swiftのちょっとうれしい構文
tiking76
0
100
p1assさんを作ろうと試みました
tiking76
0
150
PRのときに使われがちな略語のやつ
tiking76
0
120
swiftでもグラフ書いてみたくない??
tiking76
0
240
コードでUI構築してみた
tiking76
0
120
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
KATA
mclloyd
32
14k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Done Done
chrislema
185
16k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.8k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
20k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
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でフロントエンドの複雑性とたたかう
もっとやりたい人は一緒に 勉強会やりましょう!!
ご静聴ありがとうございました🙏