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.5k
Gopher Enablement Internship
keyl0ve
0
760
Other Decks in Programming
See All in Programming
抽象データ型について学んだ
ryounasso
0
190
複雑なフォームを継続的に開発していくための技術選定・設計・実装 #tskaigi / #tskaigi2025
izumin5210
12
5.7k
DevDay2025-OracleDatabase-kernel-addressing-history
oracle4engineer
PRO
5
1.5k
OpenTelemetry + LLM = OpenLLMetry!?
yunosukey
2
260
rbs-traceを使ってWEARで型生成を試してみた After RubyKaigi 2025〜ZOZO、ファインディ、ピクシブ〜 / tried rbs-trace on WEAR
oyamakei
0
450
TypeScriptのmoduleオプションを改めて整理する
bicstone
4
380
Practical Domain-Driven Design - Workshop at NDC 2025
mufrid
0
120
Doma で目指す ORM 最適解
nakamura_to
1
160
Storybookの情報をMCPサーバー化する
shota_tech
3
1.6k
Feature Flag 自動お掃除のための TypeScript プログラム変換
azrsh
PRO
4
540
バランスを見極めよう!実装の意味を明示するための型定義 TSKaigi 2025 Day2 (5/24)
whatasoda
2
700
JSAI2025 RecSysChallenge2024 優勝報告
unonao
1
300
Featured
See All Featured
Building an army of robots
kneath
306
45k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
450
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Art, The Web, and Tiny UX
lynnandtonic
298
21k
Mobile First: as difficult as doing things right
swwweet
223
9.6k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
21k
Thoughts on Productivity
jonyablonski
69
4.7k
Side Projects
sachag
453
42k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
How STYLIGHT went responsive
nonsquared
100
5.6k
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_