🔥 GraphQL de forma simples!
Tags: graphql, javascript
Published: 2020-07-07 20:37:39

&nbsp;&nbsp;&nbsp;&nbsp;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.  

&nbsp;&nbsp;&nbsp;&nbsp;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?

&nbsp;&nbsp;&nbsp;&nbsp;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.  

&nbsp;&nbsp;&nbsp;&nbsp;É 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?

&nbsp;&nbsp;&nbsp;&nbsp;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!

&nbsp;&nbsp;&nbsp;&nbsp;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!

&nbsp;&nbsp;&nbsp;&nbsp;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?

&nbsp;&nbsp;&nbsp;&nbsp;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:

```typescript
type User {
  name: string;
  nickname: string;
  password: string;
  active: boolean;
};
```
&nbsp;&nbsp;&nbsp;&nbsp;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.

&nbsp;&nbsp;&nbsp;&nbsp;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.

&nbsp;&nbsp;&nbsp;&nbsp;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

&nbsp;&nbsp;&nbsp;&nbsp;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.

&nbsp;&nbsp;&nbsp;&nbsp;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.

```javascript
// 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();
```

&nbsp;&nbsp;&nbsp;&nbsp;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**.

&nbsp;&nbsp;&nbsp;&nbsp;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:

```javascript
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.

---

&nbsp;&nbsp;&nbsp;&nbsp;E agora partindo para os **resolvers**, estes são basicamente o **como** as expectativas colocadas nos **typeDefs** serão resolvidas. Observe:

```javascript
// 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 
  }
}
```

&nbsp;&nbsp;&nbsp;&nbsp;Para finalizar, apenas passamos os parâmetros necessários para o **Apollo Server**. No fim, seu código deverá parecer com este:

```javascript
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();
```

&nbsp;&nbsp;&nbsp;&nbsp;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

&nbsp;&nbsp;&nbsp;&nbsp;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.  

&nbsp;&nbsp;&nbsp;&nbsp;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.

&nbsp;&nbsp;&nbsp;&nbsp;Caso queira aprender mais sobre o assunto recomendo que visite as referências logo abaixo e, principalmente, a [documentação oficial](https://graphql.org/).

---

# 📜 Referências

> Documentação oficial do GraphQL: https://graphql.org/

<br/>

> "Curso de GraphQL para iniciantes", por Mateus Silva: https://www.youtube.com/playlist?list=PLPXWI3llyMiK9uw7tfljM2hnQl2qu6CeT

<br/>

> "Introduction to GraphQL", por Tomek Poniatowicz: https://dev.to/graphqleditor/introduction-to-graphql-2nj0

<br/>

> "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/

<br/>

> "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