Mise en route avec AWS

Développer une application React

Créer une application Web simple avec AWS Amplify

Module 4 : ajouter une API GraphQL et une base de données

Dans ce module, vous allez utiliser la ligne d'interface de commande Amplify et des bibliothèques pour configurer et ajouter une API GraphQL à votre application.

Introduction

Maintenant que nous avons créé et configuré l'application avec l'authentification, ajoutons une API.

Dans ce module, nous allons ajouter une API à votre application en utilisant l'interface de ligne commande Amplify et des bibliothèques. L'API que vous allez créer est une API GraphQL qui exploite AWS AppSync (un service GraphQL géré) qui est soutenu par Amazon DynamoDB (une base de données NoSQL). (Pour une introduction à GraphQL, consultez cette page.)

L'application que nous allons créer sera une application Notes qui permet aux utilisateurs de créer, supprimer et répertorier des notes. Cet exemple démontre clairement comment créer de nombreux types populaires d'applications CRUD+L (créer, lire, mettre à jour, supprimer et répertorier).

Ce que vous apprendrez

  • Créer et déployer une API GraphQL
  • Écrire du code front-end pour interagir avec l'API

Concepts clés

API : fournit une interface de programmation qui permet à plusieurs intermédiaires logiciels de communiquer et d'interagir.

GraphQL : une implémentation d'API côté serveur et de langage de requête basée sur une représentation typée de votre application. Cette représentation d'API est déclarée en utilisant un schéma basé sur le système de type GraphQL. (Pour en savoir plus sur GraphQL, consultez cette page.)

 Durée

15 minutes

 Services utilisés

Mise en œuvre

  • Créer une API GraphQL et une base de données

    a. Ajoutez une API GraphQL à votre application en exécutant la commande suivante depuis la racine du répertoire de votre application :

    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. Ouvrez le schéma dans l'éditeur de texte : amplify/backend/api/myapi/schema.graphql.

    Mettez le fichier à jour avec le schéma suivant :

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

    c. Enregistrez le fichier. Revenez ensuite à la ligne de commande et appuyez sur Entrée pour terminer l'étape de configuration de l'API.

  • Déployer l'API

    À présent que l'API est configurée localement, il est nécessaire de la déployer. Pour ce faire, exécutez la commande push Amplify :

    amplify push --y

    Elle effectuera 3 actions :

    1. Créer l'API AppSync
    2. Créer une table DynamoDB
    3. Créer les opérations GraphQL locales dans un dossier situé sous src/graphql que vous pouvez utiliser pour interroger l'API

    Pour afficher l'API GraphQL dans votre compte à tout moment, exécutez la commande suivante :

    amplify console api
    
    > Choose GraphQL
    

    Pour afficher l'API Amplify dans votre compte à tout moment, exécutez la commande suivante :

    amplify console
  • Écrire du code front-end pour interagir avec l'API

    maintenant que le back-end est déployé, écrivons du code pour permettre aux utilisateurs de créer, répertorier et supprimer des notes.

    Mettez à jour src/App.js avec le code suivant :

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

    Notre application dispose de 3 fonctions principales :

    1. fetchNotes : cette fonction utilise la classe d'API pour envoyer une requête à l'API GraphQL et récupérer une liste de notes.
    2. createNote : cette fonction utilise aussi la classe d'API pour envoyer une mutation à l'API GraphQL, la différence principale étant que dans cette fonction, nous transférons les variables nécessaires pour une mutation GraphQL afin de pouvoir créer une nouvelle note avec les données du formulaire.
    3. deleteNote : à l'instar de createNote, cette fonction envoie une mutation GraphQL ainsi que des variables, mais au lieu de créer une note, nous en supprimons une.
  • Exécuter une application

    Pour tester l'application, exécutez la commande Start :

    npm start

Conclusion

Vous avez créé une application Notes ! En utilisant AWS Amplify, vous avez ajouté une API GraphQL et configuré des fonctionnalités de création, de lecture et de suppression dans votre application. Dans le module suivant, nous allons ajouter un service de stockage à votre application.

Ce module vous a-t-il été utile ?

Merci
Merci de nous indiquer ce que vous avez aimé.
Nous sommes désolés de vous décevoir.
Quelque chose est-il obsolète, déroutant ou inexact ? Aidez-nous à améliorer ce didacticiel en fournissant des commentaires.

Augmenter la capacité de stockage