步骤 3：使用 GraphQL 变更添加数据

将数据添加到您的数据源

1. 如果您尚未登录到 Amazon Web Services Management Console 并打开 AppSync 控制台，请执行以下操作。

2. 从表中选择您的 API。

3. 在左侧的选项卡中，选择查询。

4. 在表左侧的资源管理器选项卡中，您可能会看到在查询编辑器中已定义的多个变更和查询：

   

   注意

   该变更实际作为 Mutation 类型包含在您的架构中。它具有以下代码：

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

   正如您看到的一样，此处的操作与查询编辑器中的操作类似。

   Amazon AppSync 根据我们以前定义的模型自动生成这些内容。该示例使用 createTodo 变更将条目添加到我们的 TodoAPITable 表中。

5. 在 createTodo 变更下面展开以选择 createTodo 操作：

   

   启用所有字段的复选框，如上图所示。

   注意

   您在此处看到的属性是变更的各种可修改元素。您的 input 可以被视为 createTodo 的参数。具有复选框的各种选项是一些字段，它们是在执行操作后在响应中返回的。

6. 在屏幕中央的代码编辑器中，您会注意到该操作显示在 createTodo 变更下面：

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

   注意

   为了正确解释该代码片段，我们还必须查看架构代码。声明 mutation createTodo($createtodoinput: CreateTodoInput!){} 是具有操作之一 (createTodo) 的变更。完整的变更位于架构中：

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

   返回到编辑器中的变更声明，参数是一个名为 $createtodoinput 的对象，所需的输入类型为 CreateTodoInput。请注意，CreateTodoInput（以及变更中的所有输入）也是在架构中定义的。例如，以下是 CreateTodoInput 的样板代码：

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

   它包含我们在模型中定义的字段，即 name、when、where 和 description。

   返回到编辑器代码，在 createTodo(input: $createtodoinput) {} 中，我们将输入声明为 $createtodoinput，还会在变更声明中使用它。我们这样做是因为，这允许 GraphQL 根据提供的类型验证我们的输入，并确保它们与正确的输入一起使用。

   编辑器代码的最后一部分显示执行操作后在响应中返回的字段：

   {
       where
       when
       name
       id
       description
     }

   在该编辑器下面的查询变量选项卡中，具有一个通用 createtodoinput 对象，它可能包含以下数据：

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

   注意

   这是我们为前面提到的输入分配值的位置：

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

   添加我们希望放入 DynamoDB 表中的信息以更改 createtodoinput。在该示例中，我们希望创建一些 Todo 项目以作为提醒：

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

7. 选择编辑器顶部的运行。在下拉列表中选择 createTodo。在编辑器右侧，您应该会看到响应。它可能如下所示：

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

   如果您导航到 DynamoDB 服务，您现在会在数据源中看到一个包含以下信息的条目：