DEV Community: Vinicius Savegnago

5 Typescript tips to save your day

Vinicius Savegnago — Thu, 02 Nov 2023 00:12:57 +0000

Hey TypeScript enthusiasts! In this post, we'll explore some tips that might be very useful in your daily tasks.

1. Template Literal Types

You can use template literal types to create complex and calculated types.

type Color = "red" | "green" | "blue";

type CSSColor = `bg-${Color}`; // Template literal type

const redBackground: CSSColor = "bg-red";
const greenBackground: CSSColor = "bg-green";
const blueBackground: CSSColor = "bg-blue";

// This will trigger a type error:
const invalidColor: CSSColor = "bg-yellow";

In this example, we create a type CSSColor using a template literal type. It allows us to define CSS class names based on known colors. Attempting to assign an invalid color like "bg-yellow" will result in a type error, ensuring type safety.

2. Nullish Coalescing Operator

The nullish coalescing operator (??) provides a default value for a variable only if the variable is null or undefined.

const userSettings = {
  theme: "light",
  showNotifications: null,
};

const theme = userSettings.theme ?? "default";
const notifications = userSettings.showNotifications ?? true;

console.log(theme);  // "light"
console.log(notifications);  // true

In this example, we use the (??) operator to set default values for theme and notifications. It ensures that we only fall back to the default value if the original value is explicitly null or undefined, not for other falsy values like an empty string or false.

3. Mapped Types

We can use mapped types to create new types by transforming or modifying the properties of an existing type.

interface User {
  id: number;
  name: string;
  email: string;
}

type ReadonlyUser = {
  readonly [K in keyof User]: User[K];
};

const user: ReadonlyUser = {
  id: 1,
  name: "Alice",
  email: "alice@example.com",
};

// This will trigger a type error:
user.name = "Bob";

In this example, we define a ReadonlyUser type using a mapped type. It makes all properties of User readonly, preventing modifications after initialization. This is a simple example, but mapped types can be used for more complex transformations and combinations of types.

4. Tuple Types

Tuple types can define arrays with a fixed number of elements of specific types.

type Point = [number, number];

const origin: Point = [0, 0];
const position: Point = [2, 4];

// This will trigger a type error:
const invalidPoint: Point = [1, "hello"];

In this example, we define a Point type as a tuple with two elements, both of type number. This allows us to create arrays with a fixed structure, ensuring that the number and types of elements are correct.

5. Pick Utility Type

Utilize the Pick utility type to select specific properties from an object type.

type User = {
  id: number;
  name: string;
  email: string;
  age: number;
};

type UserProfile = Pick<User, "name" | "email">;

const user: User = {
  id: 1,
  name: "Alice",
  email: "alice@example.com",
  age: 30,
};

const profile: UserProfile = { name: user.name, email: user.email };

For this example, we use the Pick utility type to create a UserProfile type that includes only the "name" and "email" properties from the User type. This is useful when you want to create a smaller object with a subset of properties.

Here you have it, 5 great tips to help with your Typescript code.

If you enjoy this content, leave a reaction!
Thanks!

Happy Coding! 🚀

Outros 3 Padrões de Arquitetura de Software Simplificados e Exemplificados

Vinicius Savegnago — Tue, 14 Feb 2023 18:51:55 +0000

Hoje eu trago outros três padrões bem comuns de arquitetura de software para explorarmos. Todos criados para atender necessidades específicas e tornar o desenvolvimento de software mais eficiente e fácil.

1. Arquitetura em Camadas

A arquitetura de software em camadas é uma estrutura que divide o software em diferentes camadas, cada uma com sua própria responsabilidade e finalidade. Cada camada depende das camadas abaixo dela, mas não depende das camadas acima. Isso cria uma estrutura em forma de "pirâmide", onde cada camada é construída sobre as camadas anteriores e fornece suporte para as camadas superiores.

Camada de Apresentação (UI)
- Responsável por apresentar as informações para o usuário final.
Camada de Aplicação
- Responsável por lidar com as regras de negócio e os processos de negócio da aplicação.
Camada de Domínio
- Responsável por armazenar e recuperar informações.
Camada de Infraestrutura
- Responsável pelas informações no banco de dados.

Vantagens

Fácil de entender e de se aplicar.
Cada camada tem sua própria finalidade distinta, sendo mais fácil manter o software e realizar mudanças ou atualizações.

Desvantagens

Escalabilidade é complicado pois a estrutura não permite fácil crescimento.
Existe uma certa dependência entre as camadas da estrutura.

Exemplo em um cenário real

Um sistema de E-commerce:

Camada de Interface:
- Essa será a interface do usuário, permitindo que os clientes visualizem produtos e façam compras.
Camada de Aplicação:
- Aqui funciona a lógica de negócios, como cálculo de preços, gerenciamento de estoque e processamento de pagamentos.
Camada de Domínio:
- Recupera informações relevantes do sistema, como informações do produto ou histórico de compras.
Infraestrutura:
- Um servidor rodando PostgreSQL com os dados necessários para o funcionamento do E-commerce.

2. Padrão Broker

Broker é uma arquitetura de sistemas distribuídos em que um componente intermediário, chamado de broker, atua como uma peça entre diferentes componentes distribuídos. O broker por sua vez, é responsável por receber mensagens enviadas por um componente e encaminhá-las para o componente apropriado.

Vantagens

Permite que componentes diferentes possam ser adicionados ou removidos do sistema sem afetar o restante dos componentes.
Pode ser tolerante a falhas, ou seja se um componente falhar, o broker pode redirecionar as mensagens para um componente de backup ou tomar outras medidas para garantir que o sistema continue funcionando.

Desvantagens

A adição de um componente intermediário pode aumentar a complexidade do sistema.
A arquitetura de software Broker pode ter um impacto negativo no desempenho do sistema.

Exemplo em um cenário real

Chat online:

O broker atua como um intermediário para rotear mensagens de chat entre usuários. Quando um usuário envia uma mensagem para outro, a mensagem é enviada para o broker, que a encaminha para o destinatário correto.

Também pode ter a capacidade de armazenar mensagens offline e coordenar a entrega de mensagens quando o destinatário estiver online novamente, garantindo que as mensagens não sejam perdidas.

3. Arquitetura Peer-to-peer

Arquitetura distribuída em que os componentes têm capacidade tanto de fornecer quanto de consumir recursos. Cada componente da rede P2P é chamado de peer, e eles se comunicam entre si diretamente, sem a necessidade de um servidor central para coordenar as comunicações.

Vantagens

Cada dispositivo é considerado um nó e pode participar das atividades da rede, o que significa que a rede pode crescer sem um limite de tamanho.
Não há necessidade de um servidor central que controle a rede.

Desvantagens

Confiabilidade da rede depende da disponibilidade e da qualidade dos dispositivos individuais na rede.
O tráfego de dados é compartilhado entre os dispositivos na rede, o que pode resultar em uma largura de banda insuficiente.

Exemplo em um cenário real

BitTorrent:

Nesta rede, os usuários podem baixar e compartilhar arquivos diretamente entre si, sem a necessidade de um servidor central. Cada usuário é considerado um nó na rede e pode fornecer e obter arquivos de outros usuários. Dessa forma, a rede é capaz de lidar com uma grande quantidade de tráfego de dados, pois cada usuário contribui para o compartilhamento dos arquivos.

Finalizando...

Este foram outros três padrões que temos na arquitetura de software, trarei mais num futuro próximo.

Espero que isso ajude você de alguma maneira! 😄

Happy Coding!

Links úteis:
Broker Pattern
Arquitetura em camadas
Peer-to-peer

3 Padrões de Arquitetura de Software Simplificados e Exemplificados

Vinicius Savegnago — Fri, 10 Feb 2023 14:32:54 +0000

Como já abordado no post anterior, Arquitetura de Software é um aspecto crítico do desenvolvimento de software que envolve a definição da estrutura geral de um sistema para atender aos requisitos e restrições do problema a ser resolvido. Diversas vezes esses problemas são muito parecidos, fazendo assim possível aplicar determinados tipos de arquitetura existentes.

Hoje eu trago três padrões comuns de arquitetura de software, criados e utilizados para servir um propósito específico.

1. Model-View-Controller (MVC)

O MVC oferece uma clara separação de preocupações, o que torna o código mais fácil de entender, manter e modificar. Este padrão é amplamente utilizado no desenvolvimento de aplicativos desktop e web.

Este padrão separa a aplicação em três componentes principais:

Model:
- Os dados e a lógica de negócios da aplicação. Armazena e manipula dados e define as regras para como os dados podem ser usados.
View:
- Responsável por exibir os dados para o usuário. Fornece a interface do usuário e recebe entradas do usuário.
Controller:
- Fica entre os componentes Model e View. Recebe entradas do usuário da View, processa essas entradas e atualiza o Model de acordo.

Vantagens

Separação de preocupações, dividindo a aplicação em três componentes distintos.
A apresentação de dados é separada das regras de negócio e do controle.

Desvantagens

Pode se tornar complexo quando aplicado a aplicações grandes e complexas.
Pode haver um forte acoplamento entre os componentes, o que pode tornar a aplicação mais difícil de manter e modificar.

Exemplo em um cenário real

Uma aplicação de player de música:

