Step 3: Add data with a GraphQL mutation

To add data to your data source

1. If you haven't already done so, sign in to the Amazon Web Services Management Console and open the AppSync console.

2. Choose your API from the table.

3. In the tab to the left, choose Queries.

4. In the Explorer tab to the left of the table, you might see several mutations and queries already defined in the query editor:

   

   Note

   This mutation is actually sitting in your schema as the Mutation type. It has the code:

   type Mutation {
   	createTodo(input: CreateTodoInput!): Todo
   	updateTodo(input: UpdateTodoInput!): Todo
   	deleteTodo(input: DeleteTodoInput!): Todo
   }

   As you can see, the operations here are similar to what's inside the query editor.

   Amazon AppSync automatically generated these from the model we defined earlier. This example will use the createTodo mutation to add entries to our TodoAPITable table.

5. Choose the createTodo operation by expanding it under the createTodo mutation:

   

   Enable the checkboxes for all of the fields like the picture above.

   Note

   The attributes you see here are the different modifiable elements of the mutation. Your input can be thought of as the parameter of createTodo. The various options with checkboxes are the fields that will be returned in the response once an operation is performed.

6. In the code editor in the center of the screen, you'll notice that the operation appears underneath the createTodo mutation:

   mutation createTodo($createtodoinput: CreateTodoInput!) {
     createTodo(input: $createtodoinput) {
       where
       when
       name
       id
       description
     }
   }

   Note

   To explain this snippet properly, we must also look at the schema code. The declaration mutation createTodo($createtodoinput: CreateTodoInput!){} is the mutation with one of its operations, createTodo. The full mutation is located in the schema:

   type Mutation {
   	createTodo(input: CreateTodoInput!): Todo
   	updateTodo(input: UpdateTodoInput!): Todo
   	deleteTodo(input: DeleteTodoInput!): Todo
   }

   Going back to the mutation declaration from the editor, the parameter is an object called $createtodoinput with a required input type of CreateTodoInput. Note that CreateTodoInput (and all inputs in the mutation) are also defined in the schema. For example, here's the boilerplate code for CreateTodoInput:

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

   It contains the fields we defined in our model, namely name, when, where, and description.

   Going back to the editor code, in createTodo(input: $createtodoinput) {}, we declare the input as $createtodoinput, which was also used in the mutation declaration. We do this because this allows GraphQL to validate our inputs against the provided types and ensure that they are being used with the correct inputs.

   The final part of the editor code shows the fields that will be returned in the response after an operation is performed:

   {
       where
       when
       name
       id
       description
     }

   In the Query variables tab below this editor, there will be a generic createtodoinput object that may have the following data:

   {
     "createtodoinput": {
       "name": "Hello, world!",
       "when": "Hello, world!",
       "where": "Hello, world!",
       "description": "Hello, world!"
     }
   }

   Note

   This is where we allocate the values for the input mentioned earlier:

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

   Change the createtodoinput by adding information we want to put in our DynamoDB table. In this case, we wanted to create some Todo items as reminders:

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

7. Choose Run at the top of the editor. Choose createTodo in the drop-down list. On the right-hand side of the editor, you should see the response. It may look something like this:

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

   If you navigate to the DynamoDB service, you'll now see an entry in your data source with this information: