Como começar com os Boilerplates Angular-Hasura

Siddhant Srivastav Blocked Unblock Seguir Seguindo 10 de dezembro de 2018 Angular + Hasura

Esta postagem de blog dá uma idéia de como começar com o GraphQL com a ajuda de Hasura e Angular. Eu lhe darei informações sobre os aplicativos padrão no Angular configurados para uso com o mecanismo GraphQL implementado do Hasura no Heroku.

A ideia por trás deste artigo é dar um empurrão no processo de criação do aplicativo e uma ideia sobre a abordagem usada para ele. Não entraremos muito no código, apenas na parte que precisamos para colocar o aplicativo em funcionamento.

Vamos cavar!

visão global

Nós temos 3 gêneros de boilerplates:

Olá Mundo

Este clichê é apenas um aplicativo Angular que possui as configurações para GraphQL e cabeçalhos já configurados. Usando este clichê, você pode clonar diretamente o aplicativo e começar a criar seu aplicativo!

básico

Este clichê é construído sobre o clichê hello-world e introduz as funcionalidades básicas de mutação / consultas e mostra como você as escreve e as funções que as utilizam.

avançado

Este clichê é construído sobre o aplicativo básico e é totalmente desenvolvido com mutações, consultas e autenticação com Auth0 já configurado! Este boilerplate é um aplicativo ideal para você começar e criar novos aplicativos em nenhum momento.

Woah! Pare! Coisas importantes aqui …

Para usar esses padrões, existem algumas configurações importantes necessárias. Aqui estão eles:

  • Crie uma instância no Heroku. Para fazer isso vá para https://hasura.io
  • Configure as variáveis de ambiente: Vá para o arquivo environments/environment.ts e altere os valores para o nó de extremidade e outros campos obrigatórios. No aplicativo avançado, você precisará usar as credenciais fornecidas por Auth0.

Os Boilerplates

Os três boilerplates que permitem que o Angular interaja com o mecanismo GraphQL do Hasura podem ser clonados a partir do repo do mecanismo Hasura . Etapas comuns para todos os três boilerplates são:

  • Clone o aplicativo.
  • cd <boilerplate-name> e
  • execute o npm install para instalar todas as dependências.

Olá Mundo

O boilerplate hello-world não é nada além de um simples aplicativo Angular com a configuração do módulo GraphQL e com o cliente apollo já configurado também.
A estrutura do diretório para a aplicação é mostrada abaixo.

O aplicativo hello world possui um módulo hello que importa o graph-ql.module.ts . Formar essa estrutura de diretório nos ajuda a inicializar o Módulo GraphQL assim que o Módulo Hello for ativado.

Mas por que precisamos fazer isso? O módulo GraphQL inicializa os cabeçalhos e cria um cliente Apollo. Os cabeçalhos contêm tokens de autorização e outras informações. Queremos inicializar este módulo apenas quando os tokens de autorização estiverem definidos, senão precisaríamos atualizar o aplicativo mais uma vez para definir os valores dos tokens no módulo. Este padrão é seguido em todos os boilerplates.

O Módulo Hello é ativado a partir do Módulo de Aplicativos.

Agora vamos conhecer melhor o Módulo GraphQL. Este módulo é o mesmo ao longo dos três padrões com alguns pequenos ajustes para os tokens.

O aplicativo básico

O clichê Basic App é construído sobre o clichê Hello World. As adições ao aplicativo são as consultas e mutações escritas para dar exemplos de como as consultas e as mutações são gravadas.

As consultas são gravadas em app/shared/operations.ts . O Módulo Compartilhado é importado para o Módulo Básico com contém HTML e funções escritas para fazer consultas.

Página de login

No aplicativo básico , o login é tratado por um autenticador simulado que define uma sessão codificada e permite que você faça login com qualquer nome de usuário e senha.

Item de lista completa de itens

O Boilerplate Avançado

Este clichê é construído sobre o clichê básico e adiciona o recurso de autenticação para o aplicativo.

Autenticação via Auth0

  • Vá até https://auth0.com e faça login.
  • Uma vez logado, crie um novo aplicativo e obtenha as credenciais para o aplicativo.
  • Abra as configurações do aplicativo e adicione um URL de retorno de chamada. Para desenvolvimento: use a URL http: // localhost: 4200 e, para produção, use a url do seu site.

Agora vá para os environments/environment.prod.ts e substitua as variáveis de ambiente. Agora você está pronto para usar o boilerplate avançado!

Codificação Feliz!

Sobre mim

Meu nome é Siddhant Srivastav , e sou estudante de graduação no Instituto Indiano de Tecnologia da Informação, Allahabad.

Eu amo criar. Eu amo codificar em Python e JS. Eu adoro código aberto e contribuir em projetos que considero interessantes.

Você pode me seguir no LinkedIn , Twitter e GitHub .