DEV Community: Rafael Lopes de Melo

🔥 GraphQL de forma simples!

Rafael Lopes de Melo — Tue, 07 Jul 2020 20:37:39 +0000

Muito provavelmente você que está lendo este artigo já ouviu falar de GraphQL e está interessado em entender suas vantagens e utilidades. Talvez já saiba do que se trata esta tecnologia ou qual problema ela resolve; ou talvez esteja totalmente perdido e não saiba absolutamente nada sobre ela.

Seja qual for o seu caso, recomendo fortemente que fique comigo até o final do artigo, prometo que irá ter uma visão bem clara sobre o que de fato é esta tecnologia a qual está se tornando tão popular.

💜 Afinal, o que é o GraphQL?

GraphQL é uma linguagem de Query (bem como SQL) criada pelo Facebook em 2012 e lançada publicamente em 2015. É visto pela comunidade como uma alternativa ao padrão REST, o qual reina sobre o desenvolvimento.

É importante eliminar logo de cara a ideia de que o GraphQL vai matar o REST. Ambos os estilos de arquitetura possuem suas próprias características e cada uma se encaixa em situações diferentes.

📐 Arquitetura e... Fast Food?

Uma forma de entender as diferenças entre REST e GraphQL é pensando em tipos de Fast Food... Calma, eu sei que parece estranho (talvez até absurdo), mas vou clarear sua mente, vem comigo!

