Introducción a AWS

Cree una aplicación React

Cree una aplicación Web simple con AWS Amplify

Módulo 4: agregar una API de GraphQL y base de datos

En este módulo usará las CLI y bibliotecas de Amplify para configurar y agregar la API de GraphQL a su aplicación.

Introducción

Ahora que hemos creado u configurado la aplicación con autenticación, agreguemos una API.

En este módulo, agregará una API a su aplicación mediante la CLI y las bibliotecas de Amplify. La API que creará es una API de GraphQL que aprovecha AWS AppSync (un servicio de GraphQL administrado) que está respaldado por Amazon DynamoDB (una base de datos de NoSQL). (Para obtener una introducción a GraphQL, visite esta página).

La aplicación que crearemos será una aplicación de Notas que permitirá que los usuarios creen, eliminen y mencionen notas. Este ejemplo le dará una buena idea de cómo crear muchos tipos de CRUD+L populares (crear, leer, actualizar, eliminar y mencionar) aplicaciones.

Lo que aprenderá

  • Crear e implementar una API de GraphQL
  • Escribir un código front-end para interactuar con la API

Conceptos clave

API: proporciona una interfaz de programación que permite la comunicación y las interacciones entre diversos intermediarios de software.

GraphQL: una implementación de API del lado del servidor e idioma de consulta basada en una representación tipada de su aplicación. Esta representación de API se declara utilizando un esquema basado en el sistema de tipo GraphQL. (Para obtener más información GraphQL, visite esta página).

 Tiempo de realización

15 minutos

 Servicios utilizados

Implementación

  • Crear una API de GraphQL y base de datos

    a. Agregar una API de GraphQL a su aplicación ejecutando el siguiente comando desde la raíz del directorio de su aplicación:

    amplify add api
    
    ? Please select from one of the below mentioned services: GraphQL
    ? Provide API name: notesapp
    ? Choose the default authorization type for the API: API Key
    ? Enter a description for the API key: demo
    ? After how many days from now the API key should expire: 7 (or your preferred expiration)
    ? Do you want to configure advanced settings for the GraphQL API: No, I am done.
    ? Do you have an annotated GraphQL schema?  No
    ? Do you want a guided schema creation?  Yes
    ? What best describes your project: Single object with fields
    ? Do you want to edit the schema now? Yes

    b. Abra el esquema GraphQL en su editor de texto: amplify/backend/api/myapi/schema.graphql.

    Actualice el archivo con el siguiente esquema:

    type Note @model {
      id: ID!
      name: String!
      description: String
    }
    

    c. Guarde el archivo. Vuelva a la línea de comando y pulse intro para completar el paso de configuración de API.

  • Implementar la API

    Ahora que se ha configurado la API a nivel local, es tiempo de implementarla. Para esto, ejecute el comando de envío de Amplify:

    amplify push --y

    Esto hará 3 cosas:

    1. Creará la API AppSync
    2. Creará una tabla de DynamoDB
    3. Creará las operaciones GraphQL locales en una carpeta que se encuentra en src/graphql y que puede usar para consultar la API

    Para ver la API de GraphQL en su cuenta en cualquier momento, ejecute el siguiente comando:

    amplify console api
    
    > Choose GraphQL
    

    Para ver la aplicación de Amplify en su cuenta en cualquier momento, ejecute el siguiente comando:

    amplify console
  • Escribir un código front-end para interactuar con la API

    Ahora que se ha implementado el back-end, escribamos un código para permitir que los usuarios creen, enumeren y eliminen notas.

    Actualice src/App.js con el siguiente código:

    import React, { useState, useEffect } from 'react';
    import './App.css';
    import { API } from 'aws-amplify';
    import { withAuthenticator, AmplifySignOut } from '@aws-amplify/ui-react';
    import { listNotes } from './graphql/queries';
    import { createNote as createNoteMutation, deleteNote as deleteNoteMutation } from './graphql/mutations';
    
    const initialFormState = { name: '', description: '' }
    
    function App() {
      const [notes, setNotes] = useState([]);
      const [formData, setFormData] = useState(initialFormState);
    
      useEffect(() => {
        fetchNotes();
      }, []);
    
      async function fetchNotes() {
        const apiData = await API.graphql({ query: listNotes });
        setNotes(apiData.data.listNotes.items);
      }
    
      async function createNote() {
        if (!formData.name || !formData.description) return;
        await API.graphql({ query: createNoteMutation, variables: { input: formData } });
        setNotes([ ...notes, formData ]);
        setFormData(initialFormState);
      }
    
      async function deleteNote({ id }) {
        const newNotesArray = notes.filter(note => note.id !== id);
        setNotes(newNotesArray);
        await API.graphql({ query: deleteNoteMutation, variables: { input: { id } }});
      }
    
      return (
        <div className="App">
          <h1>My Notes App</h1>
          <input
            onChange={e => setFormData({ ...formData, 'name': e.target.value})}
            placeholder="Note name"
            value={formData.name}
          />
          <input
            onChange={e => setFormData({ ...formData, 'description': e.target.value})}
            placeholder="Note description"
            value={formData.description}
          />
          <button onClick={createNote}>Create Note</button>
          <div style={{marginBottom: 30}}>
            {
              notes.map(note => (
                <div key={note.id || note.name}>
                  <h2>{note.name}</h2>
                  <p>{note.description}</p>
                  <button onClick={() => deleteNote(note)}>Delete note</button>
                </div>
              ))
            }
          </div>
          <AmplifySignOut />
        </div>
      );
    }
    
    export default withAuthenticator(App);
    

    Existen 3 funciones principales en nuestra aplicación:

    1. fetchNotes: esta función utiliza el tipo de API para enviar una consulta a la API de GraphQL y recuperar una lista de notas.
    2. createNote: esta función también utiliza el tipo de API para enviar una mutación a la API de GraphQL, la principal diferencia es que en esta función pasamos las variables necesarias para una mutación de GraphQL de manera que podamos crear una nueva nota con los datos del formulario.
    3. deleteNote: al igual que createNote, esta función envía una mutación de GraphQL junto con algunas variables, pero en lugar de crear una nota, eliminamos una nota.
  • Ejecutar la aplicación

    Para probar la aplicación, ejecute el comando de inicio:

    npm start

Conclusión

Ha creado una aplicación de Notas. Mediante AWS Amplify, agregó una API de GraphQL y configuró una funcionalidad para crear, leer y eliminar en su aplicación. En el siguiente módulo, agregaremos un servicio de almacenamiento a su aplicación.

¿Este módulo le resultó útil?

Gracias
Indíquenos lo que le gustó.
Cerrar
Lamentamos haberlo decepcionado
¿Hay información desactualizada, confusa o inexacta? Ayúdenos a mejorar este tutorial con sus comentarios.
Cerrar

Agregar almacenamiento