O documento introduz o GraphQL, uma linguagem de consulta de dados criada pelo Facebook que permite que os clientes solicitem exatamente os dados de que precisam de uma única API. O GraphQL resolve problemas comuns em APIs REST como overfetching e underfetching ao dar mais poder ao frontend para decidir quais dados receber.

1. Introdução ao GraphQL
Uma nova forma de criar APIs

2. Fernando Henriques
● Desenvolvedor 10+ anos
● Senior Full Stack Developer
● JavaScript, Ruby, PHP e Java
● Front-end 💓 3000
github.com/fernandohenriques

3. Nova forma de criar APIs?
Foi criada em 2012 e lançada publicamente em 2015, mas...

4. FACEBOOK STACK
https://stackshare.io/facebook/facebook

5. Ecossistema rico
Mais de mil pacotes no NPM para o termo “graphql”...

6. Alguém está usando em prod ?

7. Minha empresa também usa

8. O que é o GraphQL?

9. GraphQL
➔ Criada pelo Facebook
➔ Open-source
➔ Linguagem de consulta de dados
➔ Não é um protocolo para APIs,
mas funcionando como um
➔ Agnóstico: independe de
linguagem ou banco de dados
➔ É uma spec!
Protocolo para APIs ?

10. Motivação

11. Quem solicita decide o que quer receber
(somente o que precisa)
Essa é a premissa básica, motivo de sua criação

12. No REST não é assim
Em uma API REST é preciso criar um novo
endpoint para receber uma resposta com estrutura
de dados diferente

13. Netflix

14. GraphQL REST

15. ● Representational State Transfer
● Verbos HTTP (GET, POST, PUT, DELETE, HEAD…)
● Resource based URLs - Endpoint (/movie/10)
● RESTful: capacidade de determinado sistema aplicar os
conceitos REST
REST (ful) API

16. Action-based URL x Resource-based URL

18. Como ficam as URLs no GraphQL?

19. Buscando dados com REST
GET /babies

20. Buscando dados com GraphQL
POST /graphql

21. Buscando dados por ID com REST
GET /babies/1

22. Buscando dados por ID com GraphQL
POST /graphql

23. Salvando dados com REST
POST /babies

24. Salvando dados com GraphQL
POST /graphql

25. Filtrando dados com REST
POST /babies?name=joaquim

26. Filtrando dados com GraphQL
POST /graphql

27. ★ Baixo custo de mudança
★ Mais poder para o front-end
Duas grandes vantagens do GraphQL

28. Vamos entender como a mágica
acontece

29. 1. Single endpoint
2. Well defined contract (tem schema, é tipado - o REST é
schemaless, não tem contrato)
3. No more overfetching
4. No more underfetching (vários endpoints para uma feature)
Conceitos fundamentais do GraphQL

30. ● Documentação: auto-documentação através do Schema
○ Chamada de introspection retorna o Schema
● Legibilidade da API: sem “salada” de URLs
● Menos tráfego de dados no cliente: payload menor
● Tempo de desenvolvimento do back-end focado em regras
de negócio e qualidade, e não em “ajudar” o front-end
Problemas comuns que o GraphQL resolve

32. Problema de versionamento

33. Int: A signed 32‐bit integer
Float: A signed double-precision
floating-point value
String: A UTF‐8 character
sequence
Boolean: True ou false
ID: Unique identifier (não legível
para humanos)
Tipos primitivos
Tipos e schema
Enum, custom scalar, listas e non-null

34. Interface

35. Union Types

36. O GraphQL trabalha com o conceito
de estado
Queries e Mutations

37. Exemplo de query e mutation

38. Resolvers
Responsável pela magia mais poderosa

39. Suporte a real time
Subscription

40. ★ Sobrecarga de responsabilidades no front-end funciona
para todos os times e projetos?
★ Nada impede o dev de escrever (é até fácil) uma query
com potencial destrutivo para sua app (ex.: sem
paginação)
★ Ainda precisa evoluir/padronizar os processos de
autorização de acesso
GraphQL não é bala de prata

41. Outros protocolos para APIs

42. GraphQL como API
Gateway

44. Use Apollo GraphQL;

45. Obrigado!