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
420
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
並列実装の現場、2ヶ月間実務でAIを使い倒したAIもPCも私も限界が近い
ming_ayami
0
130
AI 時代のソフトウェア設計の学び方
masuda220
PRO
29
13k
はてなアカウント基盤 State of the Union
cockscomb
0
670
セキュリティの専門家じゃなくてもできる。「セキュリティ意識」をアップデートして サプライチェーン攻撃への耐性を高めよう。
tk3fftk
5
920
肥大化するレガシーコードに立ち向かうためのインターフェース分離と依存の逆転 / JJUG CCC 2026 Spring
hirokunimaeta
0
610
「なぜそう決めたのか」を残し続ける仕組み ― Notion AI カスタムエージェント × Slack連携による設計判断の自動記録 - NIKKEI Tech Talk #47
niftycorp
PRO
0
230
AI時代のUIはどこへ行く?その2!
yusukebe
22
7.5k
正しくソフトウェアを作る、前提を疑うための認知の視点 / doubt-premise
minodriven
21
7k
Inside Stream API
skrb
1
770
作って学ぶ、 JSX (TSX) ランタイムの基本
syumai
7
1.7k
1B+ /day規模のログを管理する技術
broadleaf
0
110
Javaの型とAI時代に型が大事な理由 / java types and type in AI era
kishida
2
150
Featured
See All Featured
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
chikuwait
0
620
Odyssey Design
rkendrick25
PRO
2
710
Art, The Web, and Tiny UX
lynnandtonic
304
22k
技術選定の審美眼(2025年版) / Understanding the Spiral of Technologies 2025 edition
twada
PRO
118
120k
Visual Storytelling: How to be a Superhuman Communicator
reverentgeek
2
560
Agile Actions for Facilitating Distributed Teams - ADO2019
mkilby
0
210
Applied NLP in the Age of Generative AI
inesmontani
PRO
4
2.3k
Visualization
eitanlees
152
17k
The SEO identity crisis: Don't let AI make you average
varn
0
500
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
66
55k
Technical Leadership for Architectural Decision Making
baasie
3
420
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
659
62k
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