Create Complex Objects

In the previous sections, we created objects based on a key-value model. In this step, we will create more complex objects with AWS AppSync DynamoDB such as sets, lists, and maps.

1. Select the Schema tab

• Add the tags attribute for the post

  type Post {
  id: ID!
  author: String
  title: String
  content: String
  url: String
  ups: Int!
  downs: Int!
  version: Int!
  tags: [String!]
}

• Add the line below to the Query type to add a new query called allPostsByTag

  allPostsByTag(tag: String!, count: Int, nextToken: String): PaginatedPosts!

• Add two new mutations - addTag and removeTag - into the Mutation type

type Mutation {
  addTag(id: ID!, tag: String!): Post
  removeTag(id: ID!, tag: String!): Post
  .....
}

• Click Save Schema

2. Next, in the Resolvers pane on the right, find the allPostsByTag field of type Query, then select Attach

3. On the Attach resolver configuration page:

• Resolver type: Select Unit resolver
• Resolver runtime: Select Velocity Template Language (VTL)
• Data source name: Select PostDynamoDBTable
• Click the orange Create button.

4. On the code editor page of the newly created Resolver:

• Delete the default code and paste the content below into the Configure the request mapping template section:

{
    "version" : "2017-02-28",
    "operation" : "Scan",
    "filter": {
      "expression": "contains (tags, :tag)",
        "expressionValues": {
          ":tag": $util.dynamodb.toDynamoDBJson($context.arguments.tag)
        }
    }
    #if( ${context.arguments.count} )
        ,"limit": $util.toJson($context.arguments.count)
    #end
    #if( ${context.arguments.nextToken} )
        ,"nextToken": $util.toJson($context.arguments.nextToken)
    #end
}

• Scroll down, delete the default code, and paste the content below into the Configure the response mapping template section:

#if($context.error)
  $util.error($context.error.message, $context.error.type)
#end
{
    "posts": $utils.toJson($context.result.items)
    #if( ${context.result.nextToken} )
        ,"nextToken": $util.toJson($context.result.nextToken)
    #end
}

• Click Save in the corner of the page to save

5. Select the Schema tab on the left menu

• In the Resolvers pane on the right, find the addTag field of type Mutation, then select Attach

6. On the Attach resolver configuration page:

• Resolver type: Select Unit resolver
• Resolver runtime: Select Velocity Template Language (VTL)
• Data source name: Select PostDynamoDBTable
• Click the orange Create button.

7. On the code editor page of the newly created Resolver:

• Delete the default code and paste the content below into the Configure the request mapping template section:

{
    "version" : "2017-02-28",
    "operation" : "UpdateItem",
    "key" : {
        "id" : $util.dynamodb.toDynamoDBJson($context.arguments.id)
    },
    "update" : {
        "expression" : "ADD tags :tags, version :plusOne",
        "expressionValues" : {
            ":tags" : { "SS": [ $util.toJson($context.arguments.tag) ] },
            ":plusOne" : { "N" : 1 }
        }
    }
}

• Scroll down, delete the default code, and paste the content below into the Configure the response mapping template section:

#if($context.error)
  $util.error($context.error.message, $context.error.type)
#end
$util.toJson($context.result)

• Click Save in the corner of the page to save

8. Select the Schema tab on the left menu

• In the Resolvers pane on the right, find the removeTag field of type Mutation, then select Attach

9. On the Attach resolver configuration page:

• Resolver type: Select Unit resolver
• Resolver runtime: Select Velocity Template Language (VTL)
• Data source name: Select PostDynamoDBTable
• Click the orange Create button.

10. On the code editor page of the newly created Resolver:

• Delete the default code and paste the content below into the Configure the request mapping template section:

