AWS AppSync – Up and Running com GraphQL na nuvem

O serviço AWS AppSync GraphQL oferece atualizações em tempo real e suporte off-line integrado, juntamente com a integração de primeira classe com ElasticSearch, DynamoDB e AWS Lambda.

Página de destino do AppSync

A maneira como eu descrevesse o AppSync é que é basicamente um serviço Firebase, mas com recursos de pesquisa e busca de banco de dados mais abrangentes, bem como uma API GraphQL totalmente gerenciada para sua aplicação.

No momento, o AppSync possui sdks para iOS nativos, web e React Native, com o Android em breve.

Nesta postagem, eu andarei usando o AWS AppSync para criar um novo nó de extremidade da API que fornecerá uma tabela DynamoDB e caminhe pelo projeto iniciante que a AppSync fornece e discuta como tudo está conectado.

Em seguida, examinaremos como você pode usar o AppSync para criar novos esquemas que irão provisionar tabelas adicionais para correlacionar os novos recursos. Também analisaremos como usar resolvers e mapear modelos para criar solicitações e respostas personalizadas de seus esquemas GraphQL.

Esta postagem assumirá que você tem uma conta AWS e se inscreveu no AppSync .

Você pode se inscrever com seu número da conta AWS aqui: https://pages.awscloud.com/awsappsyncpreview.html . O tempo de entrega é bastante rápido.

Começando

Depois de iniciar sessão no console do AppSync, você verá esta tela, que permitirá que você vá em frente e crie uma nova API (figura 1):

Figura 1: Console do AppSync

Vou clicar no botão Orange Create API e crie uma nova API chamada EventsApp , e escolherá o Esquema de Amostra (Figura 2) que criará automaticamente um bom esquema de exemplo básico que podemos usar para começar e, em seguida, role para baixo e clique no botão Laranja Criar .

Figura 2: Criando uma nova API

Em seguida, seremos trazidos para o painel para a API que acabamos de criar. Aqui, veremos um menu à esquerda para nós, não só para explorar e editar o esquema, mas também para testar Consultas, adicionar e visualizar fontes de dados existentes relacionadas à API e gerenciar configurações (Figura 3).

Figura 3: Painel de controle do EventsApp

Nesta visão, vemos nosso URL do nó de extremidade da API, o modo de autenticação (definido como API KEY por padrão), e um guia de inicialização rápida para iOS, React Web e React Native.

Começaremos por clonar o projeto da Web e conectar nossas credenciais recém-criadas.

Vá em frente e vá até a parte inferior do Guia de Introdução e escolha Web, e copie o URL de reportagem clonado (Figura 3).

Figura 3: Clonagem do projeto de exemplo

Em uma pasta de trabalho da sua linha de comando, vamos continuar e clonar o projeto:

 git clone https://github.com/aws-samples/aws-mobile-appsync-events-starter-react

Em seguida, vá em frente e instale as dependências usando npm ou fio:

 instalação npm

ou

 fio

Agora, precisamos adicionar nosso arquivo de configuração do AppSync.

Para baixar o arquivo, clique no botão Download laranja abaixo, onde nós clonamos o repo e baixamos o arquivo para a pasta src .

Agora, devemos ser capazes de avançar e executar o projeto.

Da raiz do diretório, execute o início da Npm.

 Começo npm

Devemos ver nosso projeto em execução no navegador, e agora devemos poder adicionar novos eventos (Figura 4)! Avance e adicione pelo menos um evento.

Figura 4: Aplicação de Eventos

Agora, devemos poder entrar em nossas fontes de dados e ver o novo item adicionado ao nosso banco de dados.

No painel de instrumentos, clique em Fontes de dados e, em seguida, clique em AppSyncEventTable e, em seguida, clique na guia items (Figura 5).

Figura 5: Visualizando a tabela DynamoDB

Vamos agora abrir o nosso editor para ver como tudo isso é montado, então mergulhamos mais profundamente no painel do painel AWS AppSync para ver as consultas e o esquema que alimentam esta aplicação!

