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
70
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
220
BackEndSP - GraphQL
anabastos
0
210
Git & Github - RLadies
anabastos
1
210
Programaria Summit - Performance FrontEnd
anabastos
1
200
Other Decks in Programming
See All in Programming
color-scheme: light dark; を完全に理解する
uhyo
7
510
kintone開発を効率化するためにチームで試した施策とその結果を大放出!
oguemon
0
340
Lambdaの監視、できてますか?Datadogを用いてLambdaを見守ろう
nealle
2
760
Rubyと自由とAIと
yotii23
6
1.9k
たのしいSocketのしくみ / Socket Under a Microscope
coe401_
8
1.4k
ナレッジイネイブリングにAIを活用してみる ゆるSRE勉強会 #9
nealle
0
170
The Clean ArchitectureがWebフロントエンドでしっくりこないのは何故か / Why The Clean Architecture does not fit with Web Frontend
twada
PRO
56
17k
Amazon Bedrockマルチエージェントコラボレーションを諦めてLangGraphに入門してみた
akihisaikeda
1
160
仕様変更に耐えるための"今の"DRY原則を考える
mkmk884
9
3.3k
PHPのバージョンアップ時にも役立ったAST
matsuo_atsushi
0
230
『テスト書いた方が開発が早いじゃん』を解き明かす #phpcon_nagoya
o0h
PRO
9
2.6k
変化の激しい時代における、こだわりのないエンジニアの強さ
satoshi256kbyte
0
110
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
115
51k
It's Worth the Effort
3n
184
28k
Automating Front-end Workflow
addyosmani
1369
200k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Being A Developer After 40
akosma
89
590k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.3k
Code Reviewing Like a Champion
maltzj
521
39k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Practical Orchestrator
shlominoach
186
10k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
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? saq@anabastos.me speakerdeck.com/anabastos