Model:
- A biblioteca de música, incluindo as músicas, playlists e metadados. Armazena e manipula os dados.
View:
- A interface do usuário do player de música, incluindo playlists, capas de álbuns e informações sobre a música. Exibe os dados para o usuário e recebe entradas do usuário, como tocar, pausar, pular e embaralhar.
Controller:
- O código que manipula as entradas do usuário, como tocar, pausar, pular e embaralhar, e atualiza o Model.

2. Arquitetura de Micro-serviços

Projetada para grandes aplicações de software, quebradas em pequenos serviços independentes que se comunicam entre si por uma rede. Cada micro-serviço é responsável por uma função específica, como autenticação de usuários, gerenciamento de catálogo de produtos ou gerenciamento de pedidos.

Vantagens

É possível escalar individualmente cada serviço, de acordo com as necessidades, sem afetar o funcionamento dos outros serviços.
Cada serviço pode ser desenvolvido, implantado e atualizado independentemente, o que facilita a manutenção e evolução da aplicação.
Se um serviço falhar, isso não afetará o funcionamento dos outros serviços, o que aumenta a disponibilidade e robustez da aplicação.

Desvantagens

O gerenciamento e integração de vários serviços pode ser complexo e desafiador.
A comunicação entre serviços através de uma rede pode resultar em latência e impactar o desempenho da aplicação.

Exemplo em um cenário real

Uma aplicação de e-commerce:

Serviço de autenticação de usuário:
- Responsável por gerenciar o login e autenticação dos usuários.
Serviço de catálogo de produtos:
- Gerencia a listagem de produtos disponíveis para compra, incluindo informações sobre preços, estoques e descrições.
Serviço de gerenciamento de pedidos:
- Responsável por gerenciar o processamento de pedidos, incluindo pagamentos, envios e atualizações do estoque.

3. Arquitetura Pipe-Filter

Um modelo que divide a aplicação em pequenos componentes conectados entre si, como tubos e filtros. Cada componente é responsável por realizar uma tarefa específica, como transformar ou filtrar dados. Os dados são passados de um componente para o outro em uma sequência, como se estivessem passando de um tubo para o outro.

Vantagens

Permite que os componentes sejam adicionados ou removidos facilmente, permitindo que a aplicação cresça de acordo com as necessidades de processamento de dados.
Cada componente é projetado para ser reutilizável, o que significa que ele pode ser facilmente reaproveitado em outras aplicações.
A separação clara dos componentes torna a aplicação mais fácil de manter e modificar.

Desvantagens

Pode se tornar complexa se aplicada a aplicações muito grandes e de alta complexidade.
O processamento em paralelo dos componentes pode resultar em latência, o que pode afetar a performance da aplicação.

Exemplo em um cenário real

Um editor de texto:

Os dados de entrada (texto bruto) são processados através de uma série de filtros, cada um responsável por realizar uma tarefa específica, sendo elas:

Formatação do texto
Verificação ortográfica
Contagem de palavras

Cada filtro recebe o resultado do filtro anterior e produz uma saída para o próximo filtro até a saída final.

Finalizando...

Este foram três padrões comuns na arquitetura de software, trarei outros num futuro próximo.

Espero que isso ajude você de alguma maneira! 😄

Happy Coding!

Links úteis:
MVC
microservices
pipes-and-filters

Arquitetura de Software Simplificada

Vinicius Savegnago — Thu, 09 Feb 2023 16:33:06 +0000

Como iniciante no desenvolvimento de software, você pode se sentir sobrecarregado pelo conceito de arquitetura de software. Mas não se preocupe! Eu já estive em seu lugar uma vez e entendo o quão confuso pode ser. Por isso, estou aqui para fornecer uma explicação clara e simples da arquitetura de software e seus dois níveis cruciais.

Meu objetivo é ajudá-lo a compreender este aspecto importante do desenvolvimento de software, para que você possa levar seu código e aplicações para o próximo nível de sofisticação e eficiência.

Calma! Ali você disse 2 níveis?

Exato, mas antes disso...

O que é arquitetura de software?

A arquitetura de software é um aspecto crítico do desenvolvimento de software que envolve a definição da estrutura geral de um sistema para atender aos requisitos e restrições do problema a ser resolvido. O objetivo da arquitetura de software é fornecer um mapa para todo o sistema, que serve como guia para o resto do processo de desenvolvimento.

Uma arquitetura bem projetada é essencial para o sucesso de um projeto. Ela garante que o sistema seja escalável, de fácil manutenção e atenda aos requisitos de desempenho. Um arquiteto de software deve tomar decisões e realizar trade-offs quando escolher entre diferentes padrões e decisões de design. Por exemplo, eles podem precisar equilibrar desempenho e escalabilidade ou escolher entre soluções personalizadas e componentes off-the-shelf.

Em conclusão, a arquitetura de software é um aspecto fundamental do desenvolvimento de software que desempenha um papel crucial na determinação do sucesso de um projeto. O arquiteto de software deve avaliar cuidadosamente os requisitos e restrições para encontrar a solução mais adequada para o problema em questão.

Os dois níveis de arquitetura

Arquitetura a nível de componente/código

Este nível se concentra no design de componentes individuais ou blocos menores de um sistema de software, como módulos, classes, funções e estruturas de dados. Ele detalha a implementação desses componentes e como eles se interagem entre si em um nível mais baixo.

Alguns exemplos que você pode dar uma olhada:

Model-View-Controller (MVC)
Domain Driven Design (DDD)
Clean Architecture

Arquitetura a nível de sistema

Este nível fornece uma visão de alto nível de todo o sistema de software, mostrando as relações e interações entre os componentes. Ele define a estrutura geral do sistema, incluindo seus módulos, subsistemas e interfaces. Este nível de sistema ajuda a garantir que o sistema seja eficiente, escalável e flexível e que seus componentes se encaixem de maneira lógica e eficaz.

Alguns exemplos que você pode dar uma olhada:

Layered Architecture
Client-Server Architecture
Microservices Architecture

Para finalizar!

Então, como arquiteto de software, você será responsável por supervisionar todo o processo de arquitetura, desde a definição da arquitetura até as escolhas de tecnologia. A arquitetura define o caminho a ser seguido durante o processo de desenvolvimento e a implementação do sistema.

Podemos conversar em um nível de componentes para o design de software até em uma perspectiva maior e mais ampla, para assim termos uma definição com maior assertividade e encontrar as melhores soluções para construir nossos sistemas.

Espero que agora você tenha uma visão mais simplificada sobre Arquitetura e Design de Software, e olhe para o software de uma maneira diferente.

Espero que isso ajude você! 😄

Happy Coding!

Links úteis:
Software Architecture Guide
What is Software Architecture

Análise de Performance com Lighthouse e Github Actions

Vinicius Savegnago — Tue, 10 May 2022 23:58:04 +0000

Google Lighthouse é uma ótima ferramenta para realizarmos análises de nossas páginas. Com ele conseguimos medir tanto a performance, quanto questões de acessibilidade e SEO.

Promover essas métricas é fundamental para o ciclo de vida de qualquer aplicação, principalmente se sua página está em constante evolução e possue uma grande quantidade de conteúdo como vídeos, imagens, ou mesmo se realiza comunicação entre outros serviços.

Uma maneira simples e útil de sempre estar de olho nessas informações, é realizar um monitoramento em algum pipeline como Travis, CircleCI, Github Actions, entre outros.

Nesse post vou demonstrar brevemente como automatizar essa tarefa utilizando o Github Actions.

Setup

Tudo que você vai precisar é um repositório no Github com alguma página para a análise ser feita, seja com HTML puro, React, Vue ou qualquer outro framework.

Para essa demonstração vou utilizar um app com Reactjs super simples utilizando a cli create-react-app.

Criando um workflow

Para criar o nosso workflow, vamos utilizar a seguinte action disponível:

lighthouse-check-action

Na raiz do nosso repositório vamos criar uma pasta .github/workflows. É nessa pasta que vamos criar o nosso workflow.

 mkdir .github/workflows
 touch main.yaml

Antes de iniciar nosso pipeline, crie em seu repositório um token gh_token com permissões de repositório, para assim nosso workflow ter autorização para fazer o deploy de nossa página no github pages, e assim fazer a análise.

Como estou utilizando React, no arquivo main.yaml, vou adicionar o build da minha aplicação assim como o action para o deploy no github pages:

name: Main Workflow

on:
  push:
    branches: [master]
  pull_request:
    branches: [master]

jobs:
  main:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [14.x]

    steps:
      - name: Checkout
        uses: actions/checkout@v2

      - run: mkdir /tmp/artifacts # Create a folder for the lighthouse artifacts.

      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v2
        with:
          node-version: ${{ matrix.node-version }}

      - name: Install Dependencies
        run: npm install

      - name: Build App
        run: npm run build

      - name: Deploy to Github Pages
        uses: JamesIves/github-pages-deploy-action@v4.3.3
        with:
          branch: gh-pages
          folder: build
          token: ${{secrets.gh_token}} # Your repository token.

      - name: Lighthouse Check
        uses: foo-software/lighthouse-check-action@master
        id: lighthouseCheck
        with:
          outputDirectory: /tmp/artifacts
          urls: "https://vinisaveg.github.io/lighthouse-github-actions/" # Your application URL.
          device: "all"

      - name: Upload Lighthouse Artifacts # Upload the generated reports from Lighthouse.
        uses: actions/upload-artifact@master
        with:
          name: Lighthouse reports
          path: /tmp/artifacts

Além disso, também adicionei a configuração básica do action do lighthouse, e o upload dos arquivos de análise para visualização.