No src/App.js , vamos dar uma olhada no que está acontecendo:

  1. Importamos o arquivo de configuração AppSync baixado. Este arquivo contém o graphqlEndpoint que é o URL da API que foi provisionado quando a API foi criada a partir do painel do apiKey , o apiKey , bem como algumas outras peças de configuração.
  2. ApolloProvider do cliente Apollo é importado e usado para fornecer uma instância de cliente para uma árvore de componentes React. Isso nos permitirá anexar qualquer componente React ao nosso nó de extremidade GraphQL para realizar consultas e mutações.
  3. AWSAppSyncClient é semelhante ao construtor ApolloProvider . É preciso um objeto de configuração que contenha a URL da API, a região e as informações de autenticação.
  4. Rehydrated é um ajudante da biblioteca aws-appsync-react que basicamente aguardará a renderização do aplicativo até que os dados sejam obtidos da API e o aplicativo seja AWSAppSyncClient com o AWSAppSyncClient
  5. Conforme mencionado no passo 3, aqui estamos passando nossa configuração exclusiva para o construtor AWSAppSyncClient .
  6. Aqui criamos o componente principal da aplicação, envolvendo o componente da aplicação tanto no ApolloProvider quanto no Rehydrated .

Em seguida, dê uma olhada em src/Components/AllEvents.js e src/GraphQL/QueryAllEvents.js . Nesses arquivos, você verá uma configuração típica do GraphQL / Apollo.

A consulta GraphQL no QueryAllEvents parece assim:

 importar gql de "graphql-tag";
 exportar padrão gql (` 
 inquerir { 
 listEvents { 
 Unid { 
 identidade 
 nome 
 Onde 
 quando 
 descrição 
 comentários { 
 Unid { 
 commentId 
 } 
 } 
 } 
 } 
 } ` 
 );

Esta consulta irá buscar uma série de itens de eventos, cada um contendo um ID juntamente com algumas outras informações.

Esquema

De onde é exatamente esse dado? Vamos voltar ao nosso console do AppSync para ver o que está acontecendo! Vá para o painel para o aplicativo de eventos e vamos dar uma olhada no Esquema que foi gerado para nós quando criamos a API (Figura 6).

Figura 6: Esquema EventsApp

Neste esquema, veremos o tipo de correlação chamado Event juntamente com a consulta listEvents .

Também podemos ver tipos, consultas e mutações adicionais para coisas como excluir um evento, obter um único evento por identificação, entre outras coisas.

A próxima pergunta é provavelmente “Como o banco de dados lida com as consultas e mutações?” .

A resposta é resolvers .

Resolvers

Os Resolvers oferecem uma maneira de vincular tabelas de banco de dados (no nosso caso, DynamoDB) a consultas e mutações individuais.

Você pode visualizar, anexar e editar resolvers a partir da visualização Esquema clicando em um resolvedor existente ou clicando no botão Anexar ao lado de um tipo de dados existente (Figura 7).

Figura 7: Visualizando resolvers

Os Resolvers usam uma linguagem de modelos chamada Velocity Templating Language (VTL) para mapear consultas GraphQL em um formato específico para sua fonte de dados.

Algumas das consultas e mutações mais básicas que você precisaria executar, como obter um item por identificação ou colocar um item em uma matriz, já estão escritas para você e disponíveis no menu suspenso quando você está criando ou editando seu resolvedor (Figura 8).

Figura 8: Modelo de mapeamento

Criando um novo GraphQL Type + DynamoDB Table

Vamos tentar caminhar através do processo de criação de um novo tipo e consulta em nosso esquema, e depois anexar e testar um resolvedor.

No editor de esquema, vamos adicionar um novo tipo de usuário e clicar em salvar (Figura 9).

Figura 9: Adicionando um tipo de usuário

Depois de clicar em salvar, clique no botão Criar recursos no canto superior direito da tela acima dos tipos de dados.

Na tela Criar recursos, escolha Usuário como tipo no menu suspenso e vá até a parte inferior e clique no botão Criar (Figura 10).

Figura 10: Criando um novo recurso

