GraphQL: a linguagem do Facebook para APIs

GraphQL: a linguagem do Facebook para APIs

Neste artigo veremos uma introdução ao GraphQL, que é uma alternativa à maneira tradicional que conhecemos como REST, de se construir aplicações tipo API (Application Programming Interface).

As aplicações tipo API permitem que softwares externos acessem dados e serviços desta mesma aplicação através de endereços (“end-points”).

O que vamos aprender?

Vamos apresentar como pode ser feita essa integração do GraphQL em uma aplicação simples em Ruby On Rails, com resultados rápidos.
Se vocês precisam ou querem sair do tradicional e implementar APIs modernas com Ruby On Rails, então GraphQL pode ajudar nesse contexto.

Sigam o passo a passo e construam a aplicação na seção “Passo a Passo da criação do APP”. Assim, os conceitos, como o padrão de arquitetura do GraphQL, a integração com Rails e alguns outros detalhes podem ficar mais claros.

Espero que este material seja útil e ajude a criar uma aplicação tipo API com GraphQL 😉
Aproveitem o material e deixem uma mensagem. 😊… bóra ler o post 🚌

O que é o GraphQL?

GraphQL, como diz seu próprio site oficial é uma linguagem de consulta para APIs projetada pelos engenheiros do Facebook, criadores da famosa rede social de mesmo nome.
Aqui vale mencionar Lee Byron, um dos desenvolvedores que teve um papel importante na criação desta ferramenta.

Além de ser uma linguagem de consulta para APIs, GraphQL também é acompanhado de um mecanismo de execução de consulta de dados chamado de GraphiQL.

O GraphiQL é um recurso, feito em React, que oferece uma interface no browser para exibição da documentação para criação e testes de consultas das APIs que desenvolvemos usando GraphQL.
Ou seja, as consultas e operações que criamos usando GraphQL são instantaneamente disponibilizadas na documentação do GraphiQL e também usamos o próprio GraphiQL para testar essas consultas e operações da nossa aplicação API.

Mas por que esse nome?

GraphQL é uma especificação de API baseada em grafos.
A figura ao lado é um grafo, com vários pontos, chamados de nó e ligados uns aos outros.
Cada nó pode ser entendido como um recurso do sistema.
Um recurso pode ser um usuário, um cliente, uma pessoa e outro recurso pode ser o país do usuário, a peça fornecida pelo fornecedor, e assim por diante.

Dessa forma, o GraphQL permite a ligação entre recursos do sistema em forma de um grafo.

As letras “Q” e “L” da palavra GraphQL, significam “Query”, de consulta e “Language” de linguagem, respectivamente.
Portanto numa tradução livre podemos entender GraphQL como “linguagem de consulta de grafos”. \o/

Que problema o GraphQL resolve?

Criada pela equipe do Facebook em 2012, GraphQL começou a ser usada nos aplicativos desta empresa, e em 2015, esta solução foi disponibilizada como open source.

Segundo Lee Byron, falamos dele anteriormente neste artigo, o problema que eles enfrentaram e que serviu de motivação para criar esta solução, era obter os dados necessários para o feed de notícias do Facebook em dispositivos móveis, usando conexões de rede lentas.

Naquela época, esta foi uma questão extremamente importante para o Facebook. E a situação se complicava diariamente pois eram crescentes os acessos ao Facebook via dispositivos móveis.

 

 

 

 

O que vamos criar?

Vamos criar uma aplicação simples com dados de usuários e países, chamada GraphQLApp, baseada na gem GraphQL e na gem GraphiQL.

Para explorar alguns conceitos, vamos manipular nossa aplicação GraphQLApp, com customizações bem simples e mostrar o GraphQL em funcionamento, bem como fazer consultas no browser, pelo GraphiQL.

Ferramentas

  • Ruby -> 2.5.0
  • Ruby On Rails -> 5.1.4
  • Gem GraphQL
  • Gem GraphiQL