Agora só precisamos enviar nosso workflow para o repositório, e ver nossos relatórios serem gerados.

 git push origin master

Análise

Se tudo ocorreu bem, esse será o resultado:

Os artefatos:

Resultado da análise:

E por fim, para melhorar o nosso CI, podemos verificar nossas pontuações e gerar uma falha, se alguma pontuação não foi atingida.

Para isso, vamos adicionar esse action em nosso workflow:

      - name: Verify Lighthouse Check results
        uses: foo-software/lighthouse-check-status-action@master
        with:
          lighthouseCheckResults: ${{ steps.lighthouseCheck.outputs.lighthouseCheckResults }}
          minAccessibilityScore: "98"
          minBestPracticesScore: "95"
          minPerformanceScore: "98"
          minSeoScore: "98"

Você pode alterar os valores mínimos, com os pertinentes para a sua página.

Esse será o resultado se houver alguma falha:

E se todas as pontuações forem atingidas, teremos esse resultado:

Pronto! Agora você tem sua análise automatizada, e sempre disponível para auditoria.

Se esse post foi útil de alguma maneira, solte uma reação e deixe alguma mensagem. Valeu!

Happy Coding!

Links úteis:
Lighthouse Check Github Actions Docs
Performance Scoring
Lighthouse Load Performance

Meu Boilerplate Fullstack

Vinicius Savegnago — Fri, 10 Sep 2021 22:48:34 +0000

Nos últimos tempos em praticamente todos os meus projetos, tenho utilizado Reactjs para as minhas aplicações Front-end e Nodejs para os meus serviços Back-end. E para otimizar o processo de setup, criei boilerplates para facilitar e agilizar o início dos meus projetos.

Divido aqui com a comunidade meus repositórios de template, e agradeço qualquer comentário, e sugestões de melhorias que quiserem enviar.

Reactjs boilerplate

Nodejs boilerplate

Happy Coding! 🙂

milkway | The Intergalactic lab for milkshakes

Vinicius Savegnago — Sat, 13 Mar 2021 00:18:55 +0000

Recently I've been studying Next.js and GraphQL with Node.js, and as usual I have built a project to put everything into practice. And for this project, I've built a Web App to explore and share Milkshake recipes, as we are always at home, let's cheer up with a nice cold drink 😋

On the Front-end, I used Server Side Rendering and Static Site Generation with Next.js, along with some other libraries like SWR to handle data fetching and to enable a great user experience out-of-the-box.

For the Back-end, I have a GraphQL API with Prisma ORM, running with a PostgreSQL database. I also used the TypeGraphQL framework, as I have Typescript in development mode.

Both repositories are available for any contribution, so send your pull request. I will sure review and merge it 😄

Thank you for your time.

Happy Coding!

milkway

milkway-api

Design on Figma

Consumindo uma API GraphQL com SWR

Vinicius Savegnago — Thu, 11 Feb 2021 15:03:57 +0000

SWR nos disponibiliza React Hooks para realizar requisições, com a estratégia de stale-while-revalidate de forma padrão. SWR consiste em a primeira vista, temos os dados do cache (stale) e enquanto isso,uma requisição é enviada (revalidate) para validar esse cache, e por fim, se houver alguma mudança, os dados são atualizados.

Sugiro a leitura das principais funcionalidades do SWR

SWR: React Hooks for Data Fetching

Sem mais enrolação, bora pro código!

Primeiro de tudo, vamos iniciar o nosso projeto e instalar o SWR

Vou utiilizar um template com Typescript

yarn create react-app swr-basics --template typescript

Após o setup, vamos adcionar o SWR

yarn add swr

Para todas as requisições que vamos utilizar o SWR, vamos precisar de uma fetcher function, que será uma função assíncrona que simplesmente retorna os dados. Para isso podemos utilizar tanto a API de fetch do próprio javascript, ou bibliotecas como axios. E para enviarmos requisições a APIs GraphQL, vamos precisar utilizar algum GraphQL Client

E nesse caso vamos usar o graphql-request

yarn add graphql-request graphql

Além de todas essas libs, vamos precisar de alguma API GraphQL, para enviar nossas queries. Sendo assim, vamos utilizar uma API incrível da SpaceX

GraphiQL Explorer

Para começar, vamos enviar uma query buscando por foguetes 🚀

{
  rockets {
    active
    name
    mass {
      kg
    }
    description
  }
}

Para isso, vamos criar o nosso componente que vai realizar a requisição e mostrar na tela os dados dos foguetes

Rockets.tsx

import { FunctionComponent } from "react";

const Rockets: FunctionComponent = () => {
  return (
    <div>
      <span>Rockets will land here</span>
    </div>
  );
};

export default Rockets;

E nosso App.tsx vai ficar assim:

import "./app.css";
import Rockets from "./components/Rockets";

const App = () => {
  return (
    <div className="App">
      <Rockets />
    </div>
  );
};

export default App;

Certo, agora pra que tudo funcione, vamos criar um arquivo com uma configuração básica do nosso GraphQL Client, onde vamos inserir a rota para a API da SpaceX

Também é possível adicionarmos outras opções, como headers, credentials, e etc...

graphqlClient.ts

import { GraphQLClient } from "graphql-request";

export const graphqlClient = new GraphQLClient(
  "https://api.spacex.land/graphql/"
);

Com nosso cliente GraphQL, vamos começar enviando a nossa query

Para isso vamos criar a nossa fetcher function

Rockets.tsx

import { FunctionComponent } from "react";
import { RequestDocument } from "graphql-request/dist/types";
import { graphqlClient } from "../graphql/graphqClient";

const Rockets: FunctionComponent = () => {

  const fetcher = (query: RequestDocument) => graphqlClient.request(query)

  return (
    <div>
      <span>Rockets will land here</span>
    </div>
  );
};

export default Rockets;

E esse RequestDocument será a nossa query que vamos enviar para buscar os foguetes

Podemos escreve-la assim:

const rocketsQuery = `
    {
      rockets {
        active
        name
        mass {
          kg
        }
        description
      }
    }
  `

E tudo que precisamos fazer é passar ela para o hook useSWR, juntamente com a nossa função fetcher

E desse hook podemos obter data e error

const { data, error } = useSWR(rocketsQuery, fetcher)

E podemos mostrar na tela se existir algum dado:

if (data) {
    return (
      <div>
        <pre>{JSON.stringify(data, null, 2)}</pre>
      </div>
    );
  }

Rockets.tsx

import { FunctionComponent } from "react";
import { RequestDocument } from "graphql-request/dist/types";
import { graphqlClient } from "../graphql/graphqClient";
import useSWR from "swr";

