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 & beyond
Search
Felipe Luiz Soares
November 17, 2018
Technology
0
48
GraphQL & beyond
Felipe Luiz Soares
November 17, 2018
Tweet
Share
More Decks by Felipe Luiz Soares
See All by Felipe Luiz Soares
Writing unit tests with Jest using test best practices
felipesoares6
0
120
Comecei uma tarefa e olha no que deu!
felipesoares6
0
50
HTML + CSS
felipesoares6
1
140
THE MEANING OF LIFE FRONT-END USER EXPERIENCE AND EVERYTHING
felipesoares6
0
54
BEM
felipesoares6
0
68
Read-Search-Ask
felipesoares6
1
87
Other Decks in Technology
See All in Technology
データベース02: データベースの概念
trycycle
0
150
web-application-security
matsuihidetoshi
0
140
Azure Container Apps + Bicep 〜 こんな感じで運用しています
kaz29
2
450
自己改善からチームを動かす! 「セルフエンジニアリングマネージャー」のすゝめ
shoota
6
310
Cracking the KubeCon CfP
inductor
2
230
SPI原点回帰論:事業課題とFour Keysの結節点を見出す実践的ソフトウェアプロセス改善 / DevOpsDays Tokyo 2024
visional_engineering_and_design
4
1.9k
Oracle Cloud Infrastructure:2024年4月度サービス・アップデート
oracle4engineer
PRO
1
190
コードを書く隙間を見つけて生きていく技術/Findy 思考の現在地
fujiwara3
27
5.9k
開発生産性向上サービスを作るFindyが自分たちで開発生産性を爆上げした組織づくりの歩み / Findy's path to boosting its own development productivity 2024-04-17
ma3tk
3
630
DevOpsDays History and my DevOps story
kawaguti
PRO
9
2.4k
Tellus の衛星データを見てみよう #mf_fukuoka
kongmingstrap
0
170
VS CodeでAWSを操作しよう
smt7174
7
1.6k
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
7
1k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
357
22k
Build your cross-platform service in a week with App Engine
jlugia
225
17k
VelocityConf: Rendering Performance Case Studies
addyosmani
320
23k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
Unsuck your backbone
ammeep
663
57k
Building an army of robots
kneath
300
41k
The Illustrated Children's Guide to Kubernetes
chrisshort
31
46k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
21
1.6k
Rails Girls Zürich Keynote
gr2m
91
13k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
116
18k
Transcript
GRAPHQL & beyond @felipesoares_
why how when
@felipesoares6_ felipesoares6
None
None
None
None
GraphQL is a query language
& alternative to REST
None
+
graphs -> nodes -> edges
query language SELECT * FROM
type House { edge: Person } type Person { ...
}
why?
None
3 reasons
get just what you want
enables declarative data fetching
overfetching
underfetching
nice and smooth contracts
+ typed schemas + docs
playground
clients everywhere
only exposes a single endpoint
consume the same endpoint in != ways
how?
-> schema -> queries -> mutations -> resolvers -> responses
schema
type Query { users: [User!]!, user: User! }
type User { id: ID!, name: String, email: String }
schema -> queries -> mutations resolvers responses
queries
GET /users query { users { id, name, email }
}
mutations
POST /users mutation { createUser( name: “Felipeson”, email: “
[email protected]
” )
{ id } }
schema queries mutations -> resolvers responses
resolvers
resolvers = { Query: { users: () => getUsers(), user:
(_, { id }) => getUser(id), ???: () => fetch(‘api.com/top’) } }
schema queries mutations resolvers -> responses
responses
loading
“data”: { users: [ { id: “1”, name: “Felipe Soares”,
email: “
[email protected]
” } ] } query { users { id, name, email } }
“errors”: [ { “message”: “error”, “location”: … , “fields”: ...
} ] query { users { id, name, gender } }
how how
server-side bit.ly/2OYP9IS
prisma
data-base layer
None
application layer
None
client-side bit.ly/2zRBNUq
apollo
query
import gql from ‘graphql-tag’ import { Query } from ‘react-apollo’
const GET_USERS = gql` query { users { id, name,
email } }`
<Query query={GET_USERS}> {({ load, error, data }) => { ...
} </Query>
if (load) { return <Load load={load} /> }
if (data.users) { return <List items={data} /> }
if (error) { return <Error error={error} /> }
mutation
import gql from ‘graphql-tag’ import { Mutation } from ‘react-apollo’
const CREATE_USER = gql` mutation { createUser( name: “Felipeson”, email:
“
[email protected]
” ) { id, name, email } }`
<Mutation mutation={CREATE_USER}> {( createUser , { load, error, data })
=> { ... } </Mutation>
<div> ... <UserForm submit={createUser} /> </div>
when?
is difficult to close the API contracts
overfetching underfetching
consume the same endpoint in != ways
consuming != APIs
learn something new!
thanks! @felipesoares6_ felipesoares6 bit.ly/2OYP9IS bit.ly/2zRBNUq client-side server-side