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
3
280
Introdução ao GraphQL
Apresentada no Meetup React SP no Cubo em São Paulo.
Dan Vitoriano
December 12, 2017
Tweet
Share
More Decks by Dan Vitoriano
See All by Dan Vitoriano
Produtos & Agilidade na Visão Dev
danvitoriano
1
390
Modelos de Maturidade de Times de Alta Performance
danvitoriano
1
83
Google Material Design
danvitoriano
3
330
FEMUG ABC
danvitoriano
2
99
Other Decks in Programming
See All in Programming
マイコンでもRustのtestがしたい その2/KernelVM Tokyo 18
tnishinaga
2
2.3k
オープンセミナー2025@広島LT技術ブログを続けるには
satoshi256kbyte
0
120
tool ディレクティブを導入してみた感想
sgash708
1
150
AHC051解法紹介
eijirou
0
610
Flutterと Vibe Coding で個人開発!
hyshu
1
260
SOCI Index Manifest v2が出たので調べてみた / Introduction to SOCI Index Manifest v2
tkikuc
1
100
なぜ今、Terraformの本を書いたのか? - 著者陣に聞く!『Terraformではじめる実践IaC』登壇資料
fufuhu
4
650
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
140
実践 Dev Containers × Claude Code
touyu
1
240
サーバーサイドのビルド時間87倍高速化
plaidtech
PRO
0
410
Constant integer division faster than compiler-generated code
herumi
2
690
あまり知られていない MCP 仕様たち / MCP specifications that aren’t widely known
ktr_0731
0
300
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
53
8.8k
Practical Orchestrator
shlominoach
190
11k
A Tale of Four Properties
chriscoyier
160
23k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Agile that works and the tools we love
rasmusluckow
329
21k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
480
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
The Cult of Friendly URLs
andyhume
79
6.5k
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