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
Kyo Sato
October 15, 2022
Programming
0
1.4k
作って学ぶ GraphQL
Go Conference mini 2022 Autumn IN Sendai の発表スライドです。
GraphQL についてまとめてみました。
Kyo Sato
October 15, 2022
Tweet
Share
More Decks by Kyo Sato
See All by Kyo Sato
Go言語で行うメール解析
keyl0ve
0
1.3k
Gopher Enablement Internship
keyl0ve
0
740
Other Decks in Programming
See All in Programming
ChatGPT とつくる PHP で OS 実装
memory1994
PRO
3
190
自動で //nolint を挿入する取り組み / Gopher's Gathering
utgwkk
1
110
カスタムエフェクトプラグインで Atom Craft をいい感じにする@ADX / ADX LE勉強会 vol.1
cox2
0
110
PSR-15 はあなたのための ものではない? - phpcon2024
myamagishi
0
410
DMMオンラインサロンアプリのSwift化
hayatan
0
190
『改訂新版 良いコード/悪いコードで学ぶ設計入門』活用方法−爆速でスキルアップする!効果的な学習アプローチ / effective-learning-of-good-code
minodriven
28
4.3k
AHC041解説
terryu16
0
430
선언형 UI에서의 상태관리
l2hyunwoo
0
270
Запуск 1С:УХ в крупном энтерпрайзе: мечта и реальность ПМа
lamodatech
0
960
functionalなアプローチで動的要素を排除する
ryopeko
1
440
Fibonacci Function Gallery - Part 2
philipschwarz
PRO
0
220
Lookerは可視化だけじゃない。UIコンポーネントもあるんだ!
ymd65536
1
130
Featured
See All Featured
Building Your Own Lightsaber
phodgson
104
6.2k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
250
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
39
1.9k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
The Cost Of JavaScript in 2023
addyosmani
46
7.2k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Writing Fast Ruby
sferik
628
61k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Transcript
作って学ぶ GraphQL Go Conference mini 2022 Autumn IN SENDAI Kyo
Sato
Shopify No-Code Mobile-App VIP Appify ってなに?
Contents - 自己紹介 - GraphQL について - 終わりに
Contents - 自己紹介 - GraphQL について - 終わりに
- GraphQL について理解を深めたかった - GraphQL を導入することで得られる メリットについて整理したかった - Appify で使用されている技術
理由
自己紹介
自己紹介 Name: きょー。 HN: Keyl0ve Hobby: 温泉、旅行、食べ歩 Univ. : 会津大学
B3
GraphQLについて 目標: - GraphQL という技術を広める - 実際にサーバを立てて試してもらう
GraphQL - Facebook - OSS - API のために作られた クエリ言語 -
既存のデータに対するクエリ を実行するランタイム
GraphQL のメリット -クライアントはスキーマをもとに、 欲しいフィールドだけをリクエストできる -リレーションがある値は一度のリクエストで 取得できる -スキーマをもとに開発するので型の不一致が 起きない
GraphQL のメリット -クライアントはスキーマをもとに、 欲しいフィールドだけをリクエストできる -リレーションがある値は一度のリクエストで 取得できる -スキーマをもとに開発するので型の不一致が 起きない
GraphQL のメリット -クライアントはスキーマをもとに、 欲しいフィールドだけをリクエストできる -リレーションがある値は一度のリクエストで 取得できる -スキーマをもとに開発するので型の不一致が 起きない
REST vs GraphQL https://qiita.com/shunp/items/d85fc47b33e1b3a88167
REST vs GraphQL HTTP requests HTTP responses GET /api/user?id=1 GET
/api/address?user_id=1 { ”id” : 1, “name” : “user1” } { ”street” : “Aoba street”, “city” : “Sendai city” }
REST vs GraphQL HTTP requests HTTP responses GET /api/user?id=1 GET
/api/address?user_id=1 { ”id” : 1, “name” : “user1” } { ”street” : “Aoba street”, “city” : “Sendai city” } 2回 API を叩いてる!!
REST vs GraphQL HTTP requests HTTP responses GET /api/user?id=1 GET
/api/address?user_id=1 { ”id” : 1, “name” : “user1” } { ”street” : “Aoba street”, “city” : “Sendai city” } 2回 API を叩いてる!!
REST vs GraphQL HTTP requests HTTP responses POST /graphql query
{ user(id: 1){ id } } { ”user” : { “id”: 1, } }
REST vs GraphQL HTTP requests HTTP responses POST /graphql query
{ user(id: 1){ id name } } { ”user” : { “id”: 1, “name”: “user1” } }
REST vs GraphQL HTTP requests HTTP responses POST /graphql query
{ user(id: 1){ id name address{ street city } { ”user” : { “id”: 1, “name”: “user1”, “address”: { “street”: “Aoba street”, “city”: “Sendai city” } } }
REST vs GraphQL HTTP requests HTTP responses POST /graphql query
{ user(id: 1){ id name address{ street city } { ”user” : { “id”: 1, “name”: “user1”, “address”: { “street”: “Aoba street”, “city”: “Sendai city” } } } 1 回 API を叩くだけで良い
GitHub の repository を取ってくる REST https://api.github.com/users/Keyl0ve/repos GraphQL https://api.github.com/graphql
GitHub の repository を取ってくる REST https://api.github.com/users/Keyl0ve/repos GraphQL https://api.github.com/graphql 通信の効率は GraphQL
の方が上
GraphQL のメリット -クライアントはスキーマをもとに、 欲しいフィールドだけをリクエストできる -リレーションがある値は一度で取得できる -スキーマをもとに開発するので型の不一致が 起きない
強い型付けが採用されている - パラメータの定義には、スキーマ 定義言語(SDL)が使用されてい る - クライアントに公開されるすべて のAPIはSDLで記述されている
GraphQL のデメリット - クエリが複雑になる可能性 - クエリ伝播の問題につながるかもしれ ない - 学習の難しさ -
特にスキーマの設計
クエリ伝播の問題、スキーマ設計の難しさ query { user(id: 1){ id name address{ street city
history{ people awards{ year{ awardName personName } } sample{ sample sample sample } sample{ sample
クエリ伝播の問題、スキーマ設計の難しさ query { user(id: 1){ id name address{ street city
history{ people awards{ year{ awardName personName } } sample{ sample sample sample } sample{ sample スキーマを把握していないと、サーバー にとって非常に時間のかかる処理のクエ リを送ってしまう可能性がある
GraphQL サーバを立てよう - gqlgen を使ってサーバ 立ててみた - request から respons
まで
https://qiita.com/Keyl0ve/items/e88b83c13fb86b7c9908 GraphQL、gqlgen を使って サーバ を立てる
終わりに GraphQL、REST 使い分け の判断が重要
Thanks for listening !! Twitter: Keyl0ve_