Crear una aplicación React de pila completa

Implementación

• Crear una API de GraphQL y base de datos

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

  amplify add api
  
  ? Select from one of the below mentioned services: GraphQL
  ? Here is the GraphQL API that we will create. Select a setting to edit or continue: Continue
  ? Choose a schema template: Single object with fields (e.g., "Todo" with ID, name, description)
  ? Do you want to edit the schema now? (Y/n) yes

  Code snippet copied

  Copiar

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

  Actualice el archivo con el siguiente esquema:
  

  type Note @model @auth(rules: [ { allow: public } ] ){
    id: ID!
    name: String!
    description: String
  }

  Code snippet copied

  Copiar

  c. Guarde el archivo.
  

• Implementar la API

  Ahora que se ha configurado la API a nivel local, es hora de implementarla. Para esto, ejecute el comando push de Amplify:
  

  amplify push --y

  Code snippet copied

  Copiar

  Esto realizará tres cosas:

  1. Creará la AWS AppSync API
  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 GraphQL API en su cuenta en cualquier momento, ejecute el siguiente comando y, luego, seleccione la GraphQL API en el panel de navegación izquierdo:

  amplify console api
  
  > Choose GraphQL
  

  Code snippet copied

  Copiar

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

  amplify console
  ? Which site do you want to open? AWS console

  Code snippet copied

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

  Ahora que se ha implementado el back-end, escribamos algo de 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 "@aws-amplify/ui-react/styles.css";
  import { API } from "aws-amplify";
  import {
    Button,
    Flex,
    Heading,
    Text,
    TextField,
    View,
    withAuthenticator,
  } from "@aws-amplify/ui-react";
  import { listNotes } from "./graphql/queries";
  import {
    createNote as createNoteMutation,
    deleteNote as deleteNoteMutation,
  } from "./graphql/mutations";
  
  const App = ({ signOut }) => {
    const [notes, setNotes] = useState([]);
  
    useEffect(() => {
      fetchNotes();
    }, []);
  
    async function fetchNotes() {
      const apiData = await API.graphql({ query: listNotes });
      const notesFromAPI = apiData.data.listNotes.items;
      setNotes(notesFromAPI);
    }
  
    async function createNote(event) {
      event.preventDefault();
      const form = new FormData(event.target);
      const data = {
        name: form.get("name"),
        description: form.get("description"),
      };
      await API.graphql({
        query: createNoteMutation,
        variables: { input: data },
      });
      fetchNotes();
      event.target.reset();
    }
  
    async function deleteNote({ id }) {
      const newNotes = notes.filter((note) => note.id !== id);
      setNotes(newNotes);
      await API.graphql({
        query: deleteNoteMutation,
        variables: { input: { id } },
      });
    }
  
    return (
      <View className="App">
        <Heading level={1}>My Notes App</Heading>
        <View as="form" margin="3rem 0" onSubmit={createNote}>
          <Flex direction="row" justifyContent="center">
            <TextField
              name="name"
              placeholder="Note Name"
              label="Note Name"
              labelHidden
              variation="quiet"
              required
            />
            <TextField
              name="description"
              placeholder="Note Description"
              label="Note Description"
              labelHidden
              variation="quiet"
              required
            />
            <Button type="submit" variation="primary">
              Create Note
            </Button>
          </Flex>
        </View>
        <Heading level={2}>Current Notes</Heading>
        <View margin="3rem 0">
          {notes.map((note) => (
            <Flex
              key={note.id || note.name}
              direction="row"
              justifyContent="center"
              alignItems="center"
            >
              <Text as="strong" fontWeight={700}>
                {note.name}
              </Text>
              <Text as="span">{note.description}</Text>
              <Button variation="link" onClick={() => deleteNote(note)}>
                Delete note
              </Button>
            </Flex>
          ))}
        </View>
        <Button onClick={signOut}>Sign Out</Button>
      </View>
    );
  };
  
  export default withAuthenticator(App);

  Code snippet copied

  Copiar

  Nuestra aplicación tiene tres funciones principales:

  1. fetchNotes: Esta función utiliza el tipo de API para enviar una consulta a la GraphQL API y recuperar una lista de notas.
  2. createNote: Esta función también usa la clase API para enviar una mutación a la GraphQL API. La diferencia principal es que en esta función pasamos las variables necesarias para una mutación de GraphQL para poder 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

  Code snippet copied

  Copiar