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
68
Workshop JSFP - SEMCOMP 2021
anabastos
0
240
Clojure é um Java melhor que Java - Codecon 2021
anabastos
0
130
Clojure 101 - Criciuma Dev
anabastos
0
290
TDC POA - GraphQL
anabastos
1
240
TDC Porto Alegre 2019 - JS Funcional com Ramda
anabastos
0
210
BackEndSP - GraphQL
anabastos
0
200
Git & Github - RLadies
anabastos
1
210
Programaria Summit - Performance FrontEnd
anabastos
1
200
Other Decks in Programming
See All in Programming
15分で学ぶDuckDBの可愛い使い方 DuckDBの最近の更新
notrogue
3
510
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
810
Kotlinの開発でも AIをいい感じに使いたい / Making the Most of AI in Kotlin Development
kohii00
5
1.3k
PEPCは何を変えようとしていたのか
ken7253
2
230
ソフトウェアエンジニアの成長
masuda220
PRO
12
2.1k
Rubyで始める関数型ドメインモデリング
shogo_tksk
0
140
技術を改善し続ける
gumioji
0
120
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
1
210
Better Code Design in PHP
afilina
0
170
Djangoにおける複数ユーザー種別認証の設計アプローチ@DjangoCongress JP 2025
delhi09
PRO
4
470
React 19アップデートのために必要なこと
uhyo
8
1.5k
メンテが命: PHPフレームワークのコンテナ化とアップグレード戦略
shunta27
0
300
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
40
2.5k
How to Think Like a Performance Engineer
csswizardry
22
1.4k
Documentation Writing (for coders)
carmenintech
67
4.6k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Bootstrapping a Software Product
garrettdimon
PRO
306
110k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
The Cost Of JavaScript in 2023
addyosmani
47
7.4k
How GitHub (no longer) Works
holman
314
140k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
A Tale of Four Properties
chriscoyier
158
23k
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