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
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
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
430
Modelos de Maturidade de Times de Alta Performance
danvitoriano
1
110
Google Material Design
danvitoriano
3
360
FEMUG ABC
danvitoriano
2
120
Other Decks in Programming
See All in Programming
はてなアカウント基盤 State of the Union
cockscomb
1
1.3k
ローカルLLMでどこまでコードが書けるか -縮小版 / How much code can be written on a local LLM Shortened
kishida
2
190
PHP に部分適用が来るぞ!……ところで何それ?おいしいの? #phpcon / phpcon-2026
shogogg
0
250
鹿野さんに聞く!『TypeScriptコードレシピ集』で磨く実践力
tonkotsuboy_com
4
1.1k
LaravelLive Japan の裏方のすべて — 第188回 PHP勉強会@東京 (2026-06-24)
suguruooki
2
150
Honoでのサプライチェーン侵害対策 〜 3つのライブラリに学ぶ
yusukebe
7
1.9k
コーディングルールの鮮度を保ちたい for SRE NEXT 2026 / keep-fresh-go-internal-conventions-sre-next-2026
handlename
0
140
ローカルLLMでどこまでコードが書けるか -拡張版 / How much code can be written on a local LLM Extended
kishida
12
4.8k
ビデオ通話が繋がる0.2秒で何が起きているのか
supurazako
2
150
AI時代、エンジニアはどう育つのか -未経験エンジニアの成長を間近で見て考えたこと-
thasu0123
0
130
AIを活用したE2Eテスト実装効率化のあゆみ / ebisu-mobile-14-kotetu
kotetuco
0
170
エンジニア向け会社紹介/Findy Company Profile
findyinc
6
360k
Featured
See All Featured
Building a A Zero-Code AI SEO Workflow
portentint
PRO
0
630
Ethics towards AI in product and experience design
skipperchong
2
330
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
133
19k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
254
22k
AI in Enterprises - Java and Open Source to the Rescue
ivargrimstad
0
1.4k
The Impact of AI in SEO - AI Overviews June 2024 Edition
aleyda
5
1.1k
Paper Plane (Part 1)
katiecoart
PRO
1
9.7k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
23k
Deep Space Network (abreviated)
tonyrice
0
230
The Art of Programming - Codeland 2020
erikaheidi
57
14k
Testing 201, or: Great Expectations
jmmastey
46
8.2k
Mozcon NYC 2025: Stop Losing SEO Traffic
samtorres
1
390
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