Utilizando GotQL para transformar sua experiência com GraphQL

Se você já ouviu falar de GraphQL (ou até usou) sabe que esta é uma tecnologia que, se emplacar como as demais, poderá mudar a forma como todos nós vemos o "mundo das APIs".

Se você ainda não sabe o que é o GraphQL, existem muitos artigos (e até séries inteiras) de como utilizá-lo e como fazer sua API ganhar super poderes através dele.

Uma breve introdução

Trocando em miúdos (e falando muito simplificadamente), para todos os que nunca ouviram falar nisso, o GraphQL não é uma ferramenta e nem uma biblioteca Javascript, muito menos um framework. Ele é literalmente uma query language. Sabe o que mais é uma query language? Isso ai, o SQL… Opa, então acho que podemos tirar alguma coisa daí não é mesmo?

O GraphQL basicamente é o acrônimo de Graph Query Language, não vamos entrar na parte do Graph agora, mas ele é uma linguagem que permite que você faça queries como se fosse um banco de dados, mas diretamente na sua API, ou seja, adeus respostas com dados desnecessários, você vai trazer somente o que vai usar. E não só isso, mas ele também inclui uma série de vantagens que não vou contar aqui para não estragar a surpresa 😜.

Nem tudo são flores

Pois bem, já podemos ter uma noção do que o GraphQL pode fazer por nós, mas como qualquer coisa em desenvolvimento, ele não é uma bala de prata e provavelmente muitos sabem disso, principalmente quem já precisou fazer uma query um pouco mais longa.

O grande problema do GraphQL é que, tanto do lado do servidor quanto do lado do cliente, podemos interagir com ele apenas via String, então já pode imaginar, vamos ter que concatenar muita coisa.

Do lado do servidor temos uma biblioteca para transformar a sintaxe do schema do GraphQL em um objeto, mas do lado do client, coisas como esta são comuns:

Sim, isto tudo é um template

Você consegue ler esta mutation acima? Bom, vamos deixar ela um pouco mais legível jogando na nossa interface visual:

Ficou mais simples não?

Veja que estamos transformando tudo isso, em uma string simples de uma única linha. O que é completamente aceitável para o computador, mas e quando você vai dar um suporte para este código? Você consegue dizer a primeira vista, sem a documentação do schema, o que pode estar errado? Uma query pode ser muito mais longa do que isto…

Seu código pode ficar muito complexo, muito rápido.

Por causa destes problemas de manipulação de strings em Javascript é que o GotQL foi criado.

Uma nova abordagem

E se, ao invés de strings, utilizássemos outra estrutura de dados que seja tão familiar quanto as próprias strings para o Javascript, mas ao mesmo tempo fosse um pouco melhor de manipulá-los? Isto parece um caso para o JSON!

JSON: o nosso herói diário

É ai que entra em cena o GotQL, um parser de queries para GraphQL. Com ele podemos escrever nossas queries e mutations em JSON e ele vai se encarregar de converter a estrutura de dados para string e já enviar ao seu servidor, trazendo a resposta.

Esta biblioteca é construída em cima do popular Got, uma melhor implementação para os HTTPClients do Node.

Mãos a obra

Vamos colocar a mão na massa e tentar converter nossa mutation acima para a sintaxe do GotQL, olhando na documentação, podemos primeiramente importar o módulo utilizando npm install gotql --save e importá-lo no nosso arquivo, vamos definir a base do que vamos utilizar aqui:

Veja que o objeto gotQL tem um método query e, consequentemente, outro chamado mutation. Isto é para definir quando você quer executar um tipo ou outro na sua API.

Primeiramente, vamos olhar a documentação e transformar nossa query em algo parecido com JSON, veja que o formato da estrutura de dados é bem definido e recursivo, então podemos transformar nossa mutation em algo assim:

Veja que podemos definir o que é chamado de Complex Types, objetos que levam outros objetos recursivamente, de forma simples, com um objeto Javascript interno (este objeto poderia levar outro objeto, e assim por diante).

Feito isso, vamos definir nossos headers! Nosso endpoint utiliza uma autenticação Basic, então precisamos definir isso. O segundo parâmetro depois da URL do nosso endpoint é um objeto options que pode levar essas chaves:

  • debug (true|false): Se ativo, loga todos os passos da requisição no console, inclusive os outputs (muito útil para debugar queries e mutations)
  • errorStatusCode (number): Por padrão, um erro será tratado sempre como um erro do servidor, com um código 500, se você quiser que os erros sejam retornados com outro status é só digitar ele aqui
  • headers (object): Aqui podemos passar qualquer header no formato nomeDoHeader: valor dentro de um objeto, é aqui que vamos passar nossa autenticação, presente no header Authorization.

Incluímos isso tudo no nosso código:

Muito mais simples, não?

Quando executarmos, vamos ver que a resposta é um objeto com três chaves:

  • data: É aonde sua resposta será escrita
  • statusCode: É aqui que o status da chamada será trazido
  • statusMessage: A mensagem associada com o status acima virá aqui

Em caso de erro, o objeto é o mesmo, porém com outros valores.

Conclusão

Agora ficou muito mais simples escrever uma query ou mutation e entender o que foi escrito posteriormente sem precisar ficar manipulando strings ou qualquer outra coisa.

Deem uma olhada no repositório oficial do projeto e não se esqueçam de dar suas dicas e sugestões em issues ou ajudar mandando PRs para transformar a ferramenta em algo ainda melhor!

Não deixe de acompanhar mais do meu conteúdo no meu blog e se inscreva na newsletter para receber notícias semanais!

--

--

Brazilian Programmer, caught between the black screen and rock n' roll 🤘 — Senior software Engineer @ Klarna

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Lucas Santos

Lucas Santos

Brazilian Programmer, caught between the black screen and rock n' roll 🤘 — Senior software Engineer @ Klarna