Introdução ao GraphQL

Vamos trabalhar todos os dados do nosso produto por aqui, vamos usar ele como base.
"GraphQL é uma linguagem de consulta de dados desenvolvida e usada pelo Facebook desde 2012."

Pensa na timeline do Facebook, ele precisava pegar nome, URL, foto, conteúdo da postagem, ou seja, todas as informações daquele post, sendo de comentários, aí dentro dos comentários precisava pegar as informações dos usuários de dentro daquele post também, ou seja, muitas e muitas informações, e isso só no quadrado um único post, consequentemente isso ficcava muito pesado e para quase todos os usuários demorava muito, além de ser muito custoso para o servidor ter que ficar batendo em várias rotas. Foi por isso que eles desenvolveram o GraphQL.

REST API

Client(celular | computador) - HTTP request -> Server
Client(celular | computador) <- JSON - Server

A cada rota nova a API era atualizada, ou seja, o fluxo era refeito.

Problemas na REST API

• Dificuldades para evoluir a REST API - para criar novas coisas nós tinhamos que criar elas e deixar funcionando a que já estava lá, aí era dividido, a rota antiga se transformava em 'v1' e a nova em 'v2', por exemplo.
• Entrega de dados nem sempre necessários, quando a requisição é feita ele envia um monte de coisas, caso seja grande o JSON.
• Aumento no tamanho da requisição, as rotas eram altamente acopladas, ou seja para pegar apenas alguns dados dos usuários nós tinhamos que criar outra rota para aquele tipo de serviço.

GraphQL

Preparando um schema com todos os dados.

type User = {
  name: String;
  bio: String;
  avatarURL: String;
  createdAt: DateTime!;
  followers: FollowersConnection;
}

type FollowersConnection = {
  edges: [UserEdge];
  nodes: [User];
  totalCount: Int!;
}

Mas eu posso passar apenas os dados que eu quero.

  query {
    user(login: 'Andres doSantos') {
      name,
      location,
      followers {
        totalCount,
      }
    }
  }

Ou seja, de um schema enorme, eu pego apenas um pequeno pedaço. E dele eu recebo apenas isso:

{
  "data": {
    "user": {
      "name": "Andres doSantos",
      "location": "Rio de Janeiro",
      "followers": {
        "totalCount": 3957
      }
    }
  }
}

Temos também as mutations para criação dos dados.
subscriptions que é uma outra forma de assistir as mudanças dos dados.
E vários outros detalhes dos GraphQL.

vantagens

• Permite uma constante evolução - é apenas uma rota, não é necessários 'v1', 'v2', ...
• Entrega seomente dos dados requisitados(tamanho menor e mais rápido), ou seja, o servidor responde mais rápido e o cliente baixa mais rápido.
• Rota úncia, dados altamente desacoplados, eu passo, na criação da rota, tudo o que eu quero e ele me trás tudo o que eu preciso.

No GraphQL a URL é: https://graphql.github.com/graphql/proxy, as informações que eu quero passar vem no payload, então se eu fizer uma query requisitando nome, o nome vem no payload.

GraphQL Clients

São responsáveis por criar camadas de abstração para realizar queries/mutations, sistemas de cache, validações e otimizações.

Fetching Client é o mais simples, faz a chamada, recebe os dados e é isso aí, mais nada. Simples assim!

Caching Clients são mais robustos, pegam os dados, transformam, colocam em camadas de caches e assim nós não temos que ficar batendo todas as vezes na API se agente tiver todos os valores ali, eles tem também máquinas de estado, então nós conseguimos ter uma espécie de Redux dentro dele.

Quais os clients mais conhecidos/utilizados?

FetchQL
vantagens

• É bem leve
• API simplificada
• Escrito com ES2015 e modules.
• Isomórfico, ou seja, funciona no Node.js e no browser.

desvantagens

• Não possui sistema de cache.
• Não possui tratamento de dados e validações.
• Não tem contexto de estado.

GraphQL request
vantagens

• Simples e leve
• Baseado em promises, ou seja, trabalha com async/await.
• Suporte ao TypeScript.
• Isomórfico, ou seja, funciona no Node.js e no browser.

desvantagens

• Não possui sistema de cache.
• Não possui tratamento de dados e validações.
• Não tem contexto de estado.

uRQL
vantagens

• Bastante leve e focado em performance.
• Altamente extensível, podemos acomplar mais coisas e deixar ele mais poderoso.
• Junto com Exchanges possui caching.
• Possui suporte offline.

desvantagens

• Biblioteca bem nova (poucos materiais sobre).
• Pouca adoção no mercado.

Realy Modern
vantagens

• Focado em performance.
• Pré-compila as queries do GraphQL em build time(evita que o usuário baixe o parser).
• Possui sistema de caching/states.

desvantagens

• Necessita de configurações a mais no tooling, seja no webpack, no diretório de build, nos vamos ter que configurar isso.
• Curva de aprendizagem é maior devido a mais detalhes para o funcionamento.

Apollo Client
vantagens

• Largamente usado no mercado.
• Focado em performance.
• API simplificado e com suporte aos hooks.
• Muito material online.

desvantagens

• Extremamente grande!!! Nós temos a necessidade de usar o parser.
• Atualizações constantes com Breaking Changes.

Espero ter tirado suas dúvidas em torno de algumas bibliotecas mais famosas do GraphQL e de como ele funciona, sinceramente eu não tinha noção que ele era assim, cheguei a dizer que ele não fazia sentido nenhum, mas agora faz : ), vaaaleu!