faceboook

Introdução ao GraphQL: a linguagem de consulta do Facebook

Arthur Moro, Desenvolvedor Full Stack, explica como começar a utilizar o GraphQL com NodeJS. Confira!

Autor: Arthur Moro

Sem dúvidas, o GraphQL é o novo hype do momento e, com certeza, você já ouviu falar que ele está chegando para dominar o mundo de criação de APIs, não é mesmo?

Para quem ainda não ouviu sobre, o GraphQL é uma tecnologia que se originou do Facebook, o que fez com que sua fama crescesse ferozmente. Muito interessante e útil, a ferramenta serve como uma mão na roda na hora de criarmos uma API que vai precisar ser alterada para retornar mais ou menos dados, mais ou menos relacionamentos, etc.

Sem dúvidas é uma tecnologia que está se espalhando muito rápido e, se você está procurando vagas de trabalhos em startups, é certo que já viu muitas empresas pedindo conhecimento nele. Não é?

Introdução ao GraphQL

O GraphQL é uma ferramenta baseada em requisição de dados – Query Language, e que permite ser bem específico.

Mas como?

Vamos a um exemplo: na página principal do seu blog, você não precisa de todos os dados de um post, e às vezes, precisa apenas do título e do conteúdo. Em uma api rest você teria que criar um endpoint só para isso, ou então, fazer um monte de verificações no seu back-end para retornar somente aquilo que foi pedido, certo? Já com GraphQL você consegue fazer esse pedido sem muita dor de cabeça.

No entanto, o GraphQL não é feito só de queries. Com ele também é possível executar mutations, que são responsáveis pela inserção e alteração de dados.

Aplicando o GraphQL

Vamos à um exemplo de GraphQL com NodeJS para que você possa ter uma ideia melhor do que estou fazendo.

