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
Getting started with GraphQL
Search
Thiago Colares
November 24, 2017
Technology
0
340
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
27
O básico que ainda deveríamos entender sobre Unicode e encondings
thicolares
0
380
The pragmatic agilist
thicolares
0
370
The Pragmatic Agilist
thicolares
0
40
Domain-Driven Design com PHP
thicolares
0
420
Other Decks in Technology
See All in Technology
GCASアップデート(202506-202508)
techniczna
0
250
Product Management Conference -AI時代に進化するPdM-
kojima111
0
220
JuniorからSeniorまで: DevOpsエンジニアの成長ロードマップ
yuriemori
0
180
そのコンポーネント、サーバー?クライアント?App Router開発のモヤモヤを可視化する補助輪
makotot
4
530
あなたの知らない OneDrive
murachiakira
0
240
AIとTDDによるNext.js「隙間ツール」開発の実践
makotot
5
690
イオン店舗一覧ページのパフォーマンスチューニング事例 / Performance tuning example for AEON store list page
aeonpeople
2
290
Go で言うところのアレは TypeScript で言うとコレ / Kyoto.なんか #7
susisu
6
1.8k
R-SCoRe: Revisiting Scene Coordinate Regression for Robust Large-Scale Visual Localization
takmin
0
430
事業価値と Engineering
recruitengineers
PRO
1
220
ZOZOTOWNフロントエンドにおけるディレクトリの分割戦略
zozotech
PRO
17
5.4k
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
30k
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
53
7.7k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
How to Ace a Technical Interview
jacobian
279
23k
Code Reviewing Like a Champion
maltzj
525
40k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
Fireside Chat
paigeccino
39
3.6k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Building Applications with DynamoDB
mza
96
6.6k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
480
A Tale of Four Properties
chriscoyier
160
23k
BBQ
matthewcrist
89
9.8k
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