Menu

Usando AWS Appsync con GraphQL y Angular.

angular - August 21, 2019 por Carlos Rojas | Edita este Post.
angular/core7.0.0

Existén ocasiones en que queremos desarrollar Web Apps sin necesidad de preocuparnos por el API. Adicionalmente, hay nuevas tecnologias como GraphQL que nos dan una capa extra de control en nuestro Cliente.

¿ Que es GraphQL ?

GraphQL es una tecnologia la cual te permite hacer peticiones a un API y obtener exactamente lo que quieres del sistema. Lo primero es que vamos a entender algunos terminos para poder avanzar en esta implementacion.

  • Resolver es una función que retorna algun dato.
  • Queries es una petición a un servidor por algun campo o datos.
  • Mutation es un cambio que le hacemos a los datos que estamos recibiendo.
  • Suscription es un flujo de datos que vamos a escuchar en tiempo real.
  • Types son una descripción de los datos que estamos recibiendo.

Un ejemplo sencillo de GraphQL puede ser enviando el siquiente Query:

{
  me {
    name
  }
}

Puede producir:

{
  "me": {
    "name": "Luke Skywalker"
  }
}

¿ Que es AWS Appsync ?

AWS Appsync es una solución de Amazon que te permite crear APIs facilmente los cuales vienen listos para soportar GraphQL.

Este servicio te permite crear una cuenta gratis acá.

¿ Que es Amplify CLI ?

Es la herramienta de comandos que podemos instalar en nuestros computadores para poder integrar facilmente nuestras Apps Web y Moviles con los AWS Services.

Para instalarlo, Nos vamos a ubicar en la raiz de nuestro proyecto y ejecutar en una terminal:

$ npm install -g @aws-amplify/cli

Implementando AWS Appsync en Angular

Primero, vamos a crear nuestro nuevo proyecto en Angular con el CLI.

$npm install -g @angular/cli
$ng new awsappsync

Luego, vamos a empezar a conectar appsync.

$ amplify init

La herramienta te detecta la mayoria de las cosas, entonces, muchas cosas por defecto estan bien.

Luego, tenemos que entrar en AWS y crear un API en la consola de AWS Appsync.

y tengo un esquema asi:

input CreateMyTestModelInput {
	title: String
}

input DeleteMyTestModelInput {
	id: ID!
}

type Mutation {
	createMyTestModel(input: CreateMyTestModelInput!): MyTestModel
	updateMyTestModel(input: UpdateMyTestModelInput!): MyTestModel
	deleteMyTestModel(input: DeleteMyTestModelInput!): MyTestModel
}

type MyTestModel {
	id: ID!
	title: String
}

type MyTestModelConnection {
	items: [MyTestModel]
	nextToken: String
}

type Query {
	getMyTestModel(id: ID!): MyTestModel
	listMyTestModels(filter: TableMyTestModelFilterInput, limit: Int, nextToken: String): MyTestModelConnection
}

type Subscription {
	onCreateMyTestModel(id: ID, title: String): MyTestModel
		@aws_subscribe(mutations: ["createMyTestModel"])
	onUpdateMyTestModel(id: ID, title: String): MyTestModel
		@aws_subscribe(mutations: ["updateMyTestModel"])
	onDeleteMyTestModel(id: ID, title: String): MyTestModel
		@aws_subscribe(mutations: ["deleteMyTestModel"])
}

input TableBooleanFilterInput {
	ne: Boolean
	eq: Boolean
}

input TableFloatFilterInput {
	ne: Float
	eq: Float
	le: Float
	lt: Float
	ge: Float
	gt: Float
	contains: Float
	notContains: Float
	between: [Float]
}

input TableIDFilterInput {
	ne: ID
	eq: ID
	le: ID
	lt: ID
	ge: ID
	gt: ID
	contains: ID
	notContains: ID
	between: [ID]
	beginsWith: ID
}

input TableIntFilterInput {
	ne: Int
	eq: Int
	le: Int
	lt: Int
	ge: Int
	gt: Int
	contains: Int
	notContains: Int
	between: [Int]
}

input TableMyTestModelFilterInput {
	id: TableIDFilterInput
	title: TableStringFilterInput
}

input TableStringFilterInput {
	ne: String
	eq: String
	le: String
	lt: String
	ge: String
	gt: String
	contains: String
	notContains: String
	between: [String]
	beginsWith: String
}

input UpdateMyTestModelInput {
	id: ID!
	title: String
}

Ok, Ahora vuelvo a mi proyecto en Angular y agrego en el main.ts.

...
import Amplify from 'aws-amplify';
import amplify from './aws-exports';
Amplify.configure(amplify);
...

Luego, debo ir al src/tsconfig.app.json y al tsconfig.jsony agregar:

{
...
  "compilerOptions": {
    "types": ["node"]
  }
...
}

Esto debido a los tipos que deben usar las dependencias. Adicionalmente, tenemos que agregar algo a los src/polyfills para que el navegador entienda algunas cosas de las dependencias.

import * as process from 'process';
window['process'] = process;
declare global {
  interface Window { global: any; }
}
window.global = window;

Ahora, instalemos las otras dependencias:

$ npm install --save aws-amplify aws-amplify-angular process @types/node @aws-amplify/api

y pasamos a ejecutar la conexión del SDK con nuestro proyecto.

amplify add codegen --apiId zk4sm6xxxxxxxx

donde zk4sm6xxxxxxxx es el identificador del API que creaste en appsync.

Con esto el CLI nos ha creado todo lo necesario en nuestro proyecto de Angular y nos ha generado un Servicio. Vamos a utilizar ese servicio para eso lo agrego al src/app/app.module.ts

...
import { APIService } from './API.service';

...
...
providers: [APIService],
...

y lo voy a utilizar en el src/app.component.ts

import { Component } from '@angular/core';
import { APIService, CreateMyTestModelInput } from './API.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'awsappsync';

  constructor(apiService: APIService) {
    const allData = apiService.CreateMyTestModel(<CreateMyTestModelInput>{'title': 'Hello, world!'}).then(
      (response) => {
        console.log('response >>>', response);
      }
    );
  }
}

y debes observar algo como.

Bueno eso es todo por ahora. Espero sea de utilidad :)

Ver código

¡Compártelo!