

Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra.

# Utilisation de mutations GraphQL pour ajouter des données à une table DynamoDB dans la console AWS AppSync
<a name="add-data-with-graphql-mutation"></a>

L'étape suivante consiste à ajouter des données à votre table DynamoDB vide à l'aide d'une mutation GraphQL. Les mutations sont l'un des types d'opérations fondamentaux de GraphQL. Ils sont définis dans le schéma et vous permettent de manipuler les données de votre source de données. En termes de REST APIs, elles sont très similaires à des opérations telles que `PUT` ou`POST`.

**Pour ajouter des données à votre source de données**

1. Si ce n'est pas déjà fait, connectez-vous à la [AppSync console AWS Management Console et ouvrez-la](https://console.aws.amazon.com/appsync/). 

1. Choisissez votre API dans le tableau.

1. Dans l'onglet de gauche, sélectionnez **Requêtes**.

1. Dans l'onglet **Explorateur** situé à gauche du tableau, vous pouvez voir plusieurs mutations et requêtes déjà définies dans l'éditeur de requêtes :  
![\[Explorer tab showing a dropdown menu with mutation and query options like createTodo and deleteTodo.\]](http://docs.aws.amazon.com/fr_fr/appsync/latest/devguide/images/explorer-example-1.png)
**Note**  
Cette mutation est en fait inscrite dans votre schéma en tant que `Mutation` type. Il contient le code :  

   ```
   type Mutation {
   	createTodo(input: CreateTodoInput!): Todo
   	updateTodo(input: UpdateTodoInput!): Todo
   	deleteTodo(input: DeleteTodoInput!): Todo
   }
   ```
Comme vous pouvez le constater, les opérations ici sont similaires à celles de l'éditeur de requêtes.

   AWS AppSync les a automatiquement générés à partir du modèle que nous avons défini précédemment. Cet exemple utilisera la `createTodo` mutation pour ajouter des entrées à notre *TodoAPITable* table.

1. Choisissez l'`createTodo`opération en l'étendant sous la `createTodo` mutation :  
![\[Expanded createTodo mutation showing input fields like description, id, name, when, and where.\]](http://docs.aws.amazon.com/fr_fr/appsync/latest/devguide/images/explorer-example-2.png)

   Cochez les cases pour tous les champs, comme sur l'image ci-dessus.
**Note**  
Les attributs que vous voyez ici sont les différents éléments modifiables de la mutation. Vous `input` pouvez être considéré comme le paramètre de`createTodo`. Les différentes options avec des cases à cocher sont les champs qui seront renvoyés dans la réponse une fois l'opération effectuée.

1. Dans l'éditeur de code au centre de l'écran, vous remarquerez que l'opération apparaît sous la `createTodo` mutation :

   ```
   mutation createTodo($createtodoinput: CreateTodoInput!) {
     createTodo(input: $createtodoinput) {
       where
       when
       name
       id
       description
     }
   }
   ```
**Note**  
Pour expliquer correctement cet extrait, nous devons également examiner le code du schéma. La déclaration `mutation createTodo($createtodoinput: CreateTodoInput!){}` est la mutation avec l'une de ses opérations,`createTodo`. La mutation complète se trouve dans le schéma :  

   ```
   type Mutation {
   	createTodo(input: CreateTodoInput!): Todo
   	updateTodo(input: UpdateTodoInput!): Todo
   	deleteTodo(input: DeleteTodoInput!): Todo
   }
   ```
Pour en revenir à la déclaration de mutation de l'éditeur, le paramètre est un objet appelé `$createtodoinput` avec un type d'entrée obligatoire de`CreateTodoInput`. Notez que `CreateTodoInput` (et toutes les entrées de la mutation) sont également définies dans le schéma. Par exemple, voici le code standard pour : `CreateTodoInput`  

   ```
   input CreateTodoInput {
   	name: String
   	when: String
   	where: String
   	description: String
   }
   ```
Il contient les champs que nous avons définis dans notre modèle`name`, à savoir`when`,`where`, et`description`.  
Pour en revenir au code de l'éditeur, dans`createTodo(input: $createtodoinput) {}`, nous déclarons l'entrée comme`$createtodoinput`, qui a également été utilisée dans la déclaration de mutation. Nous procédons ainsi car cela permet à GraphQL de valider nos entrées par rapport aux types fournis et de s'assurer qu'elles sont utilisées avec les bonnes entrées.  
La dernière partie du code de l'éditeur indique les champs qui seront renvoyés dans la réponse après l'exécution d'une opération :  

   ```
   {
       where
       when
       name
       id
       description
     }
   ```

   Dans l'onglet **Variables de requête** situé sous cet éditeur, vous trouverez un `createtodoinput` objet générique susceptible de contenir les données suivantes :

   ```
   {
     "createtodoinput": {
       "name": "Hello, world!",
       "when": "Hello, world!",
       "where": "Hello, world!",
       "description": "Hello, world!"
     }
   }
   ```
**Note**  
C'est ici que nous allouons les valeurs pour l'entrée mentionnée précédemment :  

   ```
   input CreateTodoInput {
   	name: String
   	when: String
   	where: String
   	description: String
   }
   ```

   Modifiez le `createtodoinput` en ajoutant les informations que vous souhaitez mettre dans notre table DynamoDB. Dans ce cas, nous voulions créer certains `Todo` éléments comme rappels :

   ```
   {
     "createtodoinput": {
       "name": "Shopping List",
       "when": "Friday",
       "where": "Home",
       "description": "I need to buy eggs"
     }
   }
   ```

1. Choisissez **Exécuter** en haut de l'éditeur. Choisissez **CreateTodo** dans la liste déroulante. Sur le côté droit de l'éditeur, vous devriez voir la réponse. Cela peut ressembler à ce qui suit :

   ```
   {
     "data": {
       "createTodo": {
         "where": "Home",
         "when": "Friday",
         "name": "Shopping List",
         "id": "abcdefgh-1234-1234-1234-abcdefghijkl",
         "description": "I need to buy eggs"
       }
     }
   }
   ```

   Si vous accédez au service DynamoDB, vous verrez désormais une entrée dans votre source de données contenant les informations suivantes :  
![\[TodoAPITable interface showing a completed scan with 1 item returned in a table format.\]](http://docs.aws.amazon.com/fr_fr/appsync/latest/devguide/images/explorer-example-3.png)

Pour résumer l'opération, le moteur GraphQL a analysé l'enregistrement et un résolveur l'a inséré dans votre table Amazon DynamoDB. Encore une fois, vous pouvez le vérifier dans la console DynamoDB. Notez que vous n'avez pas besoin de transmettre de `id` valeur. Un `id` est généré et renvoyé dans les résultats. Cela est dû au fait que l'exemple utilisait une `autoId()` fonction dans un résolveur GraphQL pour la clé de partition définie sur vos ressources DynamoDB. Nous verrons comment créer des résolveurs dans une autre section. Prenez note de la `id` valeur renvoyée ; vous l'utiliserez dans la section suivante pour récupérer des données à l'aide d'une requête GraphQL.