• 1. Angular Graphcool Chat
  • 1.1. Development server
  • 1.2. Code scaffolding
  • 1.3. Build
  • 1.4. Running unit tests
  • 1.5. Running end-to-end tests
  • 1.6. Further help
• 2. Padrão de mensagem de commit (CHANGELOG automatizados):
  • 2.1. Gerando o CHANGELOG do projeto
  • 2.2. Referências:
• 3. Baseado no curso
• 4. Inciando novo projeto
• 5. Angular Material
• 6. Sobre GraphQL
• 7. GraphQL - Documentação, Referências, Artigos
• 8. Graphcool
• 9. Instalando o Graphcool
  • 9.1. DOC
  • 9.2. Iniciando e criando o projeto backend com Graphcool
• 10. Plugin para Visual Studio - GraphQL for VSCode
• 11. Exemplo de chamada para o endpoint GraphQl usando HttpCliente do Angular
• 12. Usando o Apollo GraphQl Client
  • 12.1. Apollo Link Error
  • 12.2. Apollo Client Devtools
• 13. Modularização no Angular
  • 13.1. Gerando o CoreModule
  • 13.2. Gerando o SharedModule
• 14. Novas atualizações com ng update
• 15. Autenticação com Graphcool
  • 15.1. Instalando o template
• 16. Graphcool - File Management
• 17. Graphcool - Permission Queries
• 18. Guarda de rotas no Angular
• 19. Lazy Loading Feature Modules
• 20. Angular Routing & Navigation
• 21. World Clock API
• 22. Graphql Fragments
• 23. Apollo Using Fragments
• 24. Apollo Client developer tools
• 25. Apollo Queries
• 26. Apollo Direct Cache Access
• 27. Apollo Optimistic UI
• Apollo What is QueryRef
• Apollo Updating the Store
• Apollo Direct Cache Access

This project was generated with Angular CLI version 7.1.0.

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Run ng test to execute the unit tests via Karma.

Run ng e2e to execute the end-to-end tests via Protractor.

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

O projeto terá o controle de versão e a geração do CHANGELOG automatizados com mensagens de confirmação convencionais seguindo o padrão estabelecido por este documento.

Lembrando: A mensagem de commit será pré-estabelecida no issue

Para os commites do projeto, se o mensagem do commite não for definida no issue, usar o padrão definido abaixo:

Para bugs:

git commit -m "fix: texto_do_que_foi_feito_no_issue (número_do_issue_com_#)"

Para os demais:

git commit -m "feat: texto_do_que_foi_feito_no_issue (número_do_issue_com_#)"

Para escopo opcional de um commit:

git commit -m "feat(optional_scope): texto_do_que_foi_feito_no_issue (número_do_issue_com_#)"

Algumas regras:

1. Commits deve ser prefixado com um tipo, o qual consiste de um substantivo, feat, fix, etc, seguida de dois pontos e um espaço.
2. O tipo featDEVE ser usado quando um commit adiciona um novo recurso ao seu aplicativo ou biblioteca.
3. O tipo fix DEVE ser usado quando um commit representa uma correção de bug para seu aplicativo.
4. Um escopo opcional pode ser fornecido após um tipo. Um escopo é uma frase que descreve uma seção da base de código entre parênteses, por exemplo, fix(parser):

npm run release -- --release-as 1.0.0

Standard Version

Conventional Commits

https://github.com/plinionaves/angular-graphcool-chat

ng new angular-graphcoll-chat --style=scss

Material Design components for Angular

ng add @angular/material

• Type system: Sistema de tipos que usamos para descrever nossos dados;
• Queries: Obtém dados da nossa API (read);
• Mutations: Fas alterações nos dados da nossa API (write);
• Subcriptions: Permite ouvir mudanças em "tempo real" (real-time);
• Schema: Define o "Esquema" da nossa API, pense nele com um container para todos os tipos da nossa API (SDL).

• Documentação Oficial: http://graphql.org
• Referência: https://howtographql.com
• Apollo GraphQL: https://www.apollographql.com
• Blog Apollo Data: https://dev-blog.apollodata.com

Necessário criar uma conta no Graphcool

https://www.graph.cool/

npm -g i graphcool