const Rockets: FunctionComponent = () => {
  const fetcher = (query: RequestDocument) => graphqlClient.request(query);

  const rocketsQuery = `
    {
      rockets {
        active
        name
        mass {
          kg
        }
        description
      }
    }
  `;

  const { data, error } = useSWR(rocketsQuery, fetcher);

  if (data) {
    return (
      <div>
        <pre>{JSON.stringify(data, null, 2)}</pre>
      </div>
    );
  }

  if (error) {
    return (
      <div>
        <pre>Something went bad :(</pre>
      </div>
    );
  }

  return (
    <div>
      <span>Loading rockets...</span>
    </div>
  );
};

export default Rockets;

Se tudo ocorreu bem, teremos um JSON com os foguetes

Irado! 🤘🏼

Agora que já pegamos a ideia da coisa, vamos enviar uma mutation para a API, criando um usuário

A mutation vai ser assim:

mutation {
  insert_users(objects: {name: "Vinicius", rocket: "El Jalapeño Rocket"}) {
    returning {
      id
      name
      rocket
    }
  }
}

E a query para buscar os usuáros

{
  users {
    id
    name
    rocket
  }
}

Então bora começar criando um componente para listar os usuários

E assim como nossa query de foguetes, vamos criar nossa fetcher function, adicionar nossa query de usuários, e por fim, nosso hook useSWR

Users.tsx

import { FunctionComponent } from "react";
import { RequestDocument } from "graphql-request/dist/types";
import { graphqlClient } from "../graphql/graphqClient";
import useSWR from "swr";

const Users: FunctionComponent = () => {
  const fetcher = (query: RequestDocument) => graphqlClient.request(query);

  const usersQuery = `
    {
        users {
            id
            name
            rocket
        }
    }

  `;

  const { data, error } = useSWR(usersQuery, fetcher);


  ...

};

export default Users;

Agora vamos colocar na tela os usuários, e enquanto eles não aparecem, podemos mostrar um "Loading..." na tela

Users.tsx

if (data) {
    return (
      <div>
        <div>
          <pre>{JSON.stringify(data, null, 2)}</pre>
        </div>
      </div>
    );
  }

  if (error) {
    return <div>Something went bad!</div>;
  }

  return (
    <div>
      <span>Loading Users...</span>
    </div>
  );

Então, temos um JSON com os usuários

Nice! 🤘🏼

Por fim, vamos criar um formulário para adicionar um novo usuário, e ver se ele aparece na nossa lista de usuários

UserForm.tsx

import { FormEvent, FunctionComponent, useState } from "react";

const UserForm: FunctionComponent = () => {
  const [username, setUsername] = useState<string>("");
  const [rocketName, setRocketName] = useState<string>("");

  const handleCreateuser = async (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();

    console.log({username, rocketName})
  };

  return (
    <form onSubmit={(event) => handleCreateuser(event)}>
      <input
        type="text"
        placeholder="username"
        value={username}
        onChange={(event) => setUsername(event.target.value)}
      />
      <input
        type="text"
        placeholder="rocket name"
        value={rocketName}
        onChange={(event) => setRocketName(event.target.value)}
      />
      <button>Create User</button>
    </form>
  );
};

export default UserForm;

Por enquanto, nosso componente está apenas fazendo um log com os valores dos inputs

Agora precisamos criar uma mutation, passando esses valores

Essa é a mutation para inserir usuários

mutation insertUsers($name: String!, $rocket: String!){
            insert_users(objects: {name: $name, rocket: $rocket}) {
                returning {
                    id
                    name
                    rocket
                }
            }
        }

E agora junto com a mutation, utlizando o graphql-request, vamos passar as variáveis que vamos criar o usuário

UserForm.tsx

const [username, setUsername] = useState<string>("");
const [rocketName, setRocketName] = useState<string>("");

const createUserMutation = `
        mutation insertUsers($name: String!, $rocket: String!){
            insert_users(objects: {name: $name, rocket: $rocket}) {
                returning {
                    id
                    name
                    rocket
               }
           }
      }
 `;

const handleCreateuser = async (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();

    const response = await graphqlClient.request(createUserMutation, {
      name: username,
      rocket: rocketName,
    });

    console.log(response);
  };

Agora assim que enviarmos a nossa mutation, nossa query de users vai notar que houve uma mudança, e irá revalidar os dados, carregando o nosso novo usuário na tela.

Então o resultado final será esse:

UserForm.tsx


import { FormEvent, FunctionComponent, useState } from "react";
import { graphqlClient } from "../graphql/graphqClient";

const UserForm: FunctionComponent = () => {
  const [username, setUsername] = useState<string>("");
  const [rocketName, setRocketName] = useState<string>("");

  const createUserMutation = `
        mutation insertUsers($name: String!, $rocket: String!){
            insert_users(objects: {name: $name, rocket: $rocket}) {
                returning {
                    id
                    name
                    rocket
                }
            }
        }
    `;

  const handleCreateuser = async (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();

    const response = await graphqlClient.request(createUserMutation, {
      name: username,
      rocket: rocketName,
    });

    console.log(response);
  };

  return (
    <form onSubmit={(event) => handleCreateuser(event)}>
      <input
        type="text"
        placeholder="username"
        value={username}
        onChange={(event) => setUsername(event.target.value)}
      />
      <input
        type="text"
        placeholder="rocket name"
        value={rocketName}
        onChange={(event) => setRocketName(event.target.value)}
      />
      <button>Create User</button>
    </form>
  );
};

export default UserForm;

E podemos fazer um teste:

E após enviarmos o formulário, a nossa query de users vai revalidar a requisição e assim que tiver algum novo usuário, vamos ter a atualização na tela.

Incrível! 🔥

Espero que agora as requisições para APIs GraphQL utilizando SWR tenha ficado mais claro. E caso precise de alguma ajuda, mande uma mensagem 👍🏼

Se esse post foi útil, e te ajudou de alguma maneira, deixe uma reação e me siga nas redes.

vinisaveg - Github

Vinicius Savegnago - LinkedIn

Happy Coding!

Links úteis:

vinisaveg/swr-basics

SWR: React Hooks for Data Fetching

prisma-labs/graphql-request

Tema customizado para o Visual Studio Code

Vinicius Savegnago — Sat, 09 Jan 2021 18:48:31 +0000

Se você, assim como eu, já cansou dos temas disponíveis por ai, em poucos instantes você estará criando o seu próprio tema, de uma maneira super simples e prática.

Como vamos fazer isso?

Com o yo code extension generator, tudo por linha de comando, super simples e fácil 👍

Para isso você vai precisar do Node.js instalado, juntamente com o npm.

Então bora!

Primeiro de tudo vamos gerar um tema default, utilizando o yo code

Para fazer a instalação, basta rodar o comando:

npm install -g yo generator-code

Após a instalação vamos gerar o nosso tema base:

yo code

O tipo de extensão será New Color Theme

Vamos começar do zero, então: No, start fresh

Coloque o nome da sua extensão e as informações seguintes como desejar

Na sequência podemos escolher qual a base do nosso tema, eu sou do time Dark e você?

Tema criado!

Agora vamos fazer algumas alterações para deixar o tema do nosso jeito

cd meu-tema
code .

Dentro da pasta do seu tema você vai ver uma pasta themes, além de outros arquivos. Dentro desta pasta está toda a configuração do nosso tema

Nesse arquivo JSON de configuração vamos ter duas chaves:

colors: os valores nesta chave vão alterar as cores do próprio editor de texto.

tokenColors: os valores nesta chave vão alterar as cores de nomes de variáveis, classes, funções e tudo dentro do nosso nosso código.

Antes de qualquer alteração vamos dar um F5 para iniciar um editor que irá fornecer um preview de como está o nosso tema

Nesse novo editor que se abriu vamos ver um tema padrão de acordo com o modo que escolhemos durante a instalação.

Você pode abrir qualquer arquivo para acompanhar as mudanças e selecionar as tags que deseja alterar, e para conseguirmos identificar quais tags ou tokens queremos alterar, vamos utilizar esse comando:

Developer: Inspect Editor Tokens and Scopes

Para abrir o campo de busca, você pode usar o atalho: (CTRL + P)

Agora podemos identificar o scope da variável, interface, ou constante que queremos alterar:

Copiamos o scope e vamos alterar as tokenColors dentro de nosso theme.json

Fazendo uma busca encontrei o scope aqui:

Agora sim, vamos atualizar o nosso theme.json e ver as mudanças acontecerem no preview

Massa!

Agora, se você quiser alterar algo como a cor de fundo do editor, ou a cor dos ícones da barra de navegação, você pode alterar dentro da chave: colors

Um jeito que encontrei para facilitar essas alterações é usando o comando:

Developer: Generate Color Theme From Current Settings

isso vai gerar um tema a partir das configurações atuais do seu editor, e se por acaso você estiver com algum tema já instalado, ele vai buscar toda as opções do seu tema atual. Dai em diante você pode colar essas opções dentro do seu theme.json, e assim que salvar o preview, o editor vai carregar todas as configurações. Assim fica mais fácil de encontrar e alterar tudo que você quiser 😉

Agora que você já está satisfeito com seu novo tema, vamos criar um pacote para instalar e assim utiliza-lo.

Para isso vamos instalar o Visual Studio Code Extension, para gerar nosso pacote.

npm i -g vsce

Para o pacote ser gerado você vai precisar adicionar um publisher em seu package.json e fazer uma alteração em seu README.md

"publisher": "<seu-nome>"

Dito isso, agora basta gerar o pacote

vsce package

Um pacote com a extensão .vsix será gerado dentro da pasta do seu projeto

Para fazer a instalação simplesmente rode o comando:

code --install-extension ./<nome-do-tema>.vsix

Pronto, agora basta procurar o seu tema na aba de temas do editor e aplicar 😎

A partir de agora você pode deixar o seu vscode do jeito que você sempre quis.

Se isso foi útil de alguma maneira, solte uma reação e deixe alguma mensagem. Valeu!

Happy Coding!

Links úteis:

microsoft/vscode-generator-code

Visual Studio Code Themes

Crie seu próprio template customizado para seus apps Reactjs

Vinicius Savegnago — Mon, 04 Jan 2021 23:57:59 +0000

Nestes últimos tempos, tenho utilizado bastante o framework Reactjs, e iniciando meus projetos com o pacote Create React App. Porém sempre que faço essa inicialização, há uma estrutura pronta que sempre acabo removendo por completo, então resolvi criar um template personalizado para me ajudar com o setup inicial de meus projetos.

Eu só não achava que seria tão simples...

Segue aqui uma breve explicação de como fazer isso:

Para isso você vai precisar de uma conta npm. É lá que vamos publicar o nosso template para utilizar com o Create React App.

Primeiro de tudo, vamos criar uma pasta e iniciar um projeto com o pacote CRA. Assim vamos ter a base do projeto para deixar do nosso jeito antes de publicar.

yarn create react-app meu-template

Após a instalação, podemos remover ou adicionar os pacotes e bibliotecas que desejarmos.

Assim que tudo estiver do jeito que você gosta, podemos preparar o nosso template. (O seu projeto será iniciado do mesmo jeito em que você deixou os arquivos)

Para isso vamos criar uma pasta com o nome template. É nela que vamos deixar todos os nossos arquivos do template.

Dentro dela, podemos colocar a nossa pasta /public e /src. Além de nosso arquivo .gitignore (Só devemos remover o ponto no começo do nome do arquivo, ficando assim: gitignore)

Não vamos precisar da pasta /node_modules. Então podemos excluí-la.

Além disso também podemos adicionar um README.md, tsconfig, .prettierrc, e entre outros arquivos que você desejar.

Segue a estrutura até agora:

meu-template/
  README.md (Para o npm)
  package.json
    /template
        README.md (Para os projetos criados com este template)
        gitignore (sem o ponto no começo do arquivo)
        public/
          index.html
                /...outros arquivos que desejar
        src/
          index.js (or index.tsx)
                /...outros arquivos que desejar

Agora vamos adicionar um arquivo com o nome de template.json

Nele vai estar todas as nossas dependências e configurações do template, inclusive scripts, se desejarmos.

Vou utilizar o template base oficial do Create React App como exemplo:

facebook/create-react-app

template.json

{
  "package": {
    "dependencies": {
      "@testing-library/jest-dom": "^5.11.4",
      "@testing-library/react": "^11.1.0",
      "@testing-library/user-event": "^12.1.10",
      "web-vitals": "^1.0.1"
    },
    "eslintConfig": {
      "extends": ["react-app", "react-app/jest"]
    }
  }
}

E em em nosso package.json, podemos adicionar algumas informações, além do nome do nosso template, que precisa ter o prefixo: cra-template-[nome-do-template].

Também é importante adicionar o arquivo principal em main e a opção files, com os itens: template e template.json

Segue o exemplo:

{
  "name": "cra-template-meu-template",
  "main": "template.json",
  "version": "1.0.0",
  "keywords": [
    "react",
    "create-react-app",
    "template"
  ],
  "description": "Meu template personalizado",
  "engines": {
    "node": ">=10"
  },
  "files": [
    "template",
    "template.json"
  ]
}

E nossa estrutura está assim:


meu-template/
  README.md (Para o npm)
  template.json
  package.json
  template/
    README.md (Para os projetos criados com este template)
    gitignore
    public/
      index.html
            /...outros arquivos que desejar
    src/
      index.js (or index.tsx)
            /...outros arquivos que desejar

Agora podemos fazer login no NPM pelo terminal e publicar o nosso template 😎

Vamos abrir o terminal e rodar:

npm login

Insira suas credenciais para fazer o login e em seguida podemos publicar:

npm publish --access public

Agora em sua conta NPM você pode ver o seu novo pacote 👍🏼

Vamos testar!!

yarn create react-app --template meu-template

Irado!! 🔥

Agora podemos utilizar o nosso novo template para projetos futuros.

Você também pode fazer outros tipos de templates, ou adicionar scripts, para deixar o seu setup inicial de projetos turbinado 🤘🏼

Então é isso. Se esse post foi útil de alguma maneira, deixe um comentário ou uma reação 😉

Valeu!

Segue o repositório do meu template:

vinisaveg/cra-template-vinisaveg

Links úteis:

Custom Templates | Create React App

Creating and publishing scoped public packages | npm Docs

Happy Coding! 🙂

URQL, o básico

Vinicius Savegnago — Thu, 17 Dec 2020 00:58:22 +0000

Recentemente fiz um post sobre TypeGraphQL e como utilizar o framework para incríveis benefícios em sua API GraphQL com Typescript. Para complementar, dessa vez vou mostrar um pouco sobre o URQL, um GraphQL Client. Com ele vamos consumir uma API de receitas - Que no caso é a mesma API que fiz em meu post anterior.

Para isso vamos utilizar React.js para a construção de nosso CRUD 😊

Antes de tudo, devo-lhe uma breve apresentação sobre este Client.

O URQL é um client GraphQL com o foco em usabilidade e adaptabilidade, com um setup rápido, e de fácil utilização, sendo capaz de suportar infraestruturas bem avançadas em GraphQL.

urql Documentation

BORA CODAR!

Primeiro, vamos criar um novo projeto.

Criamos uma pasta para o projeto. (O nome é você quem decide)

mkdir urql-basics
cd urql-basics

Vamos inicializar o projeto com um template do React.js com Typescript. Pode utilizar o npx ou o yarn. Vou utilizar o yarn.

yarn create react-app . --template typescript

Com o projeto inicializado, vamos instalar o URQL.

yarn add urql graphql

Agora que tudo está instalado podemos remover alguns arquivos que não iremos utilizar.

Só vamos precisar dos sequintes:

/public
    index.html
/src
    App.tsx
    index.tsx
    index.css
  react-app-env.d.ts

yarn start

O app deve estar rodando na porta 3000 👍🏼

Nos exemplos, vou estar utilizando styled-components para ajudar com a estilização do app. Se preferir de outra maneira, não tem problema.

btw CSS in JS = 💘

yarn add styled-components @typed/styled-components -D

Com o styled-components, podemos criar de fato um componente React, com toda sua estilização acoplada. Apartir de "Literais de Modelos Marcados" construimos todo o estilo do componente. Essa marcação é simplesmente CSS/Sass.

Veja mais aqui:

styled-components: Basics

Primeiro de tudo, vamos configurar o URQL e criar o nosso provider.

Em uma pasta ./api, criei um arquivo chamado urql.ts.

Neste arquiivo vamos exportar um Client

import { createClient } from 'urql';

export const urqlClient = createClient({
  url: 'http://localhost:4000/',
});

Para tudo funcionar, passamos um objeto com algumas configurações para uma função que retorna um Client.

Em nosso caso vamos passar apenas o mínimo, que seria a url da nossa API GraphQL

Agora, para começar, vamos criar um Provider para a nossa aplicação fazer o uso do Client.

Como esse Provider utiliza a API de Context, vamos envolver nossa aplicação com ele.

Em nosso app.tsx

import { Provider } from 'urql';
import { urqlClient } from './api/urql';

const App: FunctionComponent = () => {

  return (
      <Provider value={urqlClient}>
        <Wrapper>
                    //...App
        </Wrapper>
      </Provider>
  );
};

No meu App, acabei criando um component Wrapper, para centralizar o conteúdo no meio da tela

Todos os meus componentes iram ficar em uma pasta ./components, E cada um deles em uma pasta com seus próprios estilos.

Para esse post não ficar muito grande, irei passar vagamente pela estilização, dando um foco maior no URQL. Mas não se preocupe, vou disponibilizar tudo em um repositório no Github 😎

Agora que já temos nosso Client configurado, vamos criar nossa primeira Query, que ira buscar receitas em minha API.

Dentro de ./src vou criar uma pasta ./graphql. Dentro dela podemos colocar as nossas Mutations e Queries

.src/graphql/queries/recipesQuery.ts

export const recipesQuery = `
    query {
        recipes {
            id
            name
            description
            ingredients
        }
    }
`;

Simplesmente a minha query é uma String, com a sintaxe do GraphQL.

Para executarmos a nossa query, vamos criar um componente que irá listar todas as nossas receitas.

./components/RecipeList.component.tsx

import React, { FunctionComponent } from 'react';
import RecipeCard from '../recipeCard/RecipeCard.component';

import RecipesWrapper from './styles';

import { useQuery } from 'urql';
import { recipesQuery } from '../../graphql/queries/recipesQuery';

interface RecipesListProps {}

const RecipesList: FunctionComponent<RecipesListProps> = () => {
  const [recipesResult, reexecuteQuery] = useQuery({
    query: recipesQuery,
  });

  const { data, fetching, error } = recipesResult;

  if (fetching) return <p>Carregando...</p>;

  if (error) return <p>Algo deu errado... {error.message}</p>;

  return (
    <RecipesWrapper>
      {data.recipes.map((recipe: any) => (
        <RecipeCard
          id={recipe.id}
          key={recipe.id}
          name={recipe.name}
          description={recipe.description}
          ingredients={[...recipe.ingredients]}
        />
      ))}
    </RecipesWrapper>
  );
};

export default RecipesList;

Utilizando o hook useQuery disponibilizado pelo próprio URQL, enviamos a nossa query, que trará uma tupla, contendo um objeto com o resultado da query e uma função de reexecução.

Esse objeto vai conter:

data ⇒ Os dados obtidos da API
fetching ⇒ Uma indicação de que os dados estão sendo carregados.
error ⇒ Erros de conexão ou mesmo GraphQLErrors

Logo, utilizando o data, vamos exibir na tela todas as receitas que existirem.

Para isso criei um RecipeCard component, que é preenchido com as informações das receitas.

./components/RecipeCard.component.tsx

import React, { FunctionComponent, useContext } from 'react';

interface RecipeCardProps {
  id?: string;
  name: string;
  description: string;
  ingredients: Array<string>;
}

const RecipeCard: FunctionComponent<RecipeCardProps> = ({
  id,
  name,
  description,
  ingredients,
}) => {

  return (
    <Card>
      <TextWrapper>
        <TextLabel>Receita</TextLabel>
        <Title>{name}</Title>
      </TextWrapper>

      <TextWrapper>
        <TextLabel>Descrição</TextLabel>
        <Description>{description}</Description>
      </TextWrapper>

      <TextWrapper>
        <TextLabel>Ingredientes</TextLabel>

        {ingredients.map((ingredient, index) => (
          <Ingredient key={index}>{ingredient}</Ingredient>
        ))}
      </TextWrapper>

      <TextWrapper>
        <TextLabel>Opções</TextLabel>
        <ActionsWrapper>
          <UpdateButton>Atualizar</UpdateButton>
          <DeleteButton>Deletar</DeleteButton>
        </ActionsWrapper>
      </TextWrapper>
    </Card>
  );
};

export default RecipeCard;

Incrível! 🚀

Agora vamos adicionar a Mutation para criarmos uma nova receita.

Vamos criar a createRecipeMutation.ts

./graphql/mutations/createRecipeMutation.ts

export const createRecipeMutation = `
    mutation(
        $name: String!,
        $description: String!,
        $ingredients: [String!]!
    ) {
        createRecipe(data: {
            name: $name,
            description: $description,
            ingredients: $ingredients
        }) {
            recipe {
                id
            }
            error {
                message
            }
        }
    }
`;

No caso da API de receitas, precisamos enviar o nome, a descrição e uma lista com os ingredientes, especificando cada um no inicio de nossa mutation.

Com nossa createRecipeMutation pronta, vamos criar um formulário para fazer o registro de uma receita. Para isso vou utilizar o Formik, que é uma biblioteca para gerenciar formulários.

Se você não conhece, sugiro que dê uma olhada:

Formik

Para deixar o app mais limpo e simples, vou utilizar um unico formulário, tanto para o Update, quanto para o Create.

Para abrir o formulário de Create, criei um botão e adicionei ele em app.tsx

<Provider value={urqlClient}>
        <Wrapper>
          <Title>myRecipes</Title>

          <RecipesList />

          <Recipeform />

          <CreateRecipeButton />
        </Wrapper>
</Provider>

Para compartilhar qual formulário está aberto e qual está fechado, utilizei o Context API para compartilhar dois atributos que indicam quais dos formulários vão abrir. Sendo o Create ou o Update.

Dentro de ./context, criei o contexto do app.

./context/context.ts

import { createContext } from 'react';

interface AppContextType {
  isCreateRecipeFormOpen: boolean;
  isUpdateRecipeFormOpen: boolean;
}

export const initialAppContext: AppContextType = {
  isCreateRecipeFormOpen: false,
  isUpdateRecipeFormOpen: false,
};

export const AppContext = createContext<
  [AppContextType, React.Dispatch<React.SetStateAction<AppContextType>>]
>([initialAppContext, () => {}]);

Para checar o estado dos formulários, criei um componente que irá renderizar apenas o formulário que foi requisitado.

./components/RecipeForm.component.tsx

import React, { FunctionComponent, useContext } from 'react';

import { AppContext } from '../../context/context';

import Form from '../form/Form.component';

const Recipeform: FunctionComponent = () => {
  const [appContext] = useContext(AppContext);

  if (appContext.isCreateRecipeFormOpen) {
    return <Form btnName="Criar" formType="create" title="Criar receita" />;
  }

  if (appContext.isUpdateRecipeFormOpen) {
    return (
      <Form btnName="Atualizar" formType="update" title="Atualizar receita" />
    );
  }

  return null;
};

export default Recipeform;

E nosso formulário fica assim:

./components/Form.component.tsx

import React, { FunctionComponent, useContext } from 'react';

import { FormikValues, useFormik } from 'formik';

import { FormField, Title, InputsWrapper, Input, FinishButton } from './styles';

interface FormProps {
  title: string;
  btnName: string;
  formType: 'update' | 'create';
}

const Form: FunctionComponent<FormProps> = ({ formType, title, btnName }) => {

  const formik = useFormik({
    initialValues: {
      name: '',
      description: '',
      ingredients: '',
    },
    onSubmit: (formikValues) => handleForm(formikValues),
  });

  const update = async (formikValues: FormikValues) => {
    // TODO Update Recipe Mutation
  };

  const create = async (formikValues: FormikValues) => {
    // TODO Create Recipe Mutation

  };

  const handleForm = (formikValues: any) => {
    // TODO handle update or create
  };

  const handleIngredientsField = (ingredients: string) => {
    let ingredientsArray = ingredients.split(',');
    return ingredientsArray;
  };

  return (
    <FormField onSubmit={formik.handleSubmit}>
      <Title>{title}</Title>

      <InputsWrapper>
        <Input
          name="name"
          id="name"
          type="text"
          placeholder="Nome da sua receita"
          onChange={formik.handleChange}
          value={formik.values.name}
        />

        <Input
          name="description"
          id="description"
          type="text"
          placeholder="Descrição da sua receita"
          onChange={formik.handleChange}
          value={formik.values.description}
        />

        <Input
          name="ingredients"
          id="ingredients"
          type="text"
          placeholder="Ingredientes (separados por virgula)"
          onChange={formik.handleChange}
          value={formik.values.ingredients}
        />

        <FinishButton type="submit">{btnName}</FinishButton>
      </InputsWrapper>
    </FormField>
  );
};

export default Form;

Agora vamos adicionar nossa createRecipeMutation:

./components/Form.tsx

import { useMutation } from 'urql';
import { createRecipeMutation } from '../../graphql/mutations/createRecipeMutation';

interface FormProps {
  title: string;
  btnName: string;
  formType: 'update' | 'create';
}

const Form: FunctionComponent<FormProps> = ({ formType, title, btnName }) => {
  const [createRecipeResult, createRecipe] = useMutation(createRecipeMutation);
  const [appContext, setAppContext] = useContext(AppContext);

  const formik = useFormik({
    initialValues: {
      name: '',
      description: '',
      ingredients: '',
    },
    onSubmit: (formikValues) => handleForm(formikValues),
  });

  const update = async (formikValues: FormikValues) => {
    // TODO Update Recipe Mutation
  };

  const create = async (formikValues: FormikValues) => {
    // Create Recipe Mutation
    await createRecipe({
      ...formikValues,
      ingredients: handleIngredientsField(formikValues.ingredients),
    });
  };

  const handleForm = (formikValues: any) => {
    setAppContext({
      ...appContext,
      isUpdateRecipeFormOpen: false,
      isCreateRecipeFormOpen: false,
    });

    create(formikValues);
  };

  const handleIngredientsField = (ingredients: string) => {
    let ingredientsArray = ingredients.split(',');
    return ingredientsArray;
  };

return (
    //...
    )
};

export default Form;

Utilizando o hook de useMutation, vamos ter um objeto com o resultado e uma função para executar a Mutation.

Vamos testar!

Show! 🔥

Agora para a nossa Mutation de Update, vamos fazer algo muito parecido.

Porém, desta vez, vamos precisar enviar o ID da receita que queremos fazer a atualização.

./updateRecipeMutation.ts

export const updateRecipeMutation = `
    mutation(
        $id: String!,
        $name: String!,
        $description: String!,
        $ingredients: [String!]!
    ) {
        updateRecipe(
            id: $id,
            data: {
                name: $name,
                description: $description,
                ingredients: $ingredients
        }) {
            recipe {
                id
            }
            error {
                message
            }
            success
        }
    }
`;

Então em nosso RecipeCard, vamos utilizar o botão de update, para iniciar o processo de atualização.

No App, também utilizei o Context API para compartilhar o ID da receita que vai ser atualizada. E Neste caso, como sabemos, vamos abrir o formulário de Update.

AppContext.ts

import { createContext } from 'react';
import Recipe from '../interfaces/Recipe';

interface AppContextType {
  recipes: Array<Recipe>;
  isCreateRecipeFormOpen: boolean;
  isUpdateRecipeFormOpen: boolean;
  recipeIdToUpdate: string;
}

export const initialAppContext: AppContextType = {
  recipes: [],
  isCreateRecipeFormOpen: false,
  isUpdateRecipeFormOpen: false,
  recipeIdToUpdate: '',
};

export const AppContext = createContext<
  [AppContextType, React.Dispatch<React.SetStateAction<AppContextType>>]
>([initialAppContext, () => {}]);

./RecipeCard.component.tsx

const openUpdateForm = () => {
    setAppContext({
      ...appContext,
      isCreateRecipeFormOpen: false,
      isUpdateRecipeFormOpen: true,
      recipeIdToUpdate: id ? id : '',
    });
  };

<ActionsWrapper>
          <UpdateButton onClick={openUpdateForm}>Atualizar</UpdateButton>
          <DeleteButton>Deletar</DeleteButton>
</ActionsWrapper

E nosso em nosso Form:

./components/Form.component.tsx

import { useMutation } from 'urql';
import { updateRecipeMutation } from '../../graphql/mutations/updateRecipeMutation';

interface FormProps {
  title: string;
  btnName: string;
  formType: 'update' | 'create';
}

const Form: FunctionComponent<FormProps> = ({ formType, title, btnName }) => {
  const [createRecipeResult, createRecipe] = useMutation(createRecipeMutation);
  const [updateRecipeResult, updateRecipe] = useMutation(updateRecipeMutation);
  const [appContext, setAppContext] = useContext(AppContext);

  const formik = useFormik({
    initialValues: {
      name: '',
      description: '',
      ingredients: '',
    },
    onSubmit: (formikValues) => handleForm(formikValues),
  });

  const update = async (formikValues: FormikValues) => {
    // Update Recipe Mutation
    await updateRecipe({
      id: appContext.recipeIdToUpdate,
      ...formikValues,
      ingredients: handleIngredientsField(formikValues.ingredients),
    });
  };

  const create = async (formikValues: FormikValues) => {
    // Create Recipe Mutation
    await createRecipe({
      ...formikValues,
      ingredients: handleIngredientsField(formikValues.ingredients),
    });
  };

  const handleForm = (formikValues: any) => {
    setAppContext({
      ...appContext,
      isUpdateRecipeFormOpen: false,
      isCreateRecipeFormOpen: false,
    });

    formType === 'update' ? update(formikValues) : create(formikValues);
  };

  const handleIngredientsField = (ingredients: string) => {
    let ingredientsArray = ingredients.split(',');
    return ingredientsArray;
  };

  return (
    //...
  );
};

export default Form;

Brabo! Agora só precisamos implementar o Delete.

Então, vamos criar nossa deleteRecipeMutation

export const deleteRecipeMutation = `
    mutation(
        $id: String!
    ) {
        deleteRecipe(id: $id) {
            recipe {
                id
            }
            error {
                message
            }
            success
        }
    }
`;

E para conseguirmos enviar essa Mutation, vamos adicionar uma função em nosso botão de Deletar.

./components/RecipeCard.component.tsx

import { useMutation } from 'urql';
import { deleteRecipeMutation } from '../../graphql/mutations/deleteRecipeMutation';

interface RecipeCardProps {
  id?: string;
  name: string;
  description: string;
  ingredients: Array<string>;
}

const RecipeCard: FunctionComponent<RecipeCardProps> = ({
  id,
  name,
  description,
  ingredients,
}) => {
  const [appContext, setAppContext] = useContext(AppContext);
  const [deleteRecipeResult, deleteRecipe] = useMutation(deleteRecipeMutation);

  const handleDeleteRecipe = async () => {
    //Delete Recipe Mutation
    await deleteRecipe({ id });
  };

  return (
    <Card>
      //...

        <ActionsWrapper>
          <UpdateButton onClick={openUpdateForm}>Atualizar</UpdateButton>
          <DeleteButton onClick={handleDeleteRecipe}>Deletar</DeleteButton>
        </ActionsWrapper>
      </TextWrapper>
    </Card>
  );
};

export default RecipeCard;

Agora sim, temos nosso CRUD com URQL 🎉 🎉

Espero que essa pequena introdução tenha sido útil 😊

Valeu! ♥️

Link do projeto no Github:

vinisaveg/urql-basics

Link do meu post sobre TypeGraphQL

TypeGraphQL, o básico em uma API de receitas

Happy Coding!

TypeGraphQL, o básico em uma API de receitas

Vinicius Savegnago — Tue, 10 Nov 2020 01:41:11 +0000

Após passar um tempo aprendendo e tendo uma ótima experiência com o GraphQL combinado com Typescript, percebi que não havia muito conteúdo sobre o tópico, principalmente em Português. Então decidi compartilhar um pouco do que tenho feito e aprendido com esse Framework incrível.

Sem mais delongas,

Bora codar!

Requerimentos

Uma pequena introdução ao GraphQL
Algumas linha de código com Typescript

O que vamos construir?

Uma API de receitas

Antes de tudo, você vai precisar do Node.js instalado.

Acesse nodejs.org e faça o download da ultima versão estável.

Só mais umas palavrinhas antes de começarmos

GraphQL para recém-chegados

Feito para API, GraphQL tem um enorme poder, que nos permite consultar, inserir e manipular dados em nossa API , de uma maneira fácil e muito performática.

Não apenas isso mas, GraphQL também nos permite a receber apenas aquilo que desejamos. Sim, esqueça daquelas respostas gigantescas e cheia de informações desnecessárias em sua busca. Sua resposta terá apenas o que você requisitou, o que nos leva a um melhor gerenciamento de nossa API.

Sugiro que dê uma olhada em:

https://graphql.org

Por que TypeGraphQL?

Porque ele nos traz uma vida no desenvolvimento de nossa API, muito mais prazerosa e fácil de gerenciar, nos dando a habilidade de construir Schemas a partir de Classes e utilizando Decorators, e claro, tudo excelentemente tipado 🙂

Isso fará mais sentido assim que começarmos.

BORA!

Primeiro de tudo, vamos inicializar um novo projeto. Você pode usar npm ou yarn.

yarn init -y

Assim que inicializado, vamos adicionar as belezinhas desse projeto

yarn add graphql type-graphql reflect-metadata class-validator apollo-server

yarn add typescript @types/node nodemon -D

Agora devemos criar o arquivo de configuração do Typescript

tsc --init

E com algumas linhas adicionais, ele deve ficar assim:

{
  "compilerOptions": {
    "target": "es2018",
    "module": "commonjs",
    "lib": ["es2018", "esnext.asynciterable"],
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "esModuleInterop": true,
    "strictPropertyInitialization": false,
    "outDir": "./build",
  }
}

O próximo passo é criar o nosso index.ts, que será o arquivo de inicialização de nossa aplicação.

Vamos cria-lo dentro de uma pasta /src.
Obs. Vamos colocar todo nosso código dentro desta pasta.

src/index.ts

import "reflect-metadata";

Uma exigencia do type-graphql para que tudo funcione, é importar o "reflect-metadata" no topo de nosso arquivo de inicialização.

Agora vamos criar os scripts que vão nos ajudar a compilar e rodar a nossa API.

Em seu package.json, adicione esses scripts, que eu ja te conto o que eles fazem:

"scripts": {
    "watch": "tsc -w",
    "dev": "nodemon build/index.js"
  },

Com o script "watch", vamos compilar o nosso projeto, que são arquivos Typescript, para uma pasta que definimos no arquivo tsconfig.json, além de outras opções também.

Note que usamos uma flag "-w", que irá continuamente ficar assistindo os arquivos por mudanças, e irá compliar novamente, se houver alguma.

Agora que compilamos os arquivos Typescript para Javascript, precisamos rodar o script "dev" para que tudo comece a funcionar.

Este script vai rodar o nosso arquivo principal, que agora é um arquivo Javascript, dentro de nossa pasta /build.

E essa é a nossa configuração inicial 😉

Só para começarmos, vamos criar um Hello World no estilo GraphQL.

Dentro de /src vamos criar uma pasta /Resolvers. Nela ficarão todos os nossos resolvers, que terão os métodos de nossos tipos Query e Mutations, que vão nos ajudar a manipular nossos dados.

Dentro da pasta /Resolvers, criamos o arquivo helloResolver.ts

src/Resolvers/helloResolver.ts

import { Query, Resolver } from "type-graphql";

@Resolver()
export class helloResolver {
  @Query(() => String)
  hello() {
    return "Hello!";
  }
}

Usamos o @Resolver Decorator para especificar um Resolver, e dentro dessa classe, nós adicionamos nossas funções, que seram nossas Queries ou Mutations, que por sua vez serão utilizadas para buscar ou enviar dados para nossa API.

Em nossa função hello() dentro de nosso helloResolver, nós estamos buscando dados, portanto, utilizamos o tipo Query.

Podemos até comparar a Query com nosso verbo GET, em APIs REST.

Já o tipo Mutation, pode ser comparado com os verbos POST, PUT, PATCH ou DELETE.

Agora vamos precisar dar um start em nossa aplicação.

Para isso vamos utilizar o Apollo Server, que é um servidor próprio para GraphQL e seus clients.

Sugiro que dê uma olhada no Apollo Server:

https://www.apollographql.com/docs/apollo-server/

Em nosso arquivo index.ts, vamos criar uma função bootstrap() que inicializará nosso app.

src/index.ts

import "reflect-metadata";

import { ApolloServer } from "apollo-server";
import { buildSchema } from "type-graphql";

import { helloResolver } from "./Resolvers/helloResolver";

async function bootstrap() {
  const server = new ApolloServer({
    schema: await buildSchema({
      resolvers: [helloResolver],
    }),
  });

  await server.listen(4000, () => {
    console.log("Apollo Server running at port: 4000");
  });
}

bootstrap().catch((error) => console.log(error));

Dentro dela, vamos criar uma instância do Apollo Server. Como uma dependência, vamos criar um Schema, que vai receber os nossos Resolvers, que no caso, acabamos de criar o primeiro

Por último vamos chamar a função listen() do nosso server, passando a porta da aplicação e uma função callback, dizendo que o app está rodando. Se tudo ocorreu bem, claro 🤞🏼

Bora testar!

Rode os scripts

yarn watch

yarn dev

Dê uma olhada em http://localhost:4000

Tudo rodando! 🏃🏼

Agora vamos testar nossa primeira Query.

Incrível! 🔥

Agora que já está tudo funcionando corretamente, vamos para o nosso projeto!

Primeiro de tudo, vamos criar a nossa Entidade Recipe, que será nossa Model para o tipo Recipe.

Dentro de uma pasta /Entities, criamos a nossa entidade Recipe.

src/Entities/Recipe.ts

export class Recipe {
  id: string;

  name: string;

  description: string;

  ingredients: Array<string>;
}

Essa é nossa classe Recipe.

Agora com o Decorator @ObjectType, criamos nosso "Tipo Objeto", para o type-graphql defini-lo e utiliza-lo como um Schema.

E também utilizamos o Decorator @Field para marcar as propriedades de nosso objeto.

import { Field, ObjectType } from "type-graphql";

@ObjectType()
export class Recipe {
  @Field()
  id: string;

  @Field()
  name: string;

  @Field({ nullable: true })
  description: string;

  @Field(() => [String])
  ingredients: Array<string>;
}

Esses campos podem receber opções, como por exemplo em description, a opção nullable que define que nossa propriedade pode ser nula.

O Decorator irá auto-inferir os tipos String ou Boolean, mas há uma limitação para tipos genéricos, como Array ou Promises, para esses nos devemos "inferir manualmente", como foi feito no campo ingredients.

Antes de criar nosso Recipe Resolver, vamos criar o nosso banco de dados, para armazenarmos nossas receitas.

Para facilitar, não vamos utilizar nenhum banco como MongoDB ou mesmo PostgreSQL. Nosso banco de dados será uma simples Array de Recipe - Isso é para facilitar o tutorial, principalmente para quem está começando 🤓.

Sendo assim, vamos criar nosso incrível banco de dados.

Criamos um arquivo data.ts dentro de nossa pasta /src

import { Recipe } from "./Entities/Recipe";

export const recipeData: Array<Recipe> = [];

Apenas exportamos uma Array de Recipe.

E é isso para nosso banco.

Se esse material tiver uma boa relevância para vocês devs, posso fazer algum outro post/tutorial abordando uma API com a implementação de algum banco de dados um pouco mais interessante do que a nossa humilde recipeData 😂

Enfim, vamos começar com nosso Recipe Resolver.

Dentro da pasta /Resolvers, vamos criar nosso recipeResolver.ts

/src/Resolvers/recipeResolver.ts

import { Query, Resolver } from "type-graphql";

import { recipeData } from "../recipeData";

@Resolver()
export class recipeResolver {

  @Query(() => [Recipe])
    getRecipes() {
        return recipeData;
    }
}

Assim como o nosso Hello World Resolver, vamos criar a classe recipeResolver.

Nela começamos com nosso primeiro tipo Query, para buscar os dados que temos de receitas.

Assim que salvarmos, e enviarmos a Query, teremos o seguinte resultado:

Vazio como esperado. Agora vamos criar uma Mutation para inserirmos novas receitas e assim nossa Query getRecipes() poderá mostra-los.

Como já sabemos, para criar nossa receita, vamos precisar de uma Mutation

Além disso, também vamos precisar enviar o objeto do tipo Recipe, com as informações de nossa receita.

Vamos definir este objeto como data com o @Arg() Decorator.

import { Query, Mutation, Resolver, Arg } from "type-graphql";

import { recipeData } from "../recipeData";

@Resolver()
export class recipeResolver {

  @Mutation(() => Recipe)
  createRecipe(@Arg("data") data: Recipe) { }

}

Agora quando formos enviar nossa Mutation, vamos passar nosso objeto data, para assim conseguirmos armazená-lo em nosso banco.

Mas há um porém. O nosso tipo Recipe possui uma propriedade id, mas no caso não vamos deixar o cliente enviar esta informação, vamos criá-la em nosso método createRecipe()

Para nos auxiliar, vamos utilizar uma biblioteca chamada uuidv4

Para instalar essa lib, podemos utilizar nosso gerenciador de pacotes favorito:

yarn add uuidv4

Logo, nossa createRecipe() Mutation vai ficar assim:

import { Query, Mutation, Resolver, Arg } from "type-graphql";
import { v4 as uuidv4 } from "uuid";

import { recipeData } from "../recipeData";

@Resolver()
export class recipeResolver {

  @Mutation(() => Recipe)
  createRecipe(@Arg("data") data: Recipe) {
    let newRecipe = { ...data, id: uuidv4() };

    recipeData.push(newRecipe);

    return newRecipe;      

  }

}

Não sei se percebeu, mas ainda tem uma coisinha que precisamos mudar...

Nosso argumento data, ainda está com o tipo Recipe. 🤔

Vamos resolver isso criando um tipo para data

Criamos uma pasta /Types e nela criamos o arquivo RecipeDataType.ts

src/Types/RecipeDataType.ts

import { Field, InputType } from "type-graphql";

@InputType()
export class RecipeDataType {
  @Field()
  name: string;

  @Field()
  description: string;

  @Field(() => [String])
  ingredients: Array<string>;
}

Diferente de nosso Tipo Objeto, para esse vamos utilizar o Tipo Input @InputType

Agora podemos adicionar esse tipo para nosso data

import { Query, Mutation, Resolver, Arg } from "type-graphql";
import { v4 as uuidv4 } from "uuid";

import { recipeData } from "../recipeData";
import { RecipeDataType } from "../Types/RecipeDataType";

@Resolver()
export class recipeResolver {

  @Mutation(() => Recipe)
  createRecipe(@Arg("data") data: RecipeDataType) {
    let newRecipe = { ...data, id: uuidv4() };

    recipeData.push(newRecipe);

    return newRecipe;      

  }

}

Hora de testar!

Irado! 🔥

Para nossas Mutations de delete e update, vamos fazer algo muito parecido, apenas mudando o jeito que manipulamos os dados em nosso banco.

A Mutation deleteRecipe(), vai precisar de um argumento id, para assim, conseguirmos buscar a receita a ser deletada dentro de nosso banco de dados.

import { Query, Mutation, Resolver, Arg } from "type-graphql";
import { recipeData } from "../recipeData";

import { RecipeDataType } from "../Types/RecipeDataType";

import { v4 as uuidv4 } from "uuid";

@Resolver()
export class recipeResolver {

@Mutation(() => Boolean)
  deleteRecipe(@Arg("id") id: string): Boolean {
    let recipeIndex = recipeData.findIndex((recipe) => recipe.id === id);

    if (recipeIndex > -1) {
      recipeData.splice(recipeIndex, 1);
      return true;
    }

    return false;
  }

}

Vamos dar uma olhada no resultado

Só não vamos esquecer de criar uma nova receita para podermos deletá-la. Isso acontece porque o nosso "banco de dados" está na memória, e sempre que a aplicação recarregar, vamos perder as nossas deliciosas receitas 😢 Mas não tem problema por agora 😊

Agora com nosso id, vamos usá-lo para deletar a receita.

Brabo!! estamos quase no final 😎

Por ultimo, nossa Mutation updateRecipe()

Para essa, vamos utilizar 2 argumentos, o id da receita para ser alterada, e também o data, que vai conter as novas informações da receita.

import { Query, Mutation, Resolver } from "type-graphql";
import { recipeData } from "../recipeData";

import { RecipeDataType } from "../Types/RecipeDataType";

import { v4 as uuidv4 } from "uuid";

@Resolver()
export class recipeResolver {

    @Mutation(() => Recipe)
  updateRecipe(
    @Arg("id") id: string,
    @Arg("data") data: RecipeDataType
  ) {
    let recipeIndex = recipeData.findIndex((recipe) => recipe.id === id);

    if (recipeIndex > -1) {
      recipeData[recipeIndex] = { ...data, id };

      return recipeData[recipeIndex];
    }

  }

}

Checando...

Ta lá! nossa API de receitas. 😎

Agora podemos dar apenas um toque final...

Como você deve ter percebido, nós não especificamos nenhum tipo de respostas para as nossas Queries e Mutations, e isso está um pouco feio...

Vamos criar!

Para esse tipo, vamos utilizar o Decorator @ObjectType()

Dentro de /Types, vamos criar ResponseType.ts

src/Types/ResponseType.ts

import { Field, ObjectType } from "type-graphql";
import { Recipe } from "../Entities/Recipe";

@ObjectType()
export class ErrorType {
  @Field()
  message: string;
}

@ObjectType()
export class ResponseType {
  @Field(() => Recipe, { nullable: true })
  recipe?: Recipe;

  @Field(() => ErrorType, { nullable: true })
  error?: ErrorType;
}

Agora precisamos apenas adicionar esse tipo como resposta de nossos métodos em nosso Resolver.

Nosso recipeResolver.ts completo, ficará assim:

import { Arg, Mutation, Query, Resolver } from "type-graphql";
import { v4 as uuidv4 } from "uuid";

import { Recipe } from "../Entities/Recipe";

import { recipeData } from "../recipeData";

import { RecipeDataType } from "../Types/RecipeDataType";
import { ResponseType } from "../Types/ResponseType";

@Resolver()
export class recipeResolver {
  @Query(() => [Recipe])
  recipes() {
    return recipeData;
  }

  @Query(() => ResponseType)
  getRecipe(@Arg("id") id: string): ResponseType {
    let recipe = recipeData.find((recipe) => recipe.id === id);

    if (recipe) {
      return { recipe };
    }

    return {
      error: {
        message: "Recipe not found",
      },
    };
  }

  @Mutation(() => ResponseType)
  createRecipe(@Arg("data") data: RecipeDataType): ResponseType {
    let newRecipe: Recipe = { ...data, id: uuidv4() };

    recipeData.push(newRecipe);

    if (newRecipe) {
      return {
        recipe: newRecipe,
      };
    }

    return {
      error: {
        message: "Could not create your recipe",
      },
    };
  }

  @Mutation(() => ResponseType)
  deleteRecipe(@Arg("id") id: string): ResponseType {
    let recipeIndex = recipeData.findIndex((recipe) => recipe.id === id);

    if (recipeIndex > -1) {
      recipeData.splice(recipeIndex, 1);
      return {};
    }

    return {
      error: {
        message: "Recipe not found",
      },
    };
  }

  @Mutation(() => ResponseType)
  updateRecipe(
    @Arg("id") id: string,
    @Arg("data") data: RecipeDataType
  ): ResponseType {
    let recipeIndex = recipeData.findIndex((recipe) => recipe.id === id);

    if (recipeIndex > -1) {
      recipeData[recipeIndex] = { ...data, id };

      return { recipe: recipeData[recipeIndex] };
    }

    return {
      error: {
        message: "Recipe not found",
      },
    };
  }
}

Vamos dar uma olhada final

DEMAIS! 🔥

Agora está melhor, mas ainda sim, há espaço para MUITA melhoria. Mas agora é contigo.

Nesse ponto você provavelmente vai estar com o básico de conhecimento de TypeGraphQL, e talvez, assim como eu, percebeu os benefícios de codar sua API GrahpQL com Typescript.

Se tiver afim, faça um fork desse projeto ou mesmo crie um PR com suas alterações e considerações, vou curtir demais trocar conhecimento 👍🏼

Espero que esse post tenha sido útil. Obrigado.

Código fonte:

vinisaveg/typegraphql-basics

Happy Coding! 🙂