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
[FRONT IN VALE - 2019] - INTRODUÇÃO AO MARAVIL...
Search
Kamila de fatima santos oliveira
August 10, 2019
Programming
1
120
[FRONT IN VALE - 2019] - INTRODUÇÃO AO MARAVILHOSO MUNDO DO GRAPHQL
Kamila de fatima santos oliveira
August 10, 2019
Tweet
Share
More Decks by Kamila de fatima santos oliveira
See All by Kamila de fatima santos oliveira
Quarkus-Club-criando-arquiteturas-escalaveis-na-pratica
kamilahsantos
1
25
System design 101 - Java day Noroeste
kamilahsantos
2
80
[Thasfin + Orange Juice na CPBR] Minha aplicação virou um monstrinho e agora ?
kamilahsantos
1
51
Minha aplicação virou um monstrinho e agora?
kamilahsantos
2
100
Spring + Localstack : usando aws de forma gratuita
kamilahsantos
2
210
Hacktoberfest DevsJavaGirl
kamilahsantos
0
92
[We are developers Java developer day ] - I will have to refactor ! And now ? Refactoring Techniques in Java
kamilahsantos
1
110
[Codecon summit ] Minha aplicação virou um monstrinho e agora ?
kamilahsantos
3
170
[Semana de SI - each usp] Desmistificando a carreira em tecnologia: de estágio a liderança técnica
kamilahsantos
0
83
Other Decks in Programming
See All in Programming
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
120
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
900
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.3k
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
590
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
87
29k
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
150
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
490
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
130
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
170
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
220
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
120
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
150
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Scaling GitHub
holman
460
140k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
A Modern Web Designer's Workflow
chriscoyier
695
190k
The Pragmatic Product Professional
lauravandoore
35
6.7k
How to train your dragon (web standard)
notwaldorf
95
6.1k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Transcript
Maravilhoso mundo do Graphql INTRODUÇÃO AO
@kamila_code kamilahsantos /kamila-santos-oliveira @kamilah_santos Kamila Santos, 21 anos Developer @devsjavagirl
Quem é esse tal de Graphql Linguagem de consulta baseada
em grafos, criada pelo Facebook em 2012
Quem é esse tal de Graphql O retorno dos dados
é totalmente previsível, e tornou open-source em 2015.
Quem usa Graphql?
É tipo Rest? NÃO
É tipo Rest? Em Rest, ao realizar buscas, temos vários
endpoints, no GraphQl só temos um endpoint para acessar os dados do servidor
É tipo Rest? Em Rest temos estrutura de dados fixa,
o que faz com que sempre traga mais dados do que o necessário
É tipo Rest? No Graphql trazemos exatamente o que precisamos
da nossa API através da construção de queries.
Como funciona?
Como funciona? Query language, server-side runtime para execução dessas queries
a partir da definição de schema (tipagem)
Como funciona? Não está vinculado a nenhum banco de dados
específico ou mecanismo de armazenamento.
Como funciona? Um service é criado definindo types e fields
e depois criando funções para cada type e cada field
Como funciona?
Como funciona?
Queries? Com o seu service em execução, podemos enviar queries
para serem validadas e executadas.
Queries? Um query é recebida e verificada para que somente
retorne os types e fields informados na query e depois é executada
Queries?
Queries?
Fields? As queries solicitam fields específicos em objetos .
Fields?
Fields? As queries em Graphql permitem percorrer objetos relacionados e
seus campos em uma única solicitação
Fields?
Fields?
Arguments? Além de atravessar pelos objetos e campos podemos passar
argumentos na busca desses dados
Arguments?
Arguments?
Arguments? Podemos passar argumentos para campos escalares, para fazer conversões
de dados no server em vez de cada client individualmente.
Arguments?
Arguments?
Aliases Os fields do objeto do resultado correspondem ao nome
do campo na consulta, não seria possível consultar diretamente o mesmo campo com argumentos diferentes.
Aliases Para resolver isto, podemos criar aliases, para renomear o
resultado do campo para algo mais descritivo que deseje.
Aliases
Aliases
Fragments Imagine uma situação que você tem duas pessoas e
quer exibi-las lado a lado junto com seus amigos, precisaríamos repetir os campos um para cada lado da comparação?
Fragments NÃO. Com os fragments podemos construir conjuntos de campos
e inclui-los nas consultas necessárias
Fragments
Fragments
Fragments
Fragments A ideia dos fragments é recomendada em situações em
que precisamos dividir os requisitos de dados do aplicativo em parte menores, quando precisa combinar componentes da UI com vários fragments diferentes numa busca inicial.
Usando variables em fragments Temos a possibilidade de usar variáveis
nos fragments das nossas consultas
Usando variables em fragments
Usando variables em fragments
Usando variables em fragments
Variáveis Para argumentos dinâmicos, o client pode precisar manipular os
arquivos em runtime e seriariza-la em formato em Graphql.
Variáveis O Graphql vai pegar esses dados e passar como
um dicionário separado.
Variáveis Substitua o valor estático na consulta por $variableName
Variáveis Declarar $variableNamecomo uma das variáveis aceitas pela consulta
Variáveis Passe variableName: value no dicionário de variáveis separado, específico
do transporte (geralmente JSON)
Variáveis
Variáveis
Directives Podem ser anexadas a um field ou inclusão de
fragment, podendo alterar a execução da consulta da forma que o servidor desejar
Directives @include(if: Boolean) Inclui somente se o resultado do campo
é true @skip(if: Boolean) pula o argumento se o elemento for true
Directives
Directives
Directives
Mutations? Da mesma forma que as Queries, nas Mutations podemos
passar campos aninhados
Mutations?
Mutations?
Mutations?
Schemas and Types
Schemas and Types
Interfaces Abstrai um conjunto de campos para serem implementados
Interfaces
Interfaces
Interfaces
Servers Clients
Referências https://graphql.org/learn https://graphql.org/code/#server-libraries https://graphql.org/code/#graphql-clients https://tableless.com.br/graphql-a-nova-era-d as-apis-web/
Referências https://speakerdeck.com/ketemartinsrufino/gr aphql-para-reduzir-complexidade-no-front-e-n o-back https://www.slideshare.net/PaulaSantana12?ut m_campaign=profiletracking&utm_medium=ss site&utm_source=ssslideview
Referências https://medium.com/idexo-developers/graphql -e-rest-quais-as-diferen%C3%A7as-99cae22871 a7 https://www.apollographql.com/ https://relay.dev/
Referências https://www.graph.cool/ https://hasura.io/
Obrigada <3