Acesse-o, clone-o e o execute. Use este post apenar como um guia pois ele só funcionará com o código. (Todo código está disponível em https://github.com/arthurmoro/graphql).

Não vou entrar muito em detalhes de dependências e etc., pois tudo isso está disponível no repositório do GitHub que deixei acima, ok?

Eu segui a metodologia de separar todo o código do GraphQL em pequenos arquivos para melhorar a compreensão e manutenibilidade.

Primeiro eu verifiquei quais os dados a minha API de blog iria precisar (Você precisa especificar isso para que o desenvolvimento ocorra bem). Com essa especificação em mãos, eu criei 3 tipos de dados:

  • Autor
  • Comentários
  • Post

Para criar um tipo, você deverá seguir a documentação do GraphQL para Javascript.

Como podemos ver no exemplo do tipo Post:

GraphQL

Trecho de código que representa a criação de tipos de objetos do GraphQL (código se encontra no link: https://raw.githubusercontent.com/arthurmoro/graphql/master/src/schema/types/Post.js)

Na linha: export

const Post = new GraphQLObjectType

Eu exporto uma nova instância de um tipo de Objeto do GraphQL

Na linha: name: “Post”

Eu dou o nome de Post para o tipo do Objeto.

Logo depois em “fields” eu “seto” todos os campos que o meu Objeto do tipo post possui.

No campo “Author” e “Comments” podemos perceber algo diferente, certo? Aqui, buscamos as referências do post. Podemos dizer que nosso post possui um Autor e os Comentários, certo? E é isso que esse campo faz. O “resolver” destes campos nos traz objetos a quais este post é relacionado, e você não precisa fazer isso na mão.

Abaixo disso, observamos a linha: export const PostInputType = new GraphQLInputObjectType

Que exporta uma variável que está instanciando um novo Objecto do tipo Input do GraphQL. Esta linha é a encarregada de criar um tipo de dados que efetuara a Mutation. Ou seja, inserção de Posts em nossa base de dados.

Após implementar os nossos Tipos de variáveis, vamos implementar as nossas queries, ou seja, as buscas que o nosso GraphQL será capaz de efetuar.

Neste exemplo criei 3 tipos de queries. Uma para Posts (retornará todos os posts), Post (retornará um post através de um ID) e Author (retornará um autor através de um id e também todos os seus posts).

Para exemplificar destrincharei a busca de UM post. Assim teremos ideia de como enviar argumentos.

2graphQL

Trecho de código que representa a declaração de uma query no GraphQL (código se encontra no link: https://raw.githubusercontent.com/arthurmoro/graphql/master/src/schema/queries/post.js)

Vamos lá, exportaremos um objeto que conterá: 

 

  • O nome que será retornado – ‘post’.
  • Dentro do objeto post temos o tipo do retorno. Neste caso é Post, aquele tipo que criamos logo ali em cima.
  • Description é a descrição da query, ela irá aparecer no playground do GraphQL (explicarei mais pra frente)
  • Esta nossa query recebe um argumento id que é no tipo inteiro e não pode ser nulo.
  • E, por fim, em resolver, buscaremos o post que pertence ao id.

Agora, vamos ver como que fazemos uma Mutation. 

Vamos criar a mutation para inserir um Post, ok?

3 GraphQL

Trecho de código que representa a criação de uma Mutation no GraphQL (código se encontra no link: https://raw.githubusercontent.com/arthurmoro/graphql/master/src/schema/mutations/addPost.js)

Agora, vamos estudar essas linhas. Como vimos na query acima, esta aqui possui as mesmas coisas: O nome da Mutation (addPost), o tipo (Post), a descrição, os argumentos e o resolver.

 

O tipo aqui é um PostInput, aquele que criamos lá em cima junto ao tipo do post, e o resolve vai executar uma função com os dados do input para que o mesmo seja inserido no nosso banco de dados.

 

Finalmente, agora, podemos criar o nosso schema e importar todas as nossas queries e mutations para o GraphQL.

4 GraphQL

Código que representa a criação de um Schema no GraphQL (código se encontra no link: https://raw.githubusercontent.com/arthurmoro/graphql/master/src/schema/index.js)

Aqui neste arquivo vamos importar todas as nossas queries e mutations para que possamos inseri-las em nosso Schema do GraphQL.

 

Depois desta trabalheira toda… UFA! vamos importar esse Schema em nossa índex e criar um middleware que vai executá-la em um endpoint de nossa escolha. Para exemplificar utilizei o GraphiQL, mas existem outros playgrounds no mercado.

 

Para que possamos utilizar o playground, vou utilizar o express como um framework NodeJS e o express-graphql para nosso endpoint execute o graphql sem muita dificuldade. Para que tudo funcione, importe as dependências e adicione as linhas do nosso middleware:

5 GraphQL

Agora, execute o comando npm run serve e acesse, no seu browser, o endpoint: /graphql.
Execute uma query para retornar um post:

6GraphQL

Exemplo de query do GraphQL. Para ver este exemplo, rode o servidor localmente, acesse o endereço: https://localhost:4000/graphql e execute a query: {post(id:1){id, title, content, comments { name, content } } }

Se tudo correr bem o retorno será:
{
  “data”: {
    “post”: {
      “title”: “My first blog post”,
      “content”: “This is my very first blog post. Hope you like it!”
    }
  }
}

 

Se você estiver executando através do código do meu repositório, adicione o autor na chamada:
query{
    post(id: 1){
        title
        content
    author{
      name
    }
    }
}

 

E verá que o resultado agora conterá o nome do autor do post:
{
  “data”: {
    “post”: {
      “title”: “My first blog post”,
      “content”: “This is my very first blog post. Hope you like it!”,
      “author”: {
        “name”: “Xavier Decuyper”
      }
    }
  }
}

 

Muito legal, né?

 

Agora é só aprofundar os estudar e colocar isso em produção. Tenho certeza que, se bem usado, irá facilitar sua vida. Lembrando que o exemplo foi realizado usando NodeJS, porém, GraphQL não serve somente para o Javascript, ok? No site do GraphQL temos exemplo para várias outras linguagens.

 

Vamos codar, devs!
Compartilhar
Compartilhar

3 Comentários

  1. Eduardo Destruti disse:
    24 de março de 2018 às 16:05

    Parabéns pelo excelente trabalho! Muito ditatico. Continue assim!

    Responder
  2. Jamson Martins Souza disse:
    30 de março de 2018 às 08:35

    Uma nova linguagem fantástica , Muito bom
    Gostaria de receber sempre novidades de novas linguagens e ferramentas , porque Futuramente pretendo fazer ADS ….

    Responder

Deixe o seu comentário!

Não perca nenhum post!