Muito provavelmente você que está lendo este artigo já ouviu falar de GraphQL e está interessado em entender suas vantagens e utilidades. Talvez já saiba do que se trata esta tecnologia ou qual problema ela resolve; ou talvez esteja totalmente perdido e não saiba absolutamente nada sobre ela.
Seja qual for o seu caso, recomendo fortemente que fique comigo até o final do artigo, prometo que irá ter uma visão bem clara sobre o que de fato é esta tecnologia a qual está se tornando tão popular.
💜 Afinal, o que é o GraphQL?
GraphQL é uma linguagem de Query (bem como SQL) criada pelo Facebook em 2012 e lançada publicamente em 2015. É visto pela comunidade como uma alternativa ao padrão REST, o qual reina sobre o desenvolvimento.
É importante eliminar logo de cara a ideia de que o GraphQL vai matar o REST. Ambos os estilos de arquitetura possuem suas próprias características e cada uma se encaixa em situações diferentes.
📐 Arquitetura e... Fast Food?
Uma forma de entender as diferenças entre REST e GraphQL é pensando em tipos de Fast Food... Calma, eu sei que parece estranho (talvez até absurdo), mas vou clarear sua mente, vem comigo!
Pense no REST como um Fast Food o qual já possui lanches prontos e um cardápio bem definido (como o Mc Donald's ou Burger King), ou seja, possui opções pré-determinadas que entregarão sempre o mesmo resultado. Até pode ser que após o recebimento do pedido você tire o picles, mas mesmo assim você terá pago por ele!
Por outro lado, o GraphQL pode ser comparado a um Fast Food mais customizável, onde você escolhe os ingredientes que estarão no seu lanche (como o Subway), ou seja, na hora do pedido você é capaz de escolher exatamente o que você vai querer comer, sem mais nem menos!
✨ O que o GraphQL veio resolver?
Agora vamos entender como o exemplo anterior se aplica no mundo real. Imagine que um único back end construído com a arquitetura REST é responsável por servir diversos front ends e tem a função de CRUD básico de usuários com a seguinte estrutura:
type User {
name: string;
nickname: string;
password: string;
active: boolean;
};
Aqui vemos que um usuário possui nome, apelido, senha e um booleano que indica se está ativo ou não. Agora imagine que temos uma rota "/users" que retorna todos os dados de todos os usuários do banco de dados.
Tudo muito lindo, tudo muito belo, mas há um porém. O primeiro front end servido por esta API utiliza apenas o nome e o estado de atividade dos usuários, enquanto o segundo utiliza o apelido e a senha, e o terceiro utiliza todos os dados retornados.
O que acontece é que no primeiro e segundo front ends ocorre um fenômeno chamado Over-Fetching, isto é, receber dados em excesso de uma requisição, os quais serão descartados. Olhando por cima talvez não aparente ser um problema tão horrível assim, mas isto pode causar gastos a mais em servidores que taxam a quantidade de dados trafegados (e tenho certeza que você não quer aumentar os gastos da tua empresa).
⚙ Funcionamento do GraphQL
Ao contrário do que acontece no padrão REST, onde há várias rotas para diferentes requisições, o GraphQL possui apenas um único endpoint, geralmente "/graphql", o qual recebe apenas requisições POST e é capaz de enviar quaisquer dados da API.
O primeiro passo na ferramenta é instalar e iniciar um servidor compatível com o GraphQL, neste exemplo usaremos o Apollo Server. Para armazenar os dados apenas criaremos um array de objetos em memória.
// Primeiro importamos as dependências necessárias
const { Apollo Server, gql } = require('apollo-server');
// Criamos a variável que vai armazenar nossos dados
const data = [
{
name: 'Rafael Melo',
nickname: 'LopeKillz',
password: '132456',
active: true
}
];
// E iniciamos o servidor
const server = new ApolloServer();
server.listen();
Porém, caso tente rodar este código, receberá um erro. Isto acontece porque a classe Apollo Server recebe dois parâmetros obrigatórios: typeDefs e resolvers.
Começando pelo typeDefs, este é basicamente as definições de tipo das respostas da API, podemos dizer que significa o que vai ser retornado. No exemplo a seguir defino o tipo de User e uma Query que retorna todos os usuários em um array. Veja:
const typeDefs = gql`
type User {
name: string!
nickname: string!
password: active!
active: boolean!
}
Type Query {
users: [User]! // Query 'users' retorna um array de usuários
}
`
Neste exemplo, todos os dados são obrigatórios, ou seja, não podem ser "null" ou "undefined". Esta característica é definida pelo "!" após a declaração do dado.
E agora partindo para os resolvers, estes são basicamente o como as expectativas colocadas nos typeDefs serão resolvidas. Observe:
// Defino como a Query 'users' retornará o array de usuários, neste caso, basta retornar a variável que criamos anteriormente
const resolvers = {
Query: {
users: () => data
}
}
Para finalizar, apenas passamos os parâmetros necessários para o Apollo Server. No fim, seu código deverá parecer com este:
const { Apollo Server, gql } = require('apollo-server');
const data = [
{
name: 'Rafael Melo',
nickname: 'LopeKillz',
password: '132456',
active: true
}
];
const typeDefs = gql`
type User {
name: string!
nickname: string!
password: active!
active: boolean!
}
Type Query {
users: [User]!
}
`
const resolvers = {
Query: {
users: () => data
}
}
const server = new ApolloServer({typeDefs, resolvers});
server.listen();
Após isto, podemos rodar o servidor e acessar o playground do GraphQL no localhost:4000. Para testar nossa API podemos rodar a query users requisitando nome, apelido, senha e estado de atividade e obter o seguinte resultado:
// Query
query {
users{
name,
nickname,
password,
active
}
}
// Resultado
data: {
"users": [
{
name: 'Rafael Melo',
nickname: 'LopeKillz',
password: '132456',
active: true
}
]
✅ Conclusão
O GraphQL é uma linguagem de consulta criada pelo Facebook que tem o objetivo de facilitar a manipulação de dados de forma eficaz sem a necessidade da criação de infinitas rotas na API.
Ao contrário do que se pode pensar, o REST não vai morrer por conta da popularização do GraphQL, os dois possuem propostas diferentes para diferentes situações. Por isto, não é recomendado utilizar a tecnologia do Facebook em todos os projetos, visto que é relativamente nova e está ainda construindo seu lugar no mercado de trabalho.
Caso queira aprender mais sobre o assunto recomendo que visite as referências logo abaixo e, principalmente, a documentação oficial.
📜 Referências
Documentação oficial do GraphQL: https://graphql.org/
"Curso de GraphQL para iniciantes", por Mateus Silva: https://www.youtube.com/playlist?list=PLPXWI3llyMiK9uw7tfljM2hnQl2qu6CeT
"Introduction to GraphQL", por Tomek Poniatowicz: https://dev.to/graphqleditor/introduction-to-graphql-2nj0
"Você conhece o GraphQL e como ele pode te ajudar?", por Akira Hanashiro: https://www.treinaweb.com.br/blog/voce-conhece-o-graphql-e-como-ele-pode-te-ajudar/
"Entendendo o que é o GraphQL através de exemplos", por Vinicius Reis: https://blog.codecasts.com.br/entendendo-o-que-%C3%A9-graphql-atrav%C3%A9s-de-exemplos-c2fa35e8bf63
Top comments (0)