12 formas de vencer o bloqueio criativo e escrever textos memoráveis (e 6 dicas extras)

Não perca nenhum conteúdo

Receba nosso resumo semanal com os novos posts, cursos, talks e vagas \o/



Passo a Passo da criação do APP GraphQLApp

I – Instalação

01) Para iniciar o nosso projeto, vamos criar uma pasta e entrar dentro dela.

02) Execute este passo somente se você usa o gerenciador de versões Ruby, RVM:

03) Agora vamos efetivamente criar nossa aplicação.

Vamos criar uma aplicação Rails com a opção “–api”, que não é obrigatório para o GraphQL, mas com “–api” estamos indicando que será uma aplicação somente backend e própria para APIs.

04) No arquivo Gemfile, inclua as gems:

05) Agora instale os módulos do GraphQL na aplicação, com o comando:

06) E agora o comando para criar o banco:

07) Continuando a instalação, vamos rodar um gerador que vem com a gem graphql, para gerar pastas, arquivos e configurações próprias desta gem.

Após o comando anterior, foi criada a pasta app/graphql/ com subpastas e arquivos do GraphQL.
Em app/controllers/, agora existe o arquivo graphql_controller.rb

08) Vamos editar o arquivo config/routes.rb.
Este arquivo agora deve ter o end-point do GraphQL:

Mas vamos acrescentar mais uma linha que dará acesso ao GraphiQL.
E vamos dizer ao Rails para permitir que essa interface GraphiQL seja acessada somente em ambiente de desenvolvimento.

Em config/routes.rb, copie e cole:

09) Mais um item para o GraphiQL rodar corretamente.
Em config/application.rb, retire um comentário. O seguinte “require” deve ficar assim:

10) Agora é o momento de saber se o GraphiQL está funcionando 😏 …. suba o servidor Rails e chame o endereço abaixo usando seu browser preferido.

11) Visite no seu browser: http://localhost:3000/gq
Note que na URL aparece o “gq”, que foi a identificação que escolhemos para chamar o GraphiQL, no passo 08.

Se as coisas estão funcionando, uma tela parecida com a tela a seguir será apresentada:

 

Perceba que ao lado direito da tela existe uma área chamada “Documentation Explorer”.
Em “Documentation Explorer” será mostrada, de forma instantânea, uma documentação de toda implementação que fizermos no GraphQL.
Experimente digitar e depois executar a seguinte pesquisa, no lado esquerda tela:

A seguinte resposta deverá aparecer:

Agora sim, temos uma aplicação pronta para começar a implementar recursos com o GraphQL e Ruby On Rails 🎉

 

II – Implementação

Nessa parte vamos desenvolver nossa aplicação. Vamos criar dois recursos, com tabelas, dados e implementar seus end-points.

Teremos usuários, e associados a eles sua nacionalidade representada por um país. Portanto teremos User e Country respectivamente.

Criando os Models e alimentado dados

01) Usando o gerador de Model, vamos criar Country e User:

02) Rodar as migrations para criar as models e tabelas:

03) Agora vem a criação de dados para trabalharmos com consulta pelo GraphQL. Entrem no console do Rails e acrescentem as informações:

Muito bem! E agora? Como vamos expor esses dados para o front-end consumir?

Resolvers

Vamos criar, o que no GraphQL é conhecido como “resolvers”, para dar à nossa aplicação, a capacidade de expor dados para consulta para algum serviço de front-end.

Criando o type User

04) Em app/graphql/types/query_type.rb

Faça o arquivo “query_type.rb” ficar da seguinte forma:

Calma, ainda não vai funcionar! ✋

Definimos o “field” User, agora temos que dizer quais são os “types”, ou seja, os campos que esse “field” usa.

Criando o field User

05) Vamos criar um arquivo “user_type” na pasta “app/graphql/types/”:

Em app/graphql/types/user_type.rb,

faça o arquivo “user_type.rb” ficar da seguinte forma:

Criando o field Country

06) Vamos criar um arquivo “country_type” na pasta “app/graphql/types/”:

Em app/graphql/types/country_type.rb,

faça o arquivo “country_type.rb” ficar da seguinte forma:

07) Execute o servidor Rails:

08) Visite no seu browser: http://localhost:3000/gq
Podemos fazer várias consultas. Segue apenas um exemplo:

Consulta de dados de usuário

Resultado

Mais um exemplo:

Consulta de dados de usuário

Resultado

Tentem vocês agora. Criem mais um método de consulta chamado “allUsers”, para retornar todos os dados.
Ficaria assim:

Consulta de dados de usuário

Resultado

 

Mutations

No GraphQL existem também as “mutations”. Servem para dar à nossa aplicação, a capacidade de receber do front-end, dados para inclusão, alteração ou exclusão de dados.

Ou seja, as “mutations” são operações de mudança de dados no back-end, enquanto que os “resolvers” que vimos anteriormente, são operações apenas para consulta de dados.

Mostramos apenas a mutation de inclusão de dados, mas caso desejem, posteriormente é possível seguindo este exemplo, construir as mutations de alteração e exclusão de dados.

Criando uma mutation para inserir dados

09) Em app/graphql/types/mutation_type.rb

faça o arquivo “mutation_type.rb” ficar da seguinte forma:

10) Em app/graphql/mutations/ crie um novo arquivo chamado “create_user.rb”

Em app/graphql/mutations/create_user.rb

faça o arquivo “create_user.rb” ficar da seguinte forma:

11) Execute o servidor Rails:

12) Visite no seu browser: http://localhost:3000/gq

Segue um exemplo inserindo dados:

Inserção de dados de usuário

Resultado

Vamos consultar o novo usuário?

Consulta de dados de usuário

Resultado

 

Conclusão

Neste artigo, criamos uma aplicação tipo API em Ruby on Rails com a gem GraphQL, que proporciona maior flexibilidade na medida que permite ao front-end construir suas próprias consultas de dados provenientes do back-end.

Acompanhamos na prática a criação da solução, aplicando os recursos de consulta e mudança de dados utilizando os recursos do GraphQL.

Na parte teórica do artigo, ficamos sabendo o que são as gems GraphQL e GraphiQL, a maneira que elas trabalham, os benefícios que trazem e os problemas que vieram resolver com essa nova proposta para aplicações tipo API.

Você pode acessar o código desenvolvido nesse tutorial clicando aqui \o/

Espero que o artigo seja útil em algum momento, e espero que tenham gostado! 👍

Até o próximo post 😎



12 formas de vencer o bloqueio criativo e escrever textos memoráveis (e 6 dicas extras)

Não perca nenhum conteúdo

Receba nosso resumo semanal com os novos posts, cursos, talks e vagas \o/




Você é novo por aqui?

Primeira vez no OneBitCode? Curtiu esse conteúdo? O OneBitCode tem muito mais para você!

O OneBitCode traz conteúdos de qualidade e em português sobre programação com foco em Ruby on Rails e outras tecnologias como Angular, Ionic, React, desenvolvimento de Chatbots e etc.

Se você deseja aprender mais, de uma forma natural e dentro de uma comunidade ativa, visite nosso Facebook e nosso Twitter, veja os screencasts e talks no Youtube, alguns acontecimentos no Instagram, ouça os Podcasts e faça parte de nossa Newsletter.

Além disso, também estamos com alguns e-Books muito interessantes para quem deseja se aprimorar como programador e também como freelancer (os e-Books são gratuitos!):

Espero que curta nossos conteúdos e sempre que precisar de ajuda com os tutoriais, fala com a gente! Seja por Facebook ou e-mail, estamos aqui para você 🙂

Bem-vindo à família OneBitCode \o/

Março 23, 2018

Deixe um comentário

1 Comentário em "GraphQL: a linguagem do Facebook para APIs"

avatar
  Subscribe  
newest oldest most voted
Notify of
Feito com s2 por OneBitCode
%d blogueiros gostam disto: