Hands On GraphQL: Faça sua primeira API!
Olá! Esse artigo surgiu de uma talk que fiz aqui na Equals.
Os slides dessa apresentação você pode encontrar aqui.
Disclaimer: Esse é um hands on com a GraphQL, uma tecnologia um tanto curiosa a primeira vista. Estou assumindo que você já ouviu falar sobre a tecnologia, mas ainda não colocou a mão na massa. Nesse artigo iremos construir uma API bem simples, usando Express e JSON Server, e você só vair precisar do Node.js instalado para rodar o projeto. Então vamos lá!
Todo o código está disponível em meu GitHub. Clone o repositório na sua máquina, e vamos ver como tudo isso funciona. Primeiramente vamos abrir o package.json, e ver o que temos como dependência.
Axios é o nosso cliente HTTP, express-graphql o nosso middleware da rota “/graphql”, json-server nossa base de dados mockada e por fim, usaremos o nodemon para automatizar a execução do nosso server.js
No arquivo server.js, registramos um middleware para a rota “/graphql” da nossa API. Esse módulo espera um objeto do tipo GraphQLSchema, que estamos exportando no schema.js.
Logo abaixo, uso esses tipos para definir o tipo CustomerType. Quando criamos um tipo no GraphQL, definimos as propriedades name, description e fields, que recebe uma função que define os campos que nosso tipo irá possuir.
Veja que a propriedade purchases é diferente das demais, sendo uma GraphQLList de PurchaseType, um outro tipo que iremos definir. Interessante! Essa é uma das maneiras que podemos relacionar nossos dados na API. Agora veremos o PurchaseType.
Esse tipo é até mais simples que nosso CustomerType. Ele tem um id, um product_id e um total_spent. Perceba que aqui, ao invés de termos um product_id, poderíamos definir um ProductType, por exemplo, e começar a criar outros relacionamentos.
Agora vamos ver o RootQuery, um outro objeto em que definimos quais campos nossa rota “/graphql”. Criei um campo customer que retorna um único objeto CustomerType, de acordo com o id da consulta.
Também há um campo customers, que retorna uma GraphQLList com todos os objetos CustomerType existentes na nossa “base de dados” rodando no JSON Server.
Ok, já podemos consultar dois campos da nossa API, vamos testar? Acesse a página http://localhost:4000/graphql. Nessa URL temos a GraphiQL, uma interface gráfica que serve como sand-box brincarmos um pouco.
Escrevemos as consultas no lado esquerdo, e com Ctrl+Enter vemos o resultado no lado direito. Simples. Nessa consulta, estou buscando pelo customer de id = “1”. Logo em seguida eu digo eu seleciono exatamente que campos eu quero na resposta. Entender a importância desse fator é essencial.
Pronto! Temos uma API básica para brincarmos. Ainda no arquivo schema.js, há exemplos de operações CRUD nesses dois tipos definidos. No final do arquivo README.md você pode ver outros tipos de consultas, envolvendo aquele relacionamento entre Customers e Purchases mencionado anteriormente.
Nesse arquivo também como rodar o projeto em sua máquina, caso você tenha experiência com Node.js e NPM.
Caso você tenha se interessado por essa tecnologia, você pode encontrar nesse artigo publicado na freeCodeCamp, um conteúdo bem completo, explicando todo o ecossitema GraphQL e seus diversos conceitos.
Também recomendo a série de vídeos sobre GraphQL no canal funfun function do grande Mattias Petter Johansson. Aqui vai o primeiro vídeo da série:
Caso tenha gostado, me siga aqui no Medium, e também siga o Equals Lab para receber bastante conteúdo legal. Até a próxima!