Pense no REST como um Fast Food o qual já possui lanches prontos e um cardápio bem definido (como o Mc Donald's ou Burger King), ou seja, possui opções pré-determinadas que entregarão sempre o mesmo resultado. Até pode ser que após o recebimento do pedido você tire o picles, mas mesmo assim você terá pago por ele!

Por outro lado, o GraphQL pode ser comparado a um Fast Food mais customizável, onde você escolhe os ingredientes que estarão no seu lanche (como o Subway), ou seja, na hora do pedido você é capaz de escolher exatamente o que você vai querer comer, sem mais nem menos!

✨ O que o GraphQL veio resolver?

Agora vamos entender como o exemplo anterior se aplica no mundo real. Imagine que um único back end construído com a arquitetura REST é responsável por servir diversos front ends e tem a função de CRUD básico de usuários com a seguinte estrutura:

type User {
  name: string;
  nickname: string;
  password: string;
  active: boolean;
};

Aqui vemos que um usuário possui nome, apelido, senha e um booleano que indica se está ativo ou não. Agora imagine que temos uma rota "/users" que retorna todos os dados de todos os usuários do banco de dados.

Tudo muito lindo, tudo muito belo, mas há um porém. O primeiro front end servido por esta API utiliza apenas o nome e o estado de atividade dos usuários, enquanto o segundo utiliza o apelido e a senha, e o terceiro utiliza todos os dados retornados.

O que acontece é que no primeiro e segundo front ends ocorre um fenômeno chamado Over-Fetching, isto é, receber dados em excesso de uma requisição, os quais serão descartados. Olhando por cima talvez não aparente ser um problema tão horrível assim, mas isto pode causar gastos a mais em servidores que taxam a quantidade de dados trafegados (e tenho certeza que você não quer aumentar os gastos da tua empresa).

⚙ Funcionamento do GraphQL

Ao contrário do que acontece no padrão REST, onde há várias rotas para diferentes requisições, o GraphQL possui apenas um único endpoint, geralmente "/graphql", o qual recebe apenas requisições POST e é capaz de enviar quaisquer dados da API.

O primeiro passo na ferramenta é instalar e iniciar um servidor compatível com o GraphQL, neste exemplo usaremos o Apollo Server. Para armazenar os dados apenas criaremos um array de objetos em memória.

// Primeiro importamos as dependências necessárias
const { Apollo Server, gql } = require('apollo-server');

// Criamos a variável que vai armazenar nossos dados
const data = [
  {
    name: 'Rafael Melo',
    nickname: 'LopeKillz',
    password: '132456',
    active: true
  }
];

// E iniciamos o servidor 
const server = new ApolloServer();
server.listen();

Porém, caso tente rodar este código, receberá um erro. Isto acontece porque a classe Apollo Server recebe dois parâmetros obrigatórios: typeDefs e resolvers.

Começando pelo typeDefs, este é basicamente as definições de tipo das respostas da API, podemos dizer que significa o que vai ser retornado. No exemplo a seguir defino o tipo de User e uma Query que retorna todos os usuários em um array. Veja:

const typeDefs = gql`
  type User {
    name: string!
    nickname: string!
    password: active!
    active: boolean!
  }

  Type Query {
    users: [User]! // Query 'users' retorna um array de usuários
  }
`

Neste exemplo, todos os dados são obrigatórios, ou seja, não podem ser "null" ou "undefined". Esta característica é definida pelo "!" após a declaração do dado.

E agora partindo para os resolvers, estes são basicamente o como as expectativas colocadas nos typeDefs serão resolvidas. Observe:

// Defino como a Query 'users' retornará o array de usuários, neste caso, basta retornar a variável que criamos anteriormente
const resolvers = {
  Query: {
    users: () => data 
  }
}

Para finalizar, apenas passamos os parâmetros necessários para o Apollo Server. No fim, seu código deverá parecer com este:

const { Apollo Server, gql } = require('apollo-server');

const data = [
  {
    name: 'Rafael Melo',
    nickname: 'LopeKillz',
    password: '132456',
    active: true
  }
];

const typeDefs = gql`
  type User {
    name: string!
    nickname: string!
    password: active!
    active: boolean!
  }

  Type Query {
    users: [User]!
  }
`

const resolvers = {
  Query: {
    users: () => data 
  }
}

const server = new ApolloServer({typeDefs, resolvers});
server.listen();

Após isto, podemos rodar o servidor e acessar o playground do GraphQL no localhost:4000. Para testar nossa API podemos rodar a query users requisitando nome, apelido, senha e estado de atividade e obter o seguinte resultado:

// Query
query {
  users{
    name,
    nickname,
    password,
    active
  }
}

// Resultado

data: {
  "users": [
    {
      name: 'Rafael Melo',
      nickname: 'LopeKillz',
      password: '132456',
      active: true
    }
  ]

✅ Conclusão

O GraphQL é uma linguagem de consulta criada pelo Facebook que tem o objetivo de facilitar a manipulação de dados de forma eficaz sem a necessidade da criação de infinitas rotas na API.

Ao contrário do que se pode pensar, o REST não vai morrer por conta da popularização do GraphQL, os dois possuem propostas diferentes para diferentes situações. Por isto, não é recomendado utilizar a tecnologia do Facebook em todos os projetos, visto que é relativamente nova e está ainda construindo seu lugar no mercado de trabalho.

Caso queira aprender mais sobre o assunto recomendo que visite as referências logo abaixo e, principalmente, a documentação oficial.

📜 Referências

Documentação oficial do GraphQL: https://graphql.org/

"Curso de GraphQL para iniciantes", por Mateus Silva: https://www.youtube.com/playlist?list=PLPXWI3llyMiK9uw7tfljM2hnQl2qu6CeT

"Introduction to GraphQL", por Tomek Poniatowicz: https://dev.to/graphqleditor/introduction-to-graphql-2nj0

"Você conhece o GraphQL e como ele pode te ajudar?", por Akira Hanashiro: https://www.treinaweb.com.br/blog/voce-conhece-o-graphql-e-como-ele-pode-te-ajudar/

"Entendendo o que é o GraphQL através de exemplos", por Vinicius Reis: https://blog.codecasts.com.br/entendendo-o-que-%C3%A9-graphql-atrav%C3%A9s-de-exemplos-c2fa35e8bf63

📚 Guia de Tipos para TypeScript

Rafael Lopes de Melo — Wed, 01 Jul 2020 21:23:24 +0000

Uma das linguagens mais interessantes para o desenvolvimento de aplicativos em larga escala é o TypeScript. Ele é único pois se trata de um "superset" ("superconjunto") JavaScript, mas com tipos, interfaces e diversas outras adições; isto quer dizer que não tem a intenção de substituir o JavaScript, apenas pretende facilitar o desenvolvimento e tornar aplicações JS mais escaláveis e manuteníveis.

Esta linguagem não requer conhecimentos extremamente avançados em JavaScript ou em uma linguagem fortemente tipada (Java ou C), sendo assim, um desenvolvedor intermediário em JS já pode usufruir de suas vantagens, visto que é possível aprender suas funcionalidades aos poucos e aplicá-las gradativamente.

Este guia busca abordar conceitos ligados à teoria da linguagem, deixando de lado certas partes como instalação e configuração.

💙 Pequenas implementações da linguagem

Antes de entrarmos a fundo nos tipos do TypeScript, é interessante observar suas pequenas implementações e como elas funcionam dentro da linguagem.

Existem 2 melhorias principais em funções: parâmetros opcionais e valores padrão.

Parâmetros opcionais

São facilmente identificados pelo "?" após sua declaração:

function myFunction(arg1, arg2, optionalArg?) {
 //...
}

Parâmetros com valor padrão

Para criar um valor padrão para um parâmetro, basta defini-lo junto com sua declaração na função:

function myFunction(arg1, arg2, withDefaultValueArg = 30) {
 //...
}

Ao definir um valor padrão a um argumento, ele automaticamente se torna opcional.

⚡️ Tipagem

Ao contrário do que muitos pensam, o TypeScript não é uma linguagem fortemente tipada, visto que não é necessário tipar todas as variáveis. Os tipos de variáveis simples conseguem ser inferidos automaticamente pelo TS ao serem declaradas, como um number ou string. A esta funcionalidade damos o nome de Inferência de Tipos.

Qualquer variável cujo tipo não pode ser inferido pelo TS, recebe o tipo "any" automaticamente.

Tipos:

Any:

Exatamente qualquer coisa, usado quando não se sabe ao certo o tipo da variável, a principal situação é quando não sabemos os tipos das entidades de uma biblioteca terceira. Seu uso deve ser evitado ao máximo.

let anyType: any;
anyType = 5;
anyType = 'Hello World';
anyType = true;

String:

Conjunto de caracteres envoltos de aspas simples ou duplas ou crases (Template String). Estas representam letras, palavras ou frases.

const myString: string = 'My String';

Number:

Qualquer número, seja ele natural, inteiro ou racional. Não possuem aspas, pois assim seriam tratados como string.

const myNumber: number = 8;

Boolean:

Tipo de variável que pode receber apenas dois valores: "true" ou "false".

const myBoolean: boolean = true;

Array:

Um array é uma lista não ordenada de dados, possui diversos elementos de mesmo tipo.

const myNumberArray: Array<number> = [1, 2, 5, 10];

const myStringArray: Array<string> = ['Hello', 'World', '!'];

Tuple:

Apesar de o JS em si não possuir tuplas, o TS permite emulá-las em um array. A tupla é uma lista, geralmente pequena, de elementos finitos com cada elemento possuindo um tipo específico.

const myTuple: [string, number] = ['Hello World', 16];

Uma tupla pode conter itens opcionais utilizando o "?".

Enum:

É uma forma de adicionar nomes familiares a uma lista de números. Por padrão, os valores começam em 0 e são auto incrementais.

enum MyNumbersList {Zero, One, Two}

const myNumber: MyNumberList = MyNumbersList.One; // 1

Podemos também definir um valor específico para cada elemento.

enum AgeList {
  MyAge = 18,
  DadAge = 40,
  MomAge = 38
}

const myAge: AgeList = AgeList.MyAge; // 18

Além disso, podemos fazer o processo inverso.

enum ColorList {Red, Green, Blue}

const myColor: string = ColorList[1]; // 'Green'

Void

É como o oposto de any, void é a ausência completa de tipo. Geralmente é utilizado para tipar um função quando a mesma não retorna nada.

function helloWorld(): void {
  console.log('Hello World!')
}

Atribuir void a uma variável não é útil pois só podemos defini-las como null ou undefined nesses casos.

Caso desejemos guardar o retorno de uma função void em uma variável, teremos o valor undefined.

Null e Undefined

Assim como void, null e undefined não são muito úteis por si só, geralmente são utilizados com Tipos de União (que veremos mais para frente). Null e undefined simbolizam a ausência de valores em uma variável.

const u: undefined = undefined;
const n: null = null;

Never

Este tipo indica que uma função nunca deve retornar, quando temos certeza de que algo nunca vai ocorrer. Alguns casos em que este tipo é utilizado são:

// Função que sempre lança um erro:
function error(): never {
  throw new Error('Something went wrong!')
};

// Função com um fim inalcançável 
function Loop() {
  while(true) {
    console.log('I always do something and never end')
  }
}

Object

Segundo a documentação do TypeScript, um objeto é tudo aquilo que não se encaixa em nenhum tipo primitivo.

// Define as propriedades do objeto
const person: {
  name: string;
  age: number;
  description?: string; // Propriedade opcional
};

// Dá um valor a cada propriedade
person = { 
  name: 'Rafael',
  age: 18
};

👫🏽 Tipos de União

Também chamados de Union Types, esta funcionalidade é utilizada quando precisamos que uma variável possa conter mais de um tipo.

// Declara uma variável que recebe nome (string) e idade (string ou number)
function sayMyNameAndAge(name: string, age: string | number) {
  console.log(`My name is ${name} and I'm ${age} years old`)
};

sayMyNameAndAge('Rafael', 18); // OK
sayMyNameAndAge('Rafael', '18'); // OK

🔍 Asserção de tipo

Em inglês, Type Assertions. Algumas vezes haverá situações em que você saberá mais sobre um valor do que o próprio TypeScript sabe. Asserção de tipo é uma forma de dizer ao compilador "confie em mim, eu sei o que estou fazendo", evitando possíveis erros em tempo de compilação (não tem influência em tempo de execução).

Asserções de tipo possuem duas sintaxes possíveis:

Sintaxe Menor que/Maior que (angle-bracket syntax)

const message: any = 'This is a string with any type!';

const messageLength: number = (<string>message).length;

Sintaxe "as" (as syntax)

const message: any = 'This is a string with any type!';

const messageLength: number = (message as string).length;

🗺 Type Alias

Basicamente cria um nome para determinado tipo, são similares às interfaces, mas podem nomear primitivos, uniões, tuplas, etc.

type myTuple = [string, number, boolean];

const tuple: myTuple = ['Hello', 25, true] // OK

Podemos também utilizar esta funcionalidade para definir exatos valores possíveis para uma variável:

type OS = 'Windows' | 'Mac OS' | 'Linux';

const myOS: OS = 'Windows'; // OK
const myPhoneOS: OS = 'ios' // Error

🖥 Interface

Uma interface é, em essência, os tipos literais de um objeto. Esta funcionalidade permite que utilizemos objetos do mesmo tipo sem repetição de código.

Observe a declaração de dois objetos de mesmas propriedades sem o uso de interfaces:

const point: {
  x: number;
  y: number;
};

point = { x: 5, y: 12 };

const point2: {
  x: number;
  y: number;
};

point2 = { x: 8, y: 20 };

E agora veja o mesmo exemplo, porém, desta vez, utilizando interfaces.

interface IPoint {
  x: number;
  y: number;
};

const point: IPoint = { x: 5, y: 12 };
const point2: IPoint = { x: 8, y: 20 };

Podemos também estender uma interface caso queiramos adicionar certa propriedade a determinado objeto. Veja:

interface IPoint {
  x: number;
  y: number;
};

interface IPoint3d extends IPoint{
  z: number;
};

const point: IPoint = { x: 5, y: 12 };
const point3d: IPoint3d = { x: 8, y: 20, z: 5 };

Ou ainda melhor, podemos definir "z" como uma propriedade opcional e assim criar uma interface única. Observe:

interface IPoint {
  x: number;
  y: number;
  z?: number;
};

const point: IPoint = { x: 5, y: 12 };
const point3d: IPoint = { x: 8, y: 20, z: 5 };

Segundo a documentação, apesar de serem parecidos, as interfaces trazem maiores capacidades dentro do código. Por isto, em uma perspectiva ideal, é preferível utilizar interfaces ao invés de type alias, sendo este utilizado apenas em último caso.

📐 Tipos de Intersecção

Também chamados de Intersection Types, esta funcionalidade faz com que determinada variável tenha que atender aos contratos de todos os tipos assinalados a ela. Veja:

interface IUser {
  name: string;
  password: string;
};

interface IChar {
  nickname: string;
  level: number;
};

type UserInfo = IUser & IChar;

const userInfo: UserInfo = {
  name: 'Rafael',
  password: '123456',
  nickname: 'LopeKillz',
  level: 255
};

💊 Tipos Genéricos

Tipos genéricos ou Generic Types podem ser entendidos como um tipo que deve incluir ou fazer referência a outro tipo. Os principais e mais comuns são Arrays e Promises.

// Array
const numbersArray: Array<number> = [0 , 5, 10]; // Declara um Array de números

// Promise
async function myAsyncFunction(): Promise<string>; // Declara uma Promise que retorna uma string quando resolvida.

Com o uso dos tipos genéricos, podemos evitar a utilização do tipo any em uma função que utiliza um parâmetro com diversos tipos possíveis. Com esta estratégia, permitimos que o tipo do parâmetro seja declarado apenas quando a função é chamada. Veja:

// Primeiro declaramos uma função que recebe um parâmetro de qualquer tipo e o retorna
function indentify<T>(arg: T): T {
  return arg;
};

// E então podemos chamar a função acima passando como parâmetro uma string
identify<string>('Hello World!');

// Ou podemos também chamar a mesma função passando um number
identify<number>(18);

Na maioria das vezes não precisamos definir o tipo específico do parâmetro durante a chamada da função graças à inferência de tipos.

✔️ Conclusão:

Este foi um guia geral sobre os tipos do TypeScript e como utilizá-los da melhor forma. Evidente que esta linguagem possui diversas outras funcionalidades, como decoradores e símbolos, mas é importante começar pelo básico e se aprofundar aos poucos.

Este artigo é uma ótima porta de entrada para o mundo do JavaScript tipado, visto que passamos por muitas funcionalidades de forma simples e descomplicada. Espero ter ajudado quem dedicou seu tempo a ler todos os tópicos, e qualquer dúvida estou à disposição!

Caso queira se aprofundar mais neste assunto, recomendo visitar todas as referências que deixei logo abaixo, principalmente a documentação oficial!

📜 Referências:

Documentação oficial do TypeScript: https://www.typescriptlang.org/docs/home.html

Artigo de Eduardo Rabelo, "TypeScript: O guia definitivo": https://medium.com/@oieduardorabelo/typescript-o-guia-definitivo-1a63b04259cc

Mini curso de Willian Justen no YouTube: https://www.youtube.com/playlist?list=PLlAbYrWSYTiPanrzauGa7vMuve7_vnXG_

Tutorial de TypeScript em TutorialsTeacher: https://www.tutorialsteacher.com/typescript

Artigo "Tipos Básicos - Manual do TypeScript", de WebDevBr: https://webdevbr.com.br/tipos-basicos-manual-do-typescript