dluan/bolierplate-with-cms

Boilerplate configurado para se comunicar com Graphql

Boilerplate Next JS

• Projeto pensado para front-end React que irá se comunicar com back-end graphql.
• Possui suporte a PWA
• Padronização de código: Utilização de Eslint e editor.config

Tech

Veja as principais tecnologias utilizadas:

• Next JS - Versão do 12 do framework.
• Jest - Framework para realização de testes.
• Storybook - Construir componentes, testa-los e documenta-los.
• Design System - Construa seu próprio design system com Stitches.
• UI components - Construção de componentes individualizados e primitivos com Radix
• Apollo - Comunicação com graphql
• Graphql Code Generator - Gerar os tipos (typescript) do schema graphql

Instalação e início

Recomendado utilizar Node.js até a versão 16.13.2.

Instale os pacotes do projeto:

yarn

Para rodar o projeto em ambiente de desenvolvimento:

yarn dev

Novo componente

No projeto há o pacote plop.js para agilizar a criação de um novo componente, execute o seguinte comando:

yarn generate NomeDoComponente

Será gerado dentro da pasta components, uma pasta com o nome específicado com os seguintes arquivos:

Nome do arquivo	Função
index.tsx	Arquivo principal do componente
stories.tsx	A documentação do componente no storybook
test.tsx	Arquivo para realização de testes do componente

Graphql

Este template se comunica com Graphql através do Apollo, a configuração está em: src/graphql/apollo.config.ts. Os dados de conexão estão em variáveis de ambiente, você pode customizar a sua maneira.

const httpLink = new HttpLink({
    uri: process.env.GRAPH_CMS_API_ENDPOINT,
    headers: {
      authorization: process.env.GRAPH_CMS_API_KEY
    }
})

> queries

As queries ficam em src/graphql/queries, consta um exemplo em data.ts. Essa pasta será utilizada para gerar os tipos das propriedades.

> code gen

Na raíz do projeto, existe o arquivo codegen.yml, nele é preciso atualizar o ENDPOINT do schema graphql.

Sempre que criar ou alterar as queries, é preciso gerar os tipos, para isso execute o seguinte comando:

yarn gen