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 + Relay + Serverless
Search
텀블벅
November 10, 2017
Technology
370
2
Share
GraphQL + Relay + Serverless
필요한 리소스만을 요청하고 사용하는 API 만들기
텀블벅
November 10, 2017
Other Decks in Technology
See All in Technology
CloudFront VPCオリジンとVPC Latticeサービスの内部ALBをマルチアカウントで一元利用しよう
duelist2020jp
5
250
A Harness for Behaviour: how to get AI to generate code that does what we intend, or "TDD in the age of AI"
xpmatteo
0
470
テストコードのないプロジェクトにテストを根付かせる
tttol
0
210
開発を止めない CI/CD ~CI Visibilityによる継続的最適化~
pensuke628
0
130
組織の中で自分を経営する技術
shoota
0
190
電子辞書Brainをネットに繋げてみた(自力編)
raspython3
0
250
データ分析基盤の信頼を支える視点と設計
yuki_saito
1
720
はじめてのAI-DLC
yoshidashingo
2
590
Copilot CLI・IDE・Web・スマホで途切れない開発フローを目指して / One Copilot flow - CLI IDE Web Mobile
aeonpeople
1
1.1k
管理アカウント単一運用からAWS Organizationsに移行するの大変で滅
hiramax
0
270
Harnessing the Power of Mocks and Stubs in PHPUnit / #laravellivejp
asumikam
0
710
JEP 522 Deep Dive - G1 GC同期コスト削減によるスループット向上を徹底検証&解説
tabatad
1
200
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
515
110k
Balancing Empowerment & Direction
lara
6
1.1k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
12
1.1k
Chasing Engaging Ingredients in Design
codingconduct
0
200
The Cost Of JavaScript in 2023
addyosmani
55
9.9k
The Illustrated Children's Guide to Kubernetes
chrisshort
51
52k
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
sarafernandez
0
190
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
55k
The Impact of AI in SEO - AI Overviews June 2024 Edition
aleyda
5
1.1k
Mozcon NYC 2025: Stop Losing SEO Traffic
samtorres
1
240
HTML-Aware ERB: The Path to Reactive Rendering @ RubyCon 2026, Rimini, Italy
marcoroth
1
110
Lightning Talk: Beautiful Slides for Beginners
inesmontani
PRO
1
550
Transcript
GraphQL + Relay + Serverless ߅ഋध @ థ࠶ߢ
థ࠶ߢ "#$%&'()*+,-./01234 56
ਃೠ ܻࣗझ݅ਸ ਃೞҊ ࢎਊೞח API ٜ݅ӝ I
߄ҳפ ߄ҳפীӟ࢚ಿ ࢸݺ оѺ ߓ࣠࠺ ߓ࣠ࣗ 25,000 12,000 2,500 2,500
࢚ಿ
߄ҳפ ߄ҳפীӟ࢚ಿ ࢸݺ оѺ ߓ࣠࠺ ߓ࣠ࣗ 25,000 12,000 2,500 2,500
࢚ಿ ProductList Cart ShippingAddress ProductData ProductData
ProductList Cart ProductData ProductData ShippingAddress /carts/1 /products/1 /products/2 /shippingAddresses/1
/carts/1? fields=products,coupons,shipping_addr esses&products[images, descriptions] /carts/1? fields=products,coupons,shipping_addr esses&products[images[high,low]]&prod ucts[descriptions[reviews, contents]]
/carts_with_products_shipping_address_coupons /carts_with_products_recommendations /carts_with_products_videos /carts_with_products_newsletter_signups /carts_with_products_for_mobile /carts_with_products_for_tablets
None
None
None
None
BFF (soundcloud) Backends for Frontends
None
GraphQL A Query Language for API
{ me { name company } }
{ me { name: "߅ഋध" company: "థ࠶ߢ" } }
{ me { name company hobby } }
{ me { name: "߅ഋध" company: "థ࠶ߢ" hobby: "୷ҳ" }
}
Query REST GET method
REST GET /me { name: "߅ഋध", company: "థ࠶ߢ", hobby: "୷ҳ",
favoriteColor: "ی࢝", country: "ೠҴ", conference: "playnode 2017", cloudProvider: "IBM", age: "?^^^^", address: "??????????", cardNumber: "@#$D@#$#$%#$FD@#$@#" }
GraphQL { user (id: "1") { name company } }
GraphQL { user { name: "chulsoo" company: "younghee co." }
}
ProductList Cart ProductData ProductData ShippingAddress /carts/1 /products/1 /products/2 /shippingAddresses/1 REST
ProductList Cart ProductData ProductData ShippingAddress { cart { products {
imageUrl description price shippingCost } shippingAddress } } POST /graphql GraphQL
None
None
None
None
Type System ⚙⚙⚙
Types type Query { cart: Cart } type Cart {
products: [Product]! shippingAddress: String! } type Product { imageUrl: String! description: String! price: Int! shippingCost: Int! } { cart { products { imageUrl description price shippingCost } shippingAddress } }
Types type Query { cart: Cart } type Cart {
products: [Product]! shippingAddress: String! } type Product { imageUrl: String! description: String! price: Int! shippingCost: Int! } { cart { products { imageUrl description price shippingCost } shippingAddress } }
Types type Query { cart: Cart } type Cart {
products: [Product]! shippingAddress: String! } type Product { imageUrl: String! description: String! price: Int! shippingCost: Int! } { cart { products { imageUrl description price shippingCost } shippingAddress } }
Types type Query { cart: Cart } type Cart {
products: [Product]! shippingAddress: String! } type Product { imageUrl: String! description: String! price: Int! shippingCost: Int! } { cart { products { imageUrl description price shippingCost } shippingAddress } }
Types type Query { cart: Cart } type Cart {
products: [Product]! shippingAddress: String! } type Product { imageUrl: String! description: String! price: Int! shippingCost: Int! } { cart { products { imageUrl description price shippingCost } shippingAddress } }
Mutation REST POST/PUT/PATCH/DELETE Method
Mutation mutation { createProduct( input: { description: "ݧ ৩" price:
50000 } ) } { product { Price } }
؊ب ݈Ҋ ؏ب ݈Ҋ ٯ ۄо ਗೞח ч݅ NO
࠺ऴ ֎ਕ ਃ ୭ࣗച R
None
None
Relay
Relay
Relay
Relay
Relay
Relay
Relay
id? GraphQL Relay
id? id GraphQL Relay
GraphQL Relay
GraphQL Relay
GraphQL Relay 1
GraphQL Relay 1 1
None
None
Server
Serverless
f(⚡) Functions ⚡⚡ ⚡⚡
Serverless = function-as-a-service?
Serverless Pattern / Architecture
ࢲߡ ҙܻ ݽٚѦ ۄ٘ীѱ ݐӝ ☁ /provisioning, OS patching/upgrading, scaling,
self-healing, … /
Pricing • IBM Cloud functions • 500ms प೯ • 512MB
@ 5,000,000 ਃ പࣻ • $14.45
Pricing • प೯ दр ⏰ • ݫݽܻ ࣗ࠺ • ਃ
പࣻ ⚡
“ࢲߡ” ೡ ݽٚѦ ۄ٘ীѱ ݐӝ ☁ /API Gateway, Message Queue,
Search, Analytics, Authentication, … /
“ࢲߡ”ٜਸ ೣࣻ۽ োѾೞ ⚡ ⚡ ⚡ ⚡ ⚡ ⚡
None
GraphQL API Gateway Cart Product Search Message Queue Object Storage
⚡ ⚡ ⚡ ⚡ ⚡ ⚡ ⚡ ⚡ ⚡ ⚡ Email Authentication
GraphQL + Relay + Serverless
tumblbug.workable.com ହઑੋ दب ӝࣿ ӝ߈ਸ ೣԋ ٜ݅ ࣗਝয ূפযܳ णפ.