DEV Community

Cover image for 🔥 GraphQL de forma simples!
Rafael Lopes de Melo
Rafael Lopes de Melo

Posted on

🔥 GraphQL de forma simples!

    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)