Todos nós que trabalhamos com programação, seja na parte front-end ou na parte back-end, já tivemos que construir uma API ou consumir uma.
Neste post, vamos entrar nos conceitos iniciais sobre GraphQL, no entanto faz-se necessário entendermos primeiro o que é API, o que é REST e o que é RESTful, para então compreendermos o que é GraphQL e para que ele serve.
O que é uma API?
Api nada mais é que um acrônimo para o termo em inglês Application Programming Interface que em português significa Interface de Programação de Aplicação.
Ou seja, são instruções, conjuntos de rotinas ou padrões de programação que são disponibilizados por um software para que outro software, seja ele um site, um aplicativo ou até mesmo um sistema que consuma esta API e disponibilize para que outros softwares utilizem suas funcionalidades, porém não se preocupem com a implementação deste software.
Por exemplo, quero consumir uma API que retorne os dados de um usuário, que são nome, e-mail, telefone, endereço e data de nascimento, quando eu passar um id como parâmetro, mas não me interessa como os dados estão salvos e como o software que retorna estes dados está montando isso para mim.
Posso ter uma tabela só com nome e data de nascimento, depois outra tabela com e-mail e telefone e por fim uma outra tabela só com endereço, e os dados serem pesquisados um select de cada vez.
select nome, dataNascimento from usuarios where id = id;
select email, telefone from usuariosIdentificadores where idUsuario = id;
select endereco from logradouros where idUsuario = id;
Ou um select com inner join.
select u.nome, u.dataNascimento, ui.email, ui.telefone, l.endereco from usuarios u inner join usuariosIdentificadores ui on u.id = ui.idUsuario inner join logradouros l on u.id = l.idUsuario where u.id = id;
Ou posso ter uma tabela que tenha todos os dados juntos
select nome, dataNascimento, email, telefone, endereco from usuarios where id = id;
Ou mesmo que estes dados venham de um banco de dados não relacional ou de um arquivo de texto, o que interessa é que quando o desenvolvedor passar:
http://exemplo.com.br/users/1
Retorne:
{
nome: "José Roberto Bognar Junior",
dataNascimento: "22/09/1983",
email: "bognar_junior@yahoo.com.br",
telefone: 11999990101,
endereco: "Avenida Paulista, 000"
}
O que é REST e RESTful?
Conhecendo o conceito de API, precisamos entender o que é REST e RESTful antes de conhecer o GraphQL.
REST é o acrônimo em inglês para Representational State Transfer, que em português significa Transferência Representacional de Estado.
Ele nada mais é que um estilo de arquitetura de software que define um conjunto de restrições a serem usados para a criação de web services.
Os web services que estão em conformidade com o estilo arquitetural REST, denominados web services RESTful, fornecem interoperabilidade entre sistemas de computadores na Internet. Os web services RESTful permitem que os sistemas solicitantes acessem e manipulem representações textuais de recursos da web usando um conjunto uniforme e predefinido de operações sem estado.
Princípios
REST afirma que a Web já desfrutou de escalabilidade como resultado de uma série de conceitos de projeto fundamentais:
- Um protocolo cliente/servidor sem estado: cada mensagem HTTP contém toda a informação necessária para compreender o pedido. Como resultado, nem o cliente e nem o servidor necessitam gravar nenhum estado das comunicações entre mensagens. Na prática, muitas aplicações baseadas em HTTP utilizam cookies e outros mecanismos para manter o estado da sessão (algumas destas práticas, como a reescrita de URLs, não são permitidas pela regra do REST).
- Um conjunto de operações bem definidas que se aplicam a todos os recursos de informação: HTTP em si define um pequeno conjunto de operações, as mais importantes são POST, GET, PUT e DELETE. Com frequência estas operações são combinadas com operações CRUD para a persistência de dados, onde POST não se encaixa exatamente neste esquema.
- Uma sintaxe universal para identificar os recursos. No sistema REST, cada recurso é unicamente direcionado através da sua URI.
- O uso de hipermídia, tanto para a informação da aplicação como para as transições de estado da aplicação: a representação deste estado em um sistema REST são tipicamente HTML ou XML. Como resultado disto, é possível navegar com um recurso REST a muitos outros, simplesmente seguindo ligações sem requerer o uso de registros ou outra infraestrutura adicional.
As URLs abaixo podem ser consideradas padrões RESTful.
[GET] http://exemplo.com.br/users/1
[DELETE] http://exemplo.com.br/users/1
[GET] http://exemplo.com.br/users
[POST] http://exemplo/users
Body: { "nome: "Joaquim" }
HTTP Code 201 Created
{ id: 2, nome: "Joaquim" }
GraphQL
Após explicado o conceito de API, REST e RESTful, vamos enfim falar sobre GraphQL.
Se fosse necessário definir em uma palavra o que é GraphQL a palavra seria flexível.
GraphQL, na verdade é mais uma Query Language, ou seja, uma linguagem de inquirir, pesquisar, buscar dados.
GraphQL não é mais um framework ou biblioteca javascript. Na verdade, GraphQL não foi desenvolvido apenas para javascript, podemos utiliza-lo em diversas outras linguagens de programação, tais como:
GraphQL é então mais uma especificação e da mesma forma que o REST serve para consumir dados de um servidor e apresentá-lo para o cliente.
Mas se GraphQL faz a mesma coisa que REST, para que eu preciso dele?
Acalente seu ansioso coração padawan, GraphQL não é a mesma coisa que REST e nem veio para o substituir. Existem grandes diferenças entre os dois, o que veremos mais para frente. Primeiro veremos um pouco mais sobre o GraphQL.
Facebook, sempre ele.
Lá pelo longínquo ano de 2012 o Facebook enfrentou um problema quando precisou mudar suas aplicações mobile, quando sua equipe de desenvolvedores consumia as APIs REST estas retornavam dados em excesso, muitos campos que não seriam utilizados, deixando assim o desenvolvimento não só custoso e complicado, como também fugindo do padrão adotado por eles.
Precisando de uma solução para este caso, eles resolveram adotar um novo padrão, que fosse menos custoso em relação a transferência de dados e também fosse mais flexível.
Pontos positivos do GraphQL
Flexibilidade
Flexibilidade é a palavra que melhor define uma API GraphQL, visto que utilizando apenas uma API e alterando sua query podemos trazer apenas os dados que são necessários para que possamos utilizar, sem precisar pegar todos os dados ou consumir outra API que retorne menos dados.
Carregamento eficiente dos dados.
Hoje em dia a maioria das pessoas utilizam seus celulares para fazer transações, navegar na internet, acessar redes sociais, ler noticias, etc. Sendo assim, trazer dados desnecessários acalenta em demora para que as páginas sejam renderizadas ou os dados sejam carregados nos aplicativos.
Variedade de diferentes estruturas e plataformas de front-end.
Existem inúmeras formas de criar uma estrutura front-end assim como também de consumir uma API REST, sendo assim a criar e dar manutenção em uma destas APIs é extremamente custoso para que todas estas formas sejam atendidas. Com o GraphQL, cada cliente pode acessar com precisão os dados necessários.
Acabar com o Overfetching e o Underfetching
Dois outros problemas também encontrados nas APIs REST são o Overfetching e o Underfetching.
Overfetching é quando uma requisição retorna dados demais, por exemplo, você precisa apenas do nome e do e-mail de um determinado usuário, mas sua API retorna o seguinte:
{
nome: "José Roberto Bognar Junior",
rg: 303338880,
cpf: 31131133399,
endereco: {
logradouro: "Avenida 9 de Julho",
CEP: 01300000,
UF: "SP",
cidade: "São Paulo",
Bairro: "Bela Vista"
...
},
...
telefone: 11999990001,
email: "bognar_junior@yahoo.com.br"
}
Underfetching significa que uma requisição não retornou o suficiente das informações necessárias. E o cliente terá que fazer solicitações adicionais para buscar tudo o que precisa. Por exemplo o nome do usuário e os posts que ele fez no blog.
Primeiro você precisaria buscar o usuário minharota/usuarios e retornaria por exemplo:
[
{
id: 1,
nome: "Bognar"
},
{
id: 2,
nome: "Eduardo"
},
{
id: 3,
nome: "Ricardo"
},
{
id: 4,
nome: "Ana Maria"
},
]
Depois precisaria buscar os posts pelo id do usuário minharota/usuarios/1/posts e ai sim retornaria os posts deste usuário
[
{
id: 109,
titulo: "RxJS – O poder e a magia dos operadores.",
conteudo: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam odio."
},
{
id: 182,
titulo: "Funções Geradoras - Javascript.",
conteudo: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam odio."
},
{
id: 291,
titulo: "React – Hooks entendendo o conceito.",
conteudo: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam odio."
},
]
Em GraphQL passando na query algo como:
query {
Usuario(id: 1) {
nome
posts {
titulo
}
}
}
Teríamos como retorno
{
"data": {
"Usuario": {
"nome": "Bognar",
"posts": [
{ "titulo": "RxJS – O poder e a magia dos operadores." },
{ "titulo": "Funções Geradoras - Javascript." },
{ "titulo": "React – Hooks entendendo o conceito." },
]
}
}
}
Vimos que a requisição com o GraphQL é bem mais simples, passamos apenas os dados que queremos receber e utilizamos apenas uma chamada para trazer tanto o usuário quanto os posts dele.
Referências
O que é API? REST e RESTful? Conheça as definições e diferenças!
Bognar Junior 