GraphQL parte 1

Alexandre E Souza
jslovers
Published in
4 min readOct 12, 2018

--

Em plena onda onde, so se fala de rest, quem é esse tal de GraphQL e para que serve ?

Segundo o site graphql.org.
GraphQL é uma linguagem de consulta para sua API e um tempo de execução do lado do servidor para executar consultas usando um sistema de tipos que você define para seus dados. O GraphQL não está vinculado a nenhum banco de dados ou mecanismo de armazenamento específico e, em vez disso, é respaldado pelo código e pelos dados existentes.

Ou seja, é uma forma de ter uma API para consultar dados usando uma linguagem ao meu ver mais efetiva que a tradicional, vamos ilustrar isso.

No exemplo a cima temos, uma associação , muito usada onde em uma api rest, teríamos.

#listar usuarios
http://localhost:3000/users
#listar empresas
http://localhost:3000/companies
#listar usuarios por empresa
http://localhost:3000/companies/1/users

teria 3 URLs para fazer as consultas, mas como pegar o usuário, e todos que trabalham na mesma empresa que ele? claro que isso em uma rest é possível usando combinações de 2 urls, mas teria uma forma mais simples?

imagine em uma única requisição se passasse o que precisa, como os dados do usuário, e da empresa que ele pertence , e poderia ser feito mais.

Podemos pegar, os outros usuários da empresa, sem ter muito trabalho para isso.

Mas como podemos, começar a usar com graphQL ?
Existem vários tutoriais, e aqui não será diferente, vamos brincar um pouco com essa tecnologia.

Inicialmente vamos instalar as dependências .

npm i express express-graphql -S

com isso vamos criar nosso server.js onde iremos brincar um pouco.

feito isso, ainda não irá funcionar pois falta nossos schemas, vamos também instalar o json-server, e o axios para termos uma visão de como seria usando graphQL com uma api ja existente.

npm i json-server axios -S

feito isso, vamos criar um script para iniciar o json-server, em scripts no nosso package.json.

"json:server": "./node_modules/json-server/bin/index.js --watch db.json"

dessa forma ele ira criar o db.sjon na raiz onde ira ler os dados e gravar.
mais detalhes em https://github.com/typicode/json-server

agora vamos colocar alguns dados nesse db.json

dessa forma ja temos, nossos dados para trabalhar, vamos criar nosso schema.js dentro da pasta shema.

inicialmente nosso schema ficará dessa forma, dessa forma vamos conseguir pegar os usuários em nosso db.json de forma muito simples, mas vamos entender o que esta acontecendo.

inicialmente importamos, as dependências o que iremos usar.

const graphql = require('graphql');
const axios = require('axios');

Logo em segui , temos os tipos de dados que o graphQL trabalha inicialmente usaremos , apenas alguns.

const {
GraphQLObjectType,
GraphQLString,
GraphQLInt,
GraphQLSchema
} = graphql;

percebam que temos, alguns tipos conhecidos como Int, String, agora vamos criar nosso primeiro Type, importante lembrar que o Type é diferente da model.

no nosso UserType é algo bem simples.

const UserType = new GraphQLObjectType({
name: 'User',
fields: () => ({
id: {type: GraphQLString},
firstname: {type: GraphQLString},
age: {type: GraphQLInt}
})
});

Temos então, os campos que iremos trabalhar, todo campo que se queira utilizar deve estar no Type da Model, feito isso vamos criar nosso Root, onde iremos colocar os types e mutations que iremos ver na proxima parte desse artigo.

const RootQuery = new GraphQLObjectType({
name: 'RootQueryType',
fields: {
user: {
type: UserType,
args: {id: {type: GraphQLString}},
resolve(parentValue, args) {
return axios.get(`http://localhost:3000/users/${args.id}`)
.then(res => res.data)
.catch(error => console.log(error));
}
}
});

nessa parte temos o fields, onde temos user, que sera como nosso type sera chamado, onde falamos que o type dele é o UserType, e temos o resolve onde recebe os dados do type indicado e o args, que são os argumentos passados na query, como queremos pegar os dados da model é importante o Type ter o mesmo nome que sera retornado pela api.

feito isso é so exportar e usar no server.js

module.exports = new GraphQLSchema({
query: RootQuery
});

em nosso server.js ficara assim.

agora é so rodar o server.js e o script do json-server e ver a magica :)

entrar em

http://localhost:4000/graphql

até a próxima parte pessoal :)

Parte 2
https://medium.com/@__InDev/graphql-parte-2-13dcac84fa2

--

--