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
280
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
14
O básico que ainda deveríamos entender sobre Unicode e encondings
thicolares
0
300
The pragmatic agilist
thicolares
0
320
The Pragmatic Agilist
thicolares
0
40
Domain-Driven Design com PHP
thicolares
0
370
Other Decks in Technology
See All in Technology
今日からできる!簡単 .NET 高速化 Tips -2024 edition-
xin9le
7
4.5k
データベース03: 関係データモデル
trycycle
0
100
今さら聞けないDocker入門 〜 Dockerfileのベストプラクティス編
devops_vtj
21
5.9k
チームでロジカルシンキングに改めて向き合っている話 〜学習環境と実践⽅法〜
sansantech
PRO
3
3.3k
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Musicを例に~
otanet
0
320
認知症フレンドリーテックとスタックチャン
naokiuc
0
310
Google Cloud Next '24 Recap(Cloud Run/k8s)
mokocm
0
360
止まらないLinuxシステムを構築する_高信頼性クラスタ入門
koedoyoshida
3
2.1k
Azureの基本的な権限管理の勉強会
yhana
1
2.2k
BPStudyの200回を中心にIT業界を振り返る。そしてこれから
haru860
3
420
競技としてのKaggle、役に立つKaggle
yu4u
6
2.4k
個人のAWSアカウントをマルチ運用してみた
miura55
2
200
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
242
1.2M
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.1k
Mobile First: as difficult as doing things right
swwweet
217
8.6k
Debugging Ruby Performance
tmm1
70
11k
A better future with KSS
kneath
231
16k
GitHub's CSS Performance
jonrohan
1025
450k
Unsuck your backbone
ammeep
664
57k
What’s in a name? Adding method to the madness
productmarketing
PRO
17
2.7k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
8
3.4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
21
1.6k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
Faster Mobile Websites
deanohume
300
30k
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