{
    "version" : "2017-02-28",
    "operation" : "UpdateItem",
    "key" : {
        "id" : $util.dynamodb.toDynamoDBJson($context.arguments.id)
    },
    "update" : {
        "expression" : "DELETE tags :tags ADD version :plusOne",
        "expressionValues" : {
            ":tags" : { "SS": [ $util.toJson($context.arguments.tag) ] },
            ":plusOne" : { "N" : 1 }
        }
    }
}

• Scroll down, delete the default code, and paste the content below into the Configure the response mapping template section:

#if($context.error)
  $util.error($context.error.message, $context.error.type)
#end
$util.toJson($context.result)

• Click Save in the corner of the page to save

11. Select the Queries tab on the left menu

• Delete the default code, paste the script below into the Queries section

query allPostsByAuthor {
  allPostsByAuthor(
    author: "Nadia"
  ) {
    posts {
      id
      title
    }
    nextToken
  }
}

• Then click the Run button (the orange Play button)

12. Delete the old code, paste the script below to add a tag for the post we just fetched, then click the Run button (the orange Play button)

mutation addTag {
  addTag(id:"10" tag: "dog") {
    id
    title
    tags
  }
}

The returned result is an object that has the tags list appended with the value “dog”.

13. Change the value of the tag parameter to puppy then click the Run button (the orange Play button)

The returned result is an object that has “puppy” appended to the tags list.

14. Delete the old code, paste the script below to remove a tag, then click the Run button (the orange Play button)

mutation removeTag {
  removeTag(id:"10" tag: "puppy") {
    id
    title
    tags
  }
}

15. Delete the old code, paste the command below to retrieve all posts with the tag dog, then click the Run button (the orange Play button)

query allPostsByTag {
  allPostsByTag(tag: "dog") {
    posts {
      id
      title
      tags
    }
    nextToken
  }
}

16. Next, we will add Comments to the post. This will be modeled as a list of map objects on the Post in DynamoDB.
17. Select the Schema tab on the left menu

• Add a new Comment type

type Comment {
    author: String!
    comment: String!
}

• Add the comments attribute to the Post type

type Post {
  id: ID!
  author: String
  title: String
  content: String
  url: String
  ups: Int!
  downs: Int!
  version: Int!
  tags: [String!]
  comments: [Comment!]
}

• Add the following line to the Mutation type to add a new mutation addComment

  addComment(id: ID!, author: String!, comment: String!): Post

• Click Save Schema, then click Attach in the Resolvers section of the addComment mutation

18. On the Attach resolver configuration page:

• Resolver type: Select Unit resolver
• Resolver runtime: Select Velocity Template Language (VTL)
• Data source name: Select PostDynamoDBTable
• Click the orange Create button.

19. On the code editor page of the newly created Resolver:

• Delete the default code and paste the content below into the Configure the request mapping template section:

{
  "version" : "2017-02-28",
  "operation" : "UpdateItem",
  "key" : {
    "id" : $util.dynamodb.toDynamoDBJson($context.arguments.id)
  },
  "update" : {
    "expression" : "SET comments = list_append(if_not_exists(comments, :emptyList), :newComment) ADD version :plusOne",
    "expressionValues" : {
      ":emptyList": { "L" : [] },
      ":newComment" : { "L" : [
        { "M": {
          "author": $util.dynamodb.toDynamoDBJson($context.arguments.author),
          "comment": $util.dynamodb.toDynamoDBJson($context.arguments.comment)
          }
        }
      ] },
      ":plusOne" : $util.dynamodb.toDynamoDBJson(1)
    }
  }
}

• Scroll down, delete the default code, and paste the content below into the Configure the response mapping template section:

#if($context.error)
  $util.error($context.error.message, $context.error.type)
#end
$util.toJson($context.result)

• Then click Save in the corner of the page to save

20. Select the Queries tab on the left menu

• Delete the default code, paste the script below into the Queries section to try creating a comment:

mutation testAddComment {
  addComment(id: "10", author: "New User", comment: "Very useful article!") {
    id
    title
    comments {
      author
      comment
    }
  }
}

• Then click the Run button (the orange Play button)