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
130
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
39
Workshop JSFP - SEMCOMP 2021
anabastos
0
210
Clojure é um Java melhor que Java - Codecon 2021
anabastos
0
86
Clojure 101 - Criciuma Dev
anabastos
0
270
TDC POA - GraphQL
anabastos
1
230
TDC Porto Alegre 2019 - JS Funcional com Ramda
anabastos
0
170
BackEndSP - GraphQL
anabastos
0
180
Git & Github - RLadies
anabastos
1
180
Programaria Summit - Performance FrontEnd
anabastos
1
170
Other Decks in Programming
See All in Programming
業務ツールとして使うPostman
msys75
0
110
Site Reliability Engineering for GMO
pyama86
8
1.1k
Native Federation: The Future of Micro Frontends in Angular
manfredsteyer
PRO
0
110
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
9
4.3k
Balkan Ruby 2024 — How and why to run SQLite on Rails in production
fractaledmind
0
100
Apache Hive 4 on Treasure Data
ryukobayashi
1
420
大規模UIKitベースアプリへのTCAの段階的導入/gradual-adoption-of-tca-in-a-large-scale-uikit-based-app
takehilo
2
210
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
7
990
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
130
Hanami and htmx
bkuhlmann
0
230
VS Code をプロダクトにどう取り込むか
onomax
1
740
Fragment Composition of GraphQL
quramy
13
1.5k
Featured
See All Featured
Creatively Recalculating Your Daily Design Routine
revolveconf
211
11k
Become a Pro
speakerdeck
PRO
13
4.6k
The Mythical Team-Month
searls
217
42k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
The Pragmatic Product Professional
lauravandoore
26
5.8k
Docker and Python
trallard
35
2.7k
Designing for humans not robots
tammielis
247
25k
Rebuilding a faster, lazier Slack
samanthasiow
74
8.2k
Web Components: a chance to create the future
zenorocha
306
41k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
21
1.6k
Agile that works and the tools we love
rasmusluckow
325
20k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
242
1.2M
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