Isso faz duas coisas:

  1. Crie uma nova tabela DynamoDB chamada UserTable .
  2. Atualizar o esquema, adicionando um getUser e allUser consulta, e uma putUser e deleteUser mutação.

Você pode agora visualizar suas fontes de dados e ver uma nova tabela, criada automaticamente para você, denominada UserTable . Você também pode visualizar as novas definições no esquema.

Agora, vamos testar a nova tabela e consultar!

Consultas e Mutações

No menu à esquerda do painel de instrumentos, clique em Consultas. O AppSync possui uma ferramenta no navegador para escrever, validar e testar consultas do GraphQL.

Crie uma nova consulta de mutação chamada putUser :

 mutação { 
 putUser ( 
 nome de usuário: "nader" 
 ID: 12345678 
 Nome: "Nader Dabit" 
 ) 
 { 
 identidade 
 } 
 }

Em seguida, clique no botão de reprodução laranja (Figura 11).

Figura 11: Executando uma consulta

Agora, você pode ver os novos dados no UserTable !

Também podemos obter esses dados usando a consulta getUser .

Experimente a seguinte consulta para buscar o usuário recém-criado:

 inquerir { 
 getUser (id: "12345678") { 
 nome 
 nome de usuário 
 identidade 
 } 
 }

Se você gostaria que o ID fosse gerado automaticamente, podemos fazer isso também bastante facilmente atualizando algumas coisas.

Primeiro, altere a definição de mutação no esquema para isso:

 putUser (name: String !, username: String!): Usuário

Em seguida, no resolvedor, altere o id no modelo de:

 "id": {"S": "$ {context.arguments.id}"}

para:

 "id": {"S": "$ util.autoId ()"}

Agora, podemos criar novos itens e a ID será gerada automaticamente:

 mutação { 
 putUser ( 
 nome de usuário: "chris" 
 nome: "Chris Johnson" 
 ) 
 { 
 identidade 
 } 
 }

Segurança

Você pode usar as políticas AWS IAM ou Pools de usuários do Cognito para seu diretório, bem como regras personalizadas definidas nos resolvedores GraphQL para executar as verificações de tempo de execução das regras de autorização.

Isso permite que algumas capacidades muito poderosas como a possibilidade de verificar se um usuário específico tem acesso para executar uma ação em uma única peça de dados – mesmo no nível da linha do banco de dados. Por exemplo, você pode verificar se um usuário chamado Bob foi o criador de um registro e só permite que Bob possa ler ou editar esse registro. Essas verificações de acesso podem ser feitas antes que o resolvedor se comunique com uma fonte de dados ou depois de efetuar a filtragem antes de enviar os dados de volta ao cliente.

Os recursos do Cognito User Pools também permitem o “agrupamento” de usuários e a configuração dos resolvers com base nesses grupos. Por exemplo, talvez você tenha usuários de Engenharia e RH, mas somente os usuários de Engenharia podem invocar um resolvedor específico.

Para saber mais, confira os documentos aqui .

AWS Amplify

Se você está olhando para integrar seu cliente UX com o AppSync facilmente, confira o AWS Amplify .

Esta nova biblioteca também lançada no ano passado permite que você obtenha coisas como o registro do usuário e faça o login facilmente em seu aplicativo. Gerencie os objetos AWS IAM e Cognito User Pools (como tokens JWT) para que você possa passá-los para o serviço AppSync quando quiser que os usuários se autentiquem antes de executar resolvers conforme descrito na seção anterior.

O amplificador funciona de forma excelente com os recursos da AWS, por exemplo, enviará o Analytics para o Amazon Pinpoint e também possui um componente de armazenamento para fazer o upload e fazer o download de dados do S3, que podem ser bloqueados por usuário, com uma configuração “privada”.

A AWS projetou que ele fosse aberto e plugável para uso com outros serviços da nuvem que desejem fornecer uma implementação ou backends personalizado, o que é uma boa adição à comunidade Open Source.

https://www.youtube.com/watch?v=vAjf3lyjf8c&feature=youtu.be&t=3360

Confira este clipe do YouTube para obter uma visão geral do Amplify.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *