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
350
FEMUG ABC
danvitoriano
2
110
Other Decks in Programming
See All in Programming
リセットCSSを1行消したらアクセシビリティが向上した話
pvcresin
4
520
ソースコード→AST→オペコード、の旅を覗いてみる
o0h
PRO
1
130
RailsTokyo 2026#4: AI様があれば、 Hotwireの弱点は消えるか?
naofumi
2
340
Sans tests, vos agents ne sont pas fiables
nabondance
0
130
過去のレビュー知見をSkillsで資産化した話
pkshadeck
PRO
1
2k
(Re)make Regexp in Ruby: Democratizing internals for the JIT
makenowjust
3
1.1k
書籍「ユーザーストーリーマッピング」が私のバイブル
asumikam
4
490
Kubernetesを使わない環境にもCloud Nativeなデプロイを実現する / Enabling Cloud Native deployments without the complexity of Kubernetes
linyows
3
410
ついに来た!本格的なマルチクラウド時代の Google Cloud
maroon1st
0
440
クラウドネイティブなエンジニアに向ける Raycastの魅力と実際の活用事例
nealle
2
260
いつか誰かが、と思っていた フロントエンド刷新5年間の実践知
kiichisugihara
1
280
Spec-Driven Development with AI Agents (Workshop, May 2026)
antonarhipov
3
370
Featured
See All Featured
AI Search: Where Are We & What Can We Do About It?
aleyda
0
7.4k
Claude Code どこまでも/ Claude Code Everywhere
nwiizo
65
55k
Fashionably flexible responsive web design (full day workshop)
malarkey
408
66k
Statistics for Hackers
jakevdp
799
230k
Measuring Dark Social's Impact On Conversion and Attribution
stephenakadiri
2
190
Money Talks: Using Revenue to Get Sh*t Done
nikkihalliwell
0
220
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
0
510
Done Done
chrislema
186
16k
HDC tutorial
michielstock
2
660
Groundhog Day: Seeking Process in Gaming for Health
codingconduct
0
180
Building the Perfect Custom Keyboard
takai
2
760
VelocityConf: Rendering Performance Case Studies
addyosmani
333
25k
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