https://www.graph.cool/docs/reference/graphcool-cli/commands-aiteerae6l

Criar dentro do próprio projeto, apenas para estudo. Em projetos oficiais, criar fora do projeto frontend.

Será criado um diretório graphcool dentro do projeto.

graphcool init graphcool

GraphQL for VSCode

constructor(private http: HttpClient) {
    // this.createUser();
    this.allUsers();
  }

  allUsers(): void {
    const body = {
      query: `
        query {
          allUsers {
            id
            name
            email
          }
        }
      `
    };

    this.http.post(this.apiUrl, body).subscribe(res => {
      console.log(res);
    });
  }

  createUser(): void {
    const body = {
      query: `
        mutation CreatenewUser($name: String!, $email: String!, $password: String!) {
          createUser(name: $name, email: $email, password: $password) {
            id
            name
            email
          }
        }
      `,
      variables: {
        name: 'Black Panther',
        email: '[email protected]',
        password: '123456'
      }
    };

    this.http.post(this.apiUrl, body).subscribe(res => {
      console.log('Mutations: ', res);
    });
  }

apollographql.com

Docs

Angular Doc

Já há suporte ao ng add

ng add apollo-angular

O Apollo Link é um sistema de componentes modulares para redes GraphQL.

npm i -E -S apollo-link-error

apollo-client-devtools

Os devtools aparecem como uma guia "Apollo" no seu inspetor do Google Chrome, ao lado das guias "Elementos" e "Console". Existem atualmente 3 principais características dos devtools:

• GraphiQL: Envie consultas para o seu servidor através da interface de rede da Apollo ou consulte o cache da Apollo para ver quais dados são carregados.
• Inspetor de armazenamento normalizado: visualize sua loja GraphQL da maneira que o Apollo Client a vê e pesquise por nomes ou valores de campo.
• Inspetor de consulta assistida: visualize consultas e variáveis ​​ativas e localize os componentes da interface do usuário associados.

• Gera sem modificação:

ng g m core --dryRun

• Gera o core:

ng g m core

• Gera sem modificação:

ng g m shared --dryRun

• Gera o core:

ng g m shared

ng update

ng update @angular/core

ng update @angular/material

Use os modelos Graphcool para inserir rapidamente a funcionalidade predefinida em seu próprio serviço Graphcool.

