React SP 16, Cubo Itau

1. GraphQL
A Graph Query Language to your API
Danilo Vitoriano
Meetup React SP @Cubo.Network
Dezembro 2017

2. Baseado na apresentação GraphQL & Relay de @zetavg

3. Introdução

4. API
"Application Programming Interface”
“Interface de Programação de Aplicativos"

5. RESTful
A evolução da API
“Representation State Transfer”
“Transferência de Estado Representacional”

6. /api/posts.json?cover=true&include=author,comments,avatar
REST API da bagunça

7. A Solução

8. GraphQL
Uma linguagem para consulta através de Grafos

9. Grafo
Conjunto onde os elementos são unidos por um arco

12. Breve História
• 2012 - Utilizada pelo app mobile do Facebook
• 2015 - Lançada publicamente
• 2016 - GitHub usa GraphQL para APIs públicas

13. 2017
Assunto de maior interesse da React Conf Brasil

14. Fotos: Leandro Godoi
Sashko Stubailo
Apollo
James Bailey
Meteor
Raphael Costa
Pipefy

15. Quem usa
http://graphql.org/users/

16. Bibliotecas
https://github.com/chentsulin/awesome-graphql

17. Ecossistema

18. 2017
GraphQL & Relay re-licenciados sob Licença MIT

19. Visão Geral

20. Todos os dados da sua
aplicação podem ser
representados como um grafo

22. Um subgrupo do grafo é utilizado
para montar uma Interface do Usuário (UI)

27. Conceitos Básicos de
GraphQL

28. Consulta (Query) Básica

29. • Comece selecionando os campos na raiz da “consulta"

30. • Consulta aninhadas

31. Árvore de Consulta

32. • Cada consulta é uma árvore extraída do grafo

34. • Árvore da consulta

35. Tipos

36. • Receba o tipo de cada nó usando o metacampo
__typename

37. Documentando Tipos

38. Documentar os tipos de dados de cada nó
facilita quando você precisa consultar
alguma informação

40. Argumentos

41. • Cada campo pode definir alguns argumentos nele

42. • Campos aninhados também possuem argumentos

43. Fragmentos

44. • Pré definido
conjunto de
campos como
fragmento de
informação

45. Dados mutáveis com
Mutation

46. • Use mutation ao invés de query,
e coloque dados nos argumentos

47. Resumo

48. http://graphql.org

49. • Descreva seus dados

50. • Pergunte pelo o que você deseja

51. • Receba resultados previsíveis

52. Bibliotecas Cliente
Como consumo GraphQL?

53. Apollo GraphQL
https://www.apollographql.com/

54. Relay
https://facebook.github.io/relay/

55. Obrigado
Danilo Vitoriano @dnvtrn
Especialista em TI
Foto:LeandroGodoi
reactconfbr.com.br

56. Foto por Rafael Ventura
Apresentação no Cubo Network 12/12/2017