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
Introdução ao GraphQL
Search
Dan Vitoriano
December 12, 2017
Programming
300
3
Share
Introdução ao GraphQL
Apresentada no Meetup React SP no Cubo em São Paulo.
Dan Vitoriano
December 12, 2017
More Decks by Dan Vitoriano
See All by Dan Vitoriano
Produtos & Agilidade na Visão Dev
danvitoriano
1
420
Modelos de Maturidade de Times de Alta Performance
danvitoriano
1
110
Google Material Design
danvitoriano
3
360
FEMUG ABC
danvitoriano
2
110
Other Decks in Programming
See All in Programming
oxlintはeslint/typescript-eslintを置き換えられるのか
shomafujita
2
310
Spec-Driven Development with AI-Agents: From High-Level Requirements to Working Software
antonarhipov
2
440
PHPで使える日時の表現と、その知り方 #frontend_phpcon_do
o0h
PRO
0
180
IBM Bobを活用したレガシーアプリの最新化
oniak3ibm
PRO
1
160
ローカルLLMを使ってB2Bサービスを作っていての学び
yaotti
0
110
Spec Driven Development | AI Summit Lisbon
danielsogl
PRO
0
130
ふつうのFeature Flag実践入門
irof
7
3.5k
Java × distroless で 軽量なコンテナイメージを / Java on Distroless
contour_gara
0
470
Lessons from Spec-Driven Development
simas
PRO
0
130
Old Dog, New Tricks: The Java 25 Reinvention - JNation
bazlur_rahman
0
140
AIチームを指揮するOSS「TAKT」活用術 / How to Use “TAKT,” an OSS Tool for Orchestrating AI Teams
nrslib
6
810
作って学ぶ、 JSX (TSX) ランタイムの基本
syumai
7
1.5k
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
16k
Code Review Best Practice
trishagee
74
20k
Marketing to machines
jonoalderson
1
5.3k
Producing Creativity
orderedlist
PRO
348
40k
Building Adaptive Systems
keathley
44
3k
Rebuilding a faster, lazier Slack
samanthasiow
85
9.5k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
helenjbeal
1
210
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
marketingsoph
0
160
What the history of the web can teach us about the future of AI
inesmontani
PRO
1
600
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
11
930
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
aleyda
1
2k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
szymonslowik
1
1.1k
Transcript
GraphQL A Graph Query Language to your API Danilo Vitoriano
Meetup React SP @Cubo.Network Dezembro 2017
Baseado na apresentação GraphQL & Relay de @zetavg
Introdução
API "Application Programming Interface” “Interface de Programação de Aplicativos"
RESTful A evolução da API “Representation State Transfer” “Transferência de
Estado Representacional”
/api/posts.json?cover=true&include=author,comments,avatar REST API da bagunça
A Solução
GraphQL Uma linguagem para consulta através de Grafos
Grafo Conjunto onde os elementos são unidos por um arco
None
None
Breve História • 2012 - Utilizada pelo app mobile do
Facebook • 2015 - Lançada publicamente • 2016 - GitHub usa GraphQL para APIs públicas
2017 Assunto de maior interesse da React Conf Brasil
Fotos: Leandro Godoi Sashko Stubailo Apollo James Bailey Meteor Raphael
Costa Pipefy
Quem usa http://graphql.org/users/
Bibliotecas https://github.com/chentsulin/awesome-graphql
Ecossistema
2017 GraphQL & Relay re-licenciados sob Licença MIT
Visão Geral
Todos os dados da sua aplicação podem ser representados como
um grafo
None
Um subgrupo do grafo é utilizado para montar uma
Interface do Usuário (UI)
None
None
None
None
Conceitos Básicos de GraphQL
Consulta (Query) Básica
• Comece selecionando os campos na raiz da “consulta"
• Consulta aninhadas
Árvore de Consulta
• Cada consulta é uma árvore extraída do grafo
None
• Árvore da consulta
Tipos
• Receba o tipo de cada nó usando o metacampo
__typename
Documentando Tipos
Documentar os tipos de dados de cada nó facilita quando
você precisa consultar alguma informação
None
Argumentos
• Cada campo pode definir alguns argumentos nele
• Campos aninhados também possuem argumentos
Fragmentos
• Pré definido conjunto de campos como fragmento de
informação
Dados mutáveis com Mutation
• Use mutation ao invés de query, e coloque
dados nos argumentos
Resumo
http://graphql.org
• Descreva seus dados
• Pergunte pelo o que você deseja
• Receba resultados previsíveis
Bibliotecas Cliente Como consumo GraphQL?
Apollo GraphQL https://www.apollographql.com/
Relay https://facebook.github.io/relay/
Obrigado Danilo Vitoriano @dnvtrn Especialista em TI Foto: Leandro Godoi
reactconfbr.com.br
Foto por Rafael Ventura Apresentação no Cubo Network 12/12/2017