Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Getting started with GraphQL
Search
Thiago Colares
November 24, 2017
Technology
0
310
Getting started with GraphQL
The 4th Weekly company-internal Agilize DevTalk of November, 2017.
Thiago Colares
November 24, 2017
Tweet
Share
More Decks by Thiago Colares
See All by Thiago Colares
Functional programming: basic concepts you can start using today
thicolares
0
22
O básico que ainda deveríamos entender sobre Unicode e encondings
thicolares
0
340
The pragmatic agilist
thicolares
0
350
The Pragmatic Agilist
thicolares
0
40
Domain-Driven Design com PHP
thicolares
0
400
Other Decks in Technology
See All in Technology
GitHub Actions의 다양한 기능 활용하기 - GitHub Universe '24 Recap
outsider
0
480
Replit Agent
kawaguti
PRO
2
180
ミスが許されない領域にAIを溶け込ませる プロダクトマネジメントの裏側
t01062sy
8
8.2k
B10-ひと目でわかる(といいなぁ)Microsoft Purview
seafay
PRO
0
350
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
5
52k
Will Positron accelerate us?
lycorptech_jp
PRO
1
120
2024/11/29_失敗談から学ぶ! エンジニア向けre:Invent攻略アンチパターン集
hiashisan
0
430
アジャイルテストの4象限で考える プロダクト開発の品質への向き合い方
nagano
1
800
AWS認定試験の長文問題を早く解くコツ
keke1234ke
0
170
店舗向けSaaSにおける 顧客要望活用の実践アプローチ(20241205_pmconf)
yujirooo
0
3.1k
EthernetベースのGPUクラスタ導入による学びと展望
lycorptech_jp
PRO
0
580
MediaPipe と ML Kit ってどう ちがうの? / What is the difference between MediaPipe and ML Kit?
yanzm
0
520
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
49
11k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Measuring & Analyzing Core Web Vitals
bluesmoon
4
160
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
How To Stay Up To Date on Web Technology
chriscoyier
789
250k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.7k
Docker and Python
trallard
41
3.1k
Become a Pro
speakerdeck
PRO
25
5k
Imperfection Machines: The Place of Print at Facebook
scottboms
266
13k
The Language of Interfaces
destraynor
154
24k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Transcript
GETTING STARTED WITH GraphQL Agilize Cloud Accounting, 24/11/2017 Weekly company-internal
DevTalks
Hallo! I’M THIAGO COLARES Agile manager Full stack developer Open
source Co-founder @ Agilize Cloud Accounting @thicolares
1. DEFINE: GraphQL
WHAT IS GRAPHQL ◦ Declarative data fetching ◦ Alternative to
REST ◦ Single endpoint → responds to queries
/authors/<id> /authors/<id>/books /authors/<id>/followers 3 ENDPOINTS
query query query 1 SINGLE ENDPOINT
DEMO 1
2. CHARACTERISTICS
GraphQL TIMELINE ◦ Developed by Facebook on 2012 ◦ Presented
→ React.js Conf 2015 ◦ Is not for React Developers ◦ Other companies had the same initiative ◦ Netflix → Falcor ◦ Cousera → Now uses GraphQL
REST CHALLENGES ◦ Need for efficient data loading (mobile) ◦
Variety of different frontend frameworks ◦ Rapid feature development
GraphQL BENEFITS ◦ No mover over or underfetching ◦ Almost
non API if the interface changes ◦ Faster feedbacks cycles
INSIGHTFUL ANALYTICS ◦ Fine-grained info about what read data ◦
Evolving and deprecating API
3. KEY CONCEPTS
type Query { ... } type Mutation { ... }
type Subscription { ... } ROOT TYPE
query { User(id: 123) { name posts { title }
} } QUERY HTTP POST
{ "data": { "User": { "name": "Joston Muriel", "posts": [
{title: "Hello, it's me"} {title: "Lines in the sand"} ] } } } RESPONSE RESPONSE
SCHEMA ◦ Strong type system ◦ Schema as client-server contract
◦ Client and server can work independently ◦ Schema Definition Language
type Person { name: String! age: Int! } DEFINING SIMPLE
TYPES ! → required
type Person { name: String! age: Int! } ADDING A
RELATION type Post { title: String! author: Person! }
type Person { name: String! age: Int! posts: [Post!]! }
ADDING A HAS-MANY RELATION type Post { title: String! author: Person! }
DEMO 2
4. MUTATIONS
WRITING DATA WITH MUTATIONS ◦ A query too ◦ You
can ask for the returning fields ◦ Even nested ones
3 KINDS OF MUTATIONS ◦ creating new data ◦ updating
existing data ◦ deleting existing data
A MUTATION mutation { createPerson(name: "Bob", age: 36) { name
age } } Similar syntax. Mutation keyword. Special root field.
DEFINING A MUTATION type Mutation { createPerson(name: String!, age: String!)
Person! ... }
5. NODE EXAMPLE
DEMO 3
“ Nescit cedere
THANKS! Thiago Colares @thicolares