(graphcool-templates)[https://github.com/prisma-archive/graphcool-templates]

gcf add-template auth/email-password

https://www.graph.cool/docs/reference/graphql-api/file-management-eer4wiang0

https://www.graph.cool/docs/reference/graphql-api/file-management-eer4wiang0#file-upload-and-permissions

https://www.graph.cool/docs/reference/graphql-api/file-management-eer4wiang0#file-upload-and-permissions

https://www.graph.cool/docs/reference/auth/authorization/permission-queries-iox3aqu0ee

• CanActivate: Intermedia a nagevação para uma rota;
• CanActiveChild: intermedia a navegação para uma rota filha;
• CanDeactivate: Intermedia a navegação "para fora" da rota atual;
• CanLoad: Intermedia a navegação para um módulo "Lazy Loading";
• Resolve: Para executar a "recuperação" de dados (ex id) antes de ativar a rota;

angular.io/guide/lazy-loading-ngmodules

• The CanActivate guard (verificando o acesso à rota).
• The CanActivateChild guard (verificando o acesso da rota filho).
• The CanDeactivate guard (peça permissão para descartar as alterações não salvas).
• The Resolve guard (pré-busca de dados de rota).
• The CanLoad guard (verifique antes de carregar os recursos do módulo de recursos).

REST Services that will return current date/time in JSON for any registered time zone.

http://worldclockapi.com/

Digamos que tenhamos uma página relativamente complicada em nosso aplicativo, o que nos permite ver dois heróis lado a lado, junto com os amigos deles. Você pode imaginar que essa consulta poderia se complicar rapidamente, porque precisaríamos repetir os campos pelo menos uma vez - um para cada lado da comparação.

É por isso que o GraphQL inclui unidades reutilizáveis ​​chamadas fragmentos . Os fragmentos permitem que você construa conjuntos de campos e os inclua em consultas onde você precisa.

graphql.org/learn/queries/#fragments

Um fragmento GraphQL é uma parte compartilhada da lógica de consulta.

apollographql.com/docs/angular/features/fragments

github.com/facebook/graphql

Chrome extension for Apollo Client developer tools

apollographql/apollo-client-devtools

chrome.google.com/webstore/detail/apollo-client-developer-t

Nesta página, você pode aprender a usar o Apollo para anexar os resultados da consulta GraphQL à sua interface de usuário angular. Este guia pressupõe alguma familiaridade com o próprio GraphQL. Você pode ler em detalhes as consultas do GraphQL em graphql.org .

Um dos nossos principais valores é “é apenas GraphQL”. Ao usar o Apollo Client, você não precisa aprender nada de especial sobre a sintaxe da consulta, já que tudo é apenas GraphQL padrão. Qualquer coisa que você pode digitar no IDE de consulta do GraphQL, você também pode colocar em seu código do Apollo Client.

apollographql.com/docs/angular/basics/queries

O Apollo Client normaliza todos os seus dados, de modo que, se quaisquer dados que você buscou anteriormente em seu servidor GraphQL forem atualizados em uma busca posterior de dados do seu servidor, seus dados serão atualizados com a verdade mais recente do seu servidor.

apollographql.com/docs/angular/features/caching

Conforme explicado na seção de mutações , a UI otimista é um padrão que você pode usar para simular os resultados de uma mutação e atualizar a interface do usuário antes mesmo de receber uma resposta do servidor. Quando a resposta é recebida do servidor, o resultado otimista é descartado e substituído pelo resultado real.

A interface do usuário otimista fornece uma maneira fácil de fazer com que sua interface do usuário responda de maneira muito mais rápida, garantindo que os dados se tornem consistentes com a resposta real quando ela chegar.

apollographql.com/docs/angular/features/optimistic-ui

Como você sabe, o Apollo.querymétodo retorna um Observável que emite um resultado, apenas uma vez. Apollo.watchQuerytambém faz o mesmo, exceto que pode emitir vários resultados. (A própria consulta GraphQL ainda é enviada apenas uma vez, mas a watchQuery observação também pode ser atualizada se, por exemplo, outra consulta fizer com que o objeto seja atualizado no cache global do Apollo Client.)

Então, por que não Apollo.watchQueryexpor um Observable?

O serviço Apollo e o ApolloClient compartilham praticamente a mesma API. Isso torna as coisas fáceis de entender e usar. Não há razão para mudar isso.

Em ApolloClient.watchQueryretorna um Observable, mas não um padrão, ele contém muitos métodos úteis (como refetch()) para manipular a consulta assistida. Um Observável normal, tem apenas um método subscribe().

Para usar o Apollo's Observable em RxJS, teríamos que abandonar esses métodos. Como eles são necessários para usar o Apollo em todo o seu potencial, tivemos que encontrar uma solução.

É por isso que nós criamos QueryRef.

apollographql.com/docs/angular/basics/queries

O Apollo executa duas importantes tarefas principais: Executar consultas e mutações e armazenar em cache os resultados.

Graças ao design da loja da Apollo, é possível que os resultados de uma consulta ou mutação atualizem sua interface do usuário em todos os lugares certos. Em muitos casos, é possível que isso aconteça automaticamente, enquanto em outros você precisa ajudar um pouco o cliente a fazê-lo.

apollographql.com/docs/angular/features/cache-updates

Leia e escreva funções para acesso de cache refinado.

apollographql.com/docs/angular/features/caching

Além de buscar dados usando consultas e modificar dados usando mutações, a especificação GraphQL suporta um terceiro tipo de operação, chamado subscription.

As assinaturas do GraphQL são uma maneira de enviar dados do servidor para os clientes que escolhem ouvir mensagens em tempo real do servidor. As assinaturas são semelhantes às consultas, pois especificam um conjunto de campos a serem entregues ao cliente, mas, em vez de retornar imediatamente uma única resposta, um resultado é enviado toda vez que um determinado evento acontece no servidor.

Um caso de uso comum para assinaturas é notificar o lado do cliente sobre eventos específicos, por exemplo, a criação de um novo objeto, campos atualizados e assim por diante.

apollographql.com/docs/angular/features/subscriptions