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 - ServerSide SP
Search
Ana Luiza Portello
July 04, 2018
Programming
1
140
Graphql - ServerSide SP
Ana Luiza Portello
July 04, 2018
Tweet
Share
More Decks by Ana Luiza Portello
See All by Ana Luiza Portello
FRONTIN | Elas Programam - Programação Funcional no Front-end
anabastos
0
89
Workshop JSFP - SEMCOMP 2021
anabastos
0
260
Clojure é um Java melhor que Java - Codecon 2021
anabastos
0
140
Clojure 101 - Criciuma Dev
anabastos
0
310
TDC POA - GraphQL
anabastos
1
260
TDC Porto Alegre 2019 - JS Funcional com Ramda
anabastos
0
240
BackEndSP - GraphQL
anabastos
0
220
Git & Github - RLadies
anabastos
1
230
Programaria Summit - Performance FrontEnd
anabastos
1
220
Other Decks in Programming
See All in Programming
5つのアンチパターンから学ぶLT設計
narihara
1
170
PipeCDのプラグイン化で目指すところ
warashi
1
280
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
840
ふつうの技術スタックでアート作品を作ってみる
akira888
1
870
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
490
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
160
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
730
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
220
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
270
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
1
260
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
390
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
290
Featured
See All Featured
Music & Morning Musume
bryan
46
6.6k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
GitHub's CSS Performance
jonrohan
1031
460k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Optimizing for Happiness
mojombo
379
70k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
The Cult of Friendly URLs
andyhume
79
6.5k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Transcript
ANA LUIZA BASTOS github.com/anabastos @naluhh @anapbastos Software Developer na Quanto
e cientista da computação da PUC-SP anabastos.me
JSLADIES fb.com/jsladiesbr twitter.com/jsladiessp meetup.com/JsLadies-BR/ LAMBDA.IO t.me/lambdastudygroup github.com/lambda-study-group/ meetup.com/Lambda-I-O-Sampa- Meetup/
GRAPHQL Construindo API's flexíveis e realtime com
VAMOS FALAR SOBRE REST
O QUE UMA RESTFULL API?
Representational State Transfer
Cliente Servidor HTTP URI
REQUISIÇÃO Cabeçalho Corpo RESPOSTA Cabeçalho Corpo
GET POST PUT DELETE PATCH HEAD TRACE OPTIONS
Songs Followers 1.239 Jovelli How I Feel Ana Luiza Lorem
Ipsum
HTTP GET Songs Followers Ana Luiza Lorem Ipsum users/123 RESPONSE
a { name: .., accountName: .., nickname: Ana Luiza, email: {..}, bio: Lorem Ipsum avatar: {..}, birthday: .., city: .., location: {..} ... }
HTTP GET Songs Followers Ana Luiza Lorem Ipsum users/123/posts RESPONSE
posts { { id: .. music: {..}, replies: {..}, likes: {..}, shares: {..}, … }, ... } Jovelli How I Feel
HTTP GET users/123/followers RESPONSE followers { { name: .., accountName:
.., Nickname: Vilmar, email: {..}, avantar: .. … }, ... } Songs 1.239 Jovelli How I Feel Ana Luiza Lorem Ipsum Followers
Followers 1.239 Jovelli How I Feel
FACEBOOK
“Ficamos frustrados com as diferenças entre os dados que queríamos
e as requisições que eram necessárias para obtê-los” Lee Byron
ENDPOINTS ENDPOINTS ENDPOINTS
OVERFETCHING
UNDERFETCHING
O QUE É GRAPHQL?
QUERY LANGUAGE
FACILITAR A CONSULTA DE DADOS
GRAPHQL desenvolvida em 2012 no FACEBOOK
OPEN SOURCE em 2015
JAVASCRIPT PYTHON RUBY CLOJURE PHP JAVA C# GO SCALA ERLANG
ELIXIR
None
POST endpoint graphql/
CORPO DA REQUEST { Os dados explícitos do que eu
quero :) } POST endpoint graphql/
“EDGE”
QUERIES MUTATIONS SUBSCRIPTIONS
HTTP POST graphql/ RESPONSE data { userName: .., avatar: ..,
bio, followers [ {avatar: ..}, .. ] posts [ {artist: …, name:} ] } BODY query getUser { userName avatar bio followers(first: 3) { avatar } posts { artist name }
CORE CONCEPTS
TYPE SYSTEM QUERY LANGUAGE SCHEMA
QUERY LANGUAGE
QUERIES
RESPONSE [ { ‘name’: “ABBA”, }, { ‘name’: “Amy Winehouse”
, }, { ‘name’: “Ana Carolina” , } ... ] CORPO query getArtists { artists { name } }
HIERÁRQUICO
RESPONSE { name: “Charlie Brown Jr.” albums: { { title:
“Preço Curto Prazo Longo”, release_year: 1999 tracks { { title: “União” },{ title: “Te levar” }, .. } } } REQUEST query getArtists { artists { name albums { title release_year tracks { title } } } }
ARGUMENTOS
RESPONSE { name: “Carolina de Oliveira Lourenço”, Bio: “Cantora e
Compositora Brasileira” age: 24 } REQUEST { artist(name: “MC Carol”) { name bio age } }
VARIÁVEIS
RESPONSE { user { name: “Ana” } } REQUEST query
getUserNameById( $userId: String) { user(id: $userId): { name } } VARIABLE { userId: ‘21312321’ }
FILTER
RESPONSE [{...},{...},{...},{...},{...} ,{...},{...},{...},{...},{...}] REQUEST user { followers( first: 10, orderBy:
{ field: CREATED_AT, direction: DESC }){ name } }
PAGINATION
RESPONSE [{...},{...},{...},{...},{...} ,{...},{...},{...},{...},{...}] REQUEST user { followers( first: 10, offset:
10){ name totalCount } Posts (first: 5, offset: 0) }
@skip(if: condition) @include(if: condition)
MUTATIONS
POST PATCH PUT
VOCÊ CRIA A SUA AÇÃO
inactivateComment removeComment pinComment editComment flagComment
REQUEST mutation deletePost{ deletePost(id: “123”){ content } } VARIABLE {
content { .. } }
RESPONSE { ‘data’ { ‘token’: “12345” } } REQUEST mutation
authUser($user: User) { authUser(user: $user){ token } } VARIABLE { user { ... } }
SUBSCRIPTION
REALTIME
Permite que o servidor envie dados aos clients quando um
evento específico acontece no backend.
EVENT-DRIVEN
Mutations definem uma série de ações que mudam seus dados.
Subscriptions definem uma série de eventos que você pode se inscrever(subscribe) pra quando os dados mudam.
• Notificações • Mensagens • Live Feed
Independente de meio de transporte • WebSockets • ZeroMQ ou
MQTT • Enviar POST pra um callback
REQUEST subscription { subscribeToComment (filter: { mutation_in : [CREATED] }){
comment { content author { username } } } } RESPONSE { “data”: { comment { content: “Nossa”, author { username: “Ana” } } } } RESPONSE { “data”: { comment { content: “Eita”, author { username: “Joao” } } } }
WEBHOOK
Webhooks são chamados assim que uma certa ação é efeita,
recebendo um payload com os dados que você precisa.
None
TYPE SYSTEM
ID BOOLEAN FLOAT STRING INT
const schema = buildSchema {` type Query { id: ID
paid: Boolean price: !Float basket: [String] tax: Int } `}
OBJECT TYPES
type Boleto { id: ID value: Float CPF: String expiration:
Date status: Status } enum Status { PAID WAITING EXPIRED }
type Talk { id: ID title: String description: String published:
Date speaker: Speaker event: Event } type Speaker { id: ID firstName: String lastName: String talks: [Talks] } type Event { id: ID name: String location: String talks: [Talks] }
Type schemes com tipos de dados dentro de tipos de
dados dentro de tipos de dados
None
VERSIONAMENTO
type Boleto { id: ID value: Float CPF: String @deprecated
expiration: Date status: Status }
SCHEMAS
“SCHEMAS DRIVEN”
SCHEMAS DESCREVEM OS GRAFOS
DESCREVEM O CONTRATO ENTRE O FRONT E O BACK
TYPE SYSTEM QUERY LANGUAGE SCHEMA
CLIENT SERVER GRAPHQL DATA RESOLVE BODY JSON { query: {..}
variables:{..} } { data: {..} errors:{..} }
FUNÇOES RESOLVER
CADA EDGE TEM UMA FUNÇÃO RESOLVER QUE LIDA COM OS
DADOS
SERVER GRAPHQL RESTfull Api AWS Lambda SOAP Service MONGODB HTTP
HTTP SOAP TCP/IP
GRAPHiQL
None
MSGS CLARAS SYNTAX HIGHLIGHT AUTO COMPLETE AUTO DOCUMENTAÇÃO
REST MORREU?
NÃO.
MOTIVOS P/ USAR GRAPHQL EM PRODUÇÃO
• DIFERENTES CLIENTES: Há a necessidade de criar várias versões
de dados diferentes para múltiplos clientes. • PREPARAR DADOS: Há muito esforço do server preparar os dados e do cliente para parsea-los. • LINKAR DADOS: Quando os dados mudam com muita frequência e precisam estar linkados sempre.
MOTIVOS P/ NÃO USAR GRAPHQL
• HYPE: Achar hype, gostar do stack do facebook ou
“usamos ReactJS”. • HTTP É ANTIGO: Consistencia, Caching, Status Code. • TOO NORMALIZED: Tenho muitas relações no meu banco de dados.
GRAPHQL NÃO VAI RESOLVER SEUS PROBLEMAS DE DESIGN DE API
GOSTEI
PROCURE SOBRE DATA LOADER
APOLLO OU RELAY
GRAPHQL É TOP
howtographql.com/ graphql.org/learn/ github.com/chentsulin/awesome-graphql graphql-weekly.com fun fun function graphql series
meetup.com/ReactJS-SP/ meetup.com/GraphQL-Brasil t.me/reactjs_br t.me/graphql
OBRIGADA :) speakerdeck.com/anabastos
DÚVIDAS?
[email protected]
speakerdeck.com/anabastos