Implementierung

• Erstellen einer GraphQL-API und -Datenbank

  a. Fügen Sie eine GraphQL-API zu Ihrer Anwendung hinzu, indem Sie den folgenden Befehl vom Stammverzeichnis Ihres Anwendungsverzeichnisses aus ausführen:
  

  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. Öffnen Sie das GraphQL-Schema in Ihrem Texteditor: amplify/backend/api/myapi/schema.graphql.

  Aktualisieren Sie die Datei mit dem folgenden Schema:
  

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

  c. Speichern Sie die Datei. Gehen Sie dann zurück zur Befehlszeile und drücken Sie die Eingabetaste, um den API-Konfigurationsschritt abzuschließen.

• Bereitstellen der API

  Nun, da die API lokal konfiguriert wurde, ist es an der Zeit, sie bereitzustellen. Führen Sie dazu den Amplify push-Befehl aus:
  

  amplify push --y

  Dies wird 3 Dinge bewirken:

  1. Die AppSync-API erstellen
  2. Eine DynamoDB-Tabelle erstellen
  3. Erstellen Sie die lokalen GraphQL-Operationen in einem Ordner unter src/graphql, die Sie zur Abfrage der API verwenden können

  Um die GraphQL-API jederzeit in Ihrem Konto anzuzeigen, führen Sie den folgenden Befehl aus:

  amplify console api
  
  > Choose GraphQL
  

  Um die Amplify-Anwendung jederzeit in Ihrem Konto anzuzeigen, führen Sie den folgenden Befehl aus:
  

  amplify console

• Schreiben von Front-End-Code zur Interaktion mit der API

  Nun, da das Backend bereitgestellt wurde, lassen Sie uns etwas Code schreiben, damit Benutzer Notizen erstellen, auflisten und löschen können.

  Aktualisieren Sie src/App.js mit dem folgenden Code:

  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);
  

  In unserer App gibt es 3 Hauptfunktionen:

  1. fetchNotes: Diese Funktion verwendet die API-Klasse, um eine Anfrage an die GraphQL-API zu senden und eine Liste von Notizen abzurufen.
  2. createNote: Diese Funktion verwendet auch die API-Klasse, um eine Mutation an die GraphQL-API zu senden. Der Hauptunterschied besteht darin, dass wir in dieser Funktion die Variablen übergeben, die für eine GraphQL-Mutation benötigt werden, so dass wir eine neue Notiz mit den Formulardaten erstellen können.
  3. deleteNote: Wie createNote sendet diese Funktion eine GraphQL-Mutation zusammen mit einigen Variablen, aber anstatt eine Notiz zu erstellen, löschen wir eine Notiz.
• Führen Sie die App aus

  Um die Anwendung zu testen, führen Sie den Startbefehl aus:
  

  npm start