DynamoDB JavaScript リゾルバーを使用したシンプルなポストアプリケーションの作成

AppSync コンソールを開き、 の作成 APIを選択します。

[最初から設計] を選択し、[次へ] を選択します。

に名前を付けAPIPostTutorialAPI、次へ を選択します。残りのオプションはデフォルト設定値のまま、レビューページに移動し、Create を選択します。

でAPI、スキーマタブを選択します。

Post オブジェクトを追加および取得するための Post タイプと操作 addPost を定義するスキーマを作成します。[スキーマ] ペインで、内容を次のコードに置き換えます。

schema {
    query: Query
    mutation: Mutation
}

type Query {
    getPost(id: ID): Post
}

type Mutation {
    addPost(
        id: ID!
        author: String!
        title: String!
        content: String!
        url: String!
    ): Post!
}

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

[Save Schema] を選択します。

[スキーマ] ページで、[リソースを作成] を選択します。

[既存のタイプを使用] を選択し、Post タイプを選択します。

[セカンダリインデックス] セクションで、[インデックスを追加] を選択します。

インデックス author-index の名前

Primary key を author に、Sort キーを None に設定します。

GraphQL の自動生成を無効にします。この例では、リゾルバーを自分で作成します。

[Create] (作成) を選択します。

でAPI、スキーマタブを選択します。

リゾルバー ペインで、Mutation 型の下にある addPost フィールドを探し、「アタッチ」を選択します。

データソースを選択し、[作成] を選択します。

コードエディターで、コードを次のスニペットに置き換えます。

import { util } from '@aws-appsync/utils'
import * as ddb from '@aws-appsync/utils/dynamodb'

export function request(ctx) {
	const item = { ...ctx.arguments, ups: 1, downs: 0, version: 1 }
	const key = { id: ctx.args.id ?? util.autoId() }
	return ddb.put({ key, item })
}

export function response(ctx) {
	return ctx.result
}

[Save] を選択します。

でAPI、クエリタブを選択します。

以下のミューテーションを [クエリ] ペインに追加します。

mutation addPost {
  addPost(
    id: 123,
    author: "AUTHORNAME"
    title: "Our first post!"
    content: "This is our first post."
    url: "https://aws.amazon.com/appsync/"
  ) {
    id
    author
    title
    content
    url
    ups
    downs
    version
  }
}

[実行] (オレンジ色の再生ボタン) を選択し、[addPost] を選択します。新しく作成されたポストの結果が、クエリペインの右側にある結果ペインに表示されます。これは次のように表示されます。

{
  "data": {
    "addPost": {
      "id": "123",
      "author": "AUTHORNAME",
      "title": "Our first post!",
      "content": "This is our first post.",
      "url": "https://aws.amazon.com/appsync/",
      "ups": 1,
      "downs": 0,
      "version": 1
    }
  }
}

AWS AppSync はaddPostミューテーションリクエストを受信しました。

AWS AppSync はリゾルバーのリクエストハンドラーを実行します。ddb.put 関数は以下のような PutItem リクエストを作成します。

{
  operation: 'PutItem',
  key: { id: { S: '123' } },
  attributeValues: {
    downs: { N: 0 },
    author: { S: 'AUTHORNAME' },
    ups: { N: 1 },
    title: { S: 'Our first post!' },
    version: { N: 1 },
    content: { S: 'This is our first post.' },
    url: { S: 'https://aws.amazon.com/appsync/' }
  }
}

AWS AppSync はこの値を使用して Amazon DynamoDB PutItemリクエストを生成および実行します。

AWS AppSync はPutItemリクエストの結果を受け取り、GraphQL タイプに変換しました。

{
    "id" : "123",
    "author": "AUTHORNAME",
    "title": "Our first post!",
    "content": "This is our first post.",
    "url": "https://aws.amazon.com/appsync/",
    "ups" : 1,
    "downs" : 0,
    "version" : 1
}

レスポンスハンドラーは結果をすぐに返します (return ctx.result)。

最終結果は GraphQL のレスポンスに表示されます。

でAPI、スキーマタブを選択します。

右側の [リゾルバー] ペインで、Query タイプの getPost フィールドを見つけて [アタッチ] を選択します。

データソースを選択し、[作成] を選択します。

コードエディタで、コードを次のスニペットに置き換えます。

import * as ddb from '@aws-appsync/utils/dynamodb'
	
export function request(ctx) {
	return ddb.get({ key: { id: ctx.args.id } })
}

export const response = (ctx) => ctx.result

リゾルバーを保存します。

でAPI、クエリタブを選択します。

クエリ ペインで次のコードを追加し、投稿を作成した後にコピーした ID を使用します。

query getPost {
  getPost(id: "123") {
    id
    author
    title
    content
    url
    ups
    downs
    version
  }
}

[実行] (オレンジ色の再生ボタン) を選択し、[getPost] を選択します。新しく作成されたポストの結果が、クエリペインの右側にある結果ペインに表示されます。

Amazon DynamoDB から取得された投稿が、クエリペインの右側にある結果ペインに表示されます。これは次のように表示されます。

{
  "data": {
    "getPost": {
      "id": "123",
      "author": "AUTHORNAME",
      "title": "Our first post!",
      "content": "This is our first post.",
      "url": "https://aws.amazon.com/appsync/",
      "ups": 1,
      "downs": 0,
      "version": 1
    }
  }
}

でAPI、スキーマタブを選択します。

[スキーマ] ペインの Mutation タイプを次のように変更して、新しい updatePost ミューテーションを追加します。

type Mutation {
    updatePost(
        id: ID!,
        author: String,
        title: String,
        content: String,
        url: String,
        expectedVersion: Int!
    ): Post
    
    addPost(
        id: ID
        author: String!
        title: String!
        content: String!
        url: String!
    ): Post!
}

[Save Schema] を選択します。

右側の [リゾルバー] ペインで、Mutation 型の新しく作成された updatePost フィールドを見つけて、[アタッチ] を選択します。以下のスニペットを使用して新しいリゾルバーを作成します。

import { util } from '@aws-appsync/utils';
import * as ddb from '@aws-appsync/utils/dynamodb';

export function request(ctx) {
  const { id, expectedVersion, ...rest } = ctx.args;
  const values = Object.entries(rest).reduce((obj, [key, value]) => {
    obj[key] = value ?? ddb.operations.remove();
    return obj;
  }, {});

  return ddb.update({
    key: { id },
    condition: { version: { eq: expectedVersion } },
    update: { ...values, version: ddb.operations.increment(1) },
  });
}

export function response(ctx) {
  const { error, result } = ctx;
  if (error) {
    util.appendError(error.message, error.type);
  }
  return result;

加えた変更を保存します。

でAPI、クエリタブを選択します。

以下のミューテーションを [クエリ] ペインに貼り付けます。また、id 引数を、前にメモしておいた値に更新する必要があります。

mutation updatePost {
  updatePost(
    id:123
    title: "An empty story"
    content: null
    expectedVersion: 1
  ) {
    id
    author
    title
    content
    url
    ups
    downs
    version
  }
}

[実行] (オレンジ色の再生ボタン) を選択し、[updatePost] を選択します。

Amazon DynamoDB で更新された投稿が、クエリペインの右側にある結果ペインに表示されます。これは次のように表示されます。

{
  "data": {
    "updatePost": {
      "id": "123",
      "author": "A new author",
      "title": "An empty story",
      "content": null,
      "url": "https://aws.amazon.com/appsync/",
      "ups": 1,
      "downs": 0,
      "version": 2
    }
  }
}

このリクエストを最初に実行したときに、Amazon DynamoDB 内のこの投稿の version フィールドの値は 1 であり、expectedVersion 引数と一致していました。このリクエストは成功し、Amazon DynamoDB で version フィールドが 2 に増分されました。

このリクエストを 2 回目に実行したときに、Amazon DynamoDB 内のこのポストの version フィールドの値は 2 であり、expectedVersion 引数と一致していませんでした。

でAPI、スキーマタブを選択します。

[スキーマ] ペインの Mutation 型を変更して DIRECTION 列挙型を追加し、新しい投票ミューテーションを追加します。

type Mutation {
    vote(id: ID!, direction: DIRECTION!): Post
    updatePost(
        id: ID!,
        author: String,
        title: String,
        content: String,
        url: String,
        expectedVersion: Int!
    ): Post
    addPost(
        id: ID,
        author: String!,
        title: String!,
        content: String!,
        url: String!
    ): Post!
}

enum DIRECTION {
  UP
  DOWN
}

[Save Schema] を選択します。

右側の [リゾルバー] ペインで、Mutation 型の新しく作成された vote フィールドを見つけて、[アタッチ] を選択します。コードを作成して次のスニペットに置き換えることで、新しいリゾルバーを作成します。

import * as ddb from '@aws-appsync/utils/dynamodb';

export function request(ctx) {
  const field = ctx.args.direction === 'UP' ? 'ups' : 'downs';
  return ddb.update({
    key: { id: ctx.args.id },
    update: {
      [field]: ddb.operations.increment(1),
      version: ddb.operations.increment(1),
    },
  });
}

export const response = (ctx) => ctx.result;

加えた変更を保存します。

でAPI、クエリタブを選択します。

以下のミューテーションを [クエリ] ペインに貼り付けます。また、id 引数を、前にメモしておいた値に更新する必要があります。

mutation votePost {
  vote(id:123, direction: UP) {
    id
    author
    title
    content
    url
    ups
    downs
    version
  }
}

[実行] (オレンジ色の再生ボタン) を選択し、[votePost] を選択します。

Amazon DynamoDB で更新された投稿が、クエリペインの右側にある結果ペインに表示されます。これは次のように表示されます。

{
  "data": {
    "vote": {
      "id": "123",
      "author": "A new author",
      "title": "An empty story",
      "content": null,
      "url": "https://aws.amazon.com/appsync/",
      "ups": 6,
      "downs": 0,
      "version": 4
    }
  }
}

もう何回か [実行] を選択します。このクエリを実行するたびに、ups フィールドと version フィールドが 1 つずつ増加することを確認できます。

クエリを変更して、別の DIRECTION を呼び出してください。

mutation votePost {
  vote(id:123, direction: DOWN) {
    id
    author
    title
    content
    url
    ups
    downs
    version
  }
}

[実行] (オレンジ色の再生ボタン) を選択し、[votePost] を選択します。

今度は、このクエリを実行するたびに、downs フィールドと version フィールドが 1 つずつ増加することを確認できます。

スキーマで、「スキーマ」タブを選択します。

[スキーマ] ペインの Mutation 型を変更して、新しい deletePost ミューテーションを追加します。

type Mutation {
    deletePost(id: ID!, expectedVersion: Int): Post
    vote(id: ID!, direction: DIRECTION!): Post
    updatePost(
        id: ID!,
        author: String,
        title: String,
        content: String,
        url: String,
        expectedVersion: Int!
    ): Post
    addPost(
        id: ID
        author: String!,
        title: String!,
        content: String!,
        url: String!
    ): Post!
}

今回は、expectedVersion フィールドをオプションにしました。[スキーマを保存] を選択します。

右側の [リゾルバー] ペインで、delete タイプから新しく作成された Mutation フィールドを探し、[アタッチ] を選択します。次のコードを使用して新しいリゾルバーを作成します。

import { util } from '@aws-appsync/utils'

import { util } from '@aws-appsync/utils';
import * as ddb from '@aws-appsync/utils/dynamodb';

export function request(ctx) {
  let condition = null;
  if (ctx.args.expectedVersion) {
    condition = {
      or: [
        { id: { attributeExists: false } },
        { version: { eq: ctx.args.expectedVersion } },
      ],
    };
  }
  return ddb.remove({ key: { id: ctx.args.id }, condition });
}

export function response(ctx) {
  const { error, result } = ctx;
  if (error) {
    util.appendError(error.message, error.type);
  }
  return result;
}

でAPI、クエリタブを選択します。

以下のミューテーションを [クエリ] ペインに貼り付けます。また、id 引数を、前にメモしておいた値に更新する必要があります。

mutation deletePost {
  deletePost(id:123) {
    id
    author
    title
    content
    url
    ups
    downs
    version
  }
}

[実行] (オレンジ色の再生ボタン) を選択し、[deletePost] を選択します。

この投稿が Amazon DynamoDB から削除されます。は、Amazon DynamoDB から削除されたアイテムの値 AWS AppSync を返します。この値は、クエリペインの右側にある結果ペインに表示されます。これは次のように表示されます。

{
  "data": {
    "deletePost": {
      "id": "123",
      "author": "A new author",
      "title": "An empty story",
      "content": null,
      "url": "https://aws.amazon.com/appsync/",
      "ups": 6,
      "downs": 4,
      "version": 12
    }
  }
}

この値は、この deletePost 呼び出しによって実際に Amazon DynamoDB から項目が削除された場合にのみ返されます。再度 [実行] を選択します。

この呼び出しは成功しますが、値は返されません。

{
  "data": {
    "deletePost": null
  }
}

次は、expectedValue を指定して、ポストを削除してみましょう。まず、これまで使用してきたポストは削除したため、まず新しいポストを作成する必要があります。

以下のミューテーションを [クエリ] ペインに追加します。

mutation addPost {
  addPost(
    id:123
    author: "AUTHORNAME"
    title: "Our second post!"
    content: "A new post."
    url: "https://aws.amazon.com/appsync/"
  ) {
    id
    author
    title
    content
    url
    ups
    downs
    version
  }
}

[実行] (オレンジ色の再生ボタン) を選択し、[addPost] を選択します。

新しく作成されたポストの結果が、クエリペインの右側にある結果ペインに表示されます。新しく作成されたオブジェクトの id を書き留めておきます。その値はすぐに必要になります。これは次のように表示されます。

{
  "data": {
    "addPost": {
      "id": "123",
      "author": "AUTHORNAME",
      "title": "Our second post!",
      "content": "A new post.",
      "url": "https://aws.amazon.com/appsync/",
      "ups": 1,
      "downs": 0,
      "version": 1
    }
  }
}

次に、 の無効な値でその投稿を削除してみましょうexpectedVersion。以下のミューテーションを [クエリ] ペインに貼り付けます。また、id 引数を、前にメモしておいた値に更新する必要があります。

mutation deletePost {
  deletePost(
    id:123
    expectedVersion: 9999
  ) {
    id
    author
    title
    content
    url
    ups
    downs
    version
  }
}

[実行] (オレンジ色の再生ボタン) を選択し、[deletePost] を選択します。以下のレスポンスが返されます。

{
  "data": {
    "deletePost": null
  },
  "errors": [
    {
      "path": [
        "deletePost"
      ],
      "data": null,
      "errorType": "DynamoDB:ConditionalCheckFailedException",
      "errorInfo": null,
      "locations": [
        {
          "line": 2,
          "column": 3,
          "sourceName": null
        }
      ],
      "message": "The conditional request failed (Service: DynamoDb, Status Code: 400, Request ID: 7083O037M1FTFRK038A4CI9H43VV4KQNSO5AEMVJF66Q9ASUAAJG)"
    }
  ]
}

このリクエストは、条件式が false と評価されるため失敗します。Amazon DynamoDB version の投稿の値が、expectedValue引数で指定された値と一致しません。そのオブジェクトの現在の値が、GraphQL レスポンスの data セクションの errors フィールドで返されます。expectedVersion を訂正して、このリクエストをもう一度試してみます。

mutation deletePost {
  deletePost(
    id:123
    expectedVersion: 1
  ) {
    id
    author
    title
    content
    url
    ups
    downs
    version
  }
}

[実行] (オレンジ色の再生ボタン) を選択し、[deletePost] を選択します。

今回は、リクエストが成功し、Amazon DynamoDB から削除された値が返されています。

{
  "data": {
    "deletePost": {
      "id": "123",
      "author": "AUTHORNAME",
      "title": "Our second post!",
      "content": "A new post.",
      "url": "https://aws.amazon.com/appsync/",
      "ups": 1,
      "downs": 0,
      "version": 1
    }
  }
}

再度 [実行] を選択します。この呼び出しは成功しますが、そのポストが Amazon DynamoDB で既に削除されているため、今回は値が返されません。

{ "data": { "deletePost": null } }

でAPI、スキーマタブを選択します。

[スキーマ] ペインの Query タイプを次のように変更して、新しい allPost クエリを追加します。

type Query {
    allPost(limit: Int, nextToken: String): PaginatedPosts!
    getPost(id: ID): Post
}

新しい PaginationPosts 型を追加します。

type PaginatedPosts {
    posts: [Post!]!
    nextToken: String
}

[Save Schema] を選択します。

右側の [リゾルバー] ペインで、allPost タイプから新しく作成された Query フィールドを探し、[アタッチ] を選択します。次のコードを使用して新しいリゾルバーを作成します。

import * as ddb from '@aws-appsync/utils/dynamodb';

export function request(ctx) {
  const { limit = 20, nextToken } = ctx.arguments;
  return ddb.scan({ limit, nextToken });
}

export function response(ctx) {
  const { items: posts = [], nextToken } = ctx.result;
  return { posts, nextToken };
}

このリゾルバーのリクエストハンドラーには 2 つのオプション引数が必要です。

リゾルバーに加えた変更を保存します。

でAPI、クエリタブを選択します。

以下のミューテーションを [クエリ] ペインに追加します。

mutation addPost {
  post1: addPost(id:1 author: "AUTHORNAME" title: "A series of posts, Volume 1" content: "Some content" url: "https://aws.amazon.com/appsync/" ) { title }
  post2: addPost(id:2 author: "AUTHORNAME" title: "A series of posts, Volume 2" content: "Some content" url: "https://aws.amazon.com/appsync/" ) { title }
  post3: addPost(id:3 author: "AUTHORNAME" title: "A series of posts, Volume 3" content: "Some content" url: "https://aws.amazon.com/appsync/" ) { title }
  post4: addPost(id:4 author: "AUTHORNAME" title: "A series of posts, Volume 4" content: "Some content" url: "https://aws.amazon.com/appsync/" ) { title }
  post5: addPost(id:5 author: "AUTHORNAME" title: "A series of posts, Volume 5" content: "Some content" url: "https://aws.amazon.com/appsync/" ) { title }
  post6: addPost(id:6 author: "AUTHORNAME" title: "A series of posts, Volume 6" content: "Some content" url: "https://aws.amazon.com/appsync/" ) { title }
  post7: addPost(id:7 author: "AUTHORNAME" title: "A series of posts, Volume 7" content: "Some content" url: "https://aws.amazon.com/appsync/" ) { title }
  post8: addPost(id:8 author: "AUTHORNAME" title: "A series of posts, Volume 8" content: "Some content" url: "https://aws.amazon.com/appsync/" ) { title }
  post9: addPost(id:9 author: "AUTHORNAME" title: "A series of posts, Volume 9" content: "Some content" url: "https://aws.amazon.com/appsync/" ) { title }
}

[実行] (オレンジ色の再生ボタン) を選択します。

では、テーブルをスキャンして、一度に 5 個の結果を返しましょう。以下のクエリをクエリペインに貼り付けます。

query allPost {
  allPost(limit: 5) {
    posts {
      id
      title
    }
    nextToken
  }
}

[実行] (オレンジ色の再生ボタン) を選択し、[allPost] を選択します。

最初の 5 個のポストが、クエリペインの右側にある結果ペインに表示されます。これは次のように表示されます。

{
  "data": {
    "allPost": {
      "posts": [
        {
          "id": "5",
          "title": "A series of posts, Volume 5"
        },
        {
          "id": "1",
          "title": "A series of posts, Volume 1"
        },
        {
          "id": "6",
          "title": "A series of posts, Volume 6"
        },
        {
          "id": "9",
          "title": "A series of posts, Volume 9"
        },
        {
          "id": "7",
          "title": "A series of posts, Volume 7"
        }
      ],
      "nextToken": "<token>"
    }
  }
}

5 つの結果と nextToken を取得しました。このトークンを使用して、次の結果セットを取得できます。前回の結果セットからの allPost を含めるように、nextToken クエリを更新します。

query allPost {
  allPost(
    limit: 5
    nextToken: "<token>"
  ) {
    posts {
      id
      author
    }
    nextToken
  }
}

[実行] (オレンジ色の再生ボタン) を選択し、[allPost] を選択します。

残りの 4 個のポストが、クエリペインの右側にある結果ペインに表示されます。9 個のポストのすべてをページ分割して、ポストは残っていないため、この結果セットに nextToken はありません。これは次のように表示されます。

{
  "data": {
    "allPost": {
      "posts": [
        {
          "id": "2",
          "title": "A series of posts, Volume 2"
        },
        {
          "id": "3",
          "title": "A series of posts, Volume 3"
        },
        {
          "id": "4",
          "title": "A series of posts, Volume 4"
        },
        {
          "id": "8",
          "title": "A series of posts, Volume 8"
        }
      ],
      "nextToken": null
    }
  }
}

でAPI、スキーマタブを選択します。

[スキーマ] ペインの Query タイプを次のように変更して、新しい allPostsByAuthor クエリを追加します。

type Query {
    allPostsByAuthor(author: String!, limit: Int, nextToken: String): PaginatedPosts!
    allPost(limit: Int, nextToken: String): PaginatedPosts!
    getPost(id: ID): Post
}

このクエリでは、allPost クエリで使用したのと同じ PaginatedPosts 型を使用していることに注意してください。

[Save Schema] を選択します。

右側のリゾルバーペインで、allPostsByAuthor 型の新しく作成された Query フィールドを見つけて、[アタッチ] を選択します。以下のスニペットを使用してリゾルバーを作成します。

import * as ddb from '@aws-appsync/utils/dynamodb';

export function request(ctx) {
  const { limit = 20, nextToken, author } = ctx.arguments;
  return ddb.query({
    index: 'author-index',
    query: { author: { eq: author } },
    limit,
    nextToken,
  });
}

export function response(ctx) {
  const { items: posts = [], nextToken } = ctx.result;
  return { posts, nextToken };
}

allPost リゾルバーと同様に、このリゾルバーには 2 つのオプション引数があります。

リゾルバーに加えた変更を保存します。

でAPI、クエリタブを選択します。

以下のミューテーションを [クエリ] ペインに追加します。

mutation addPost {
  post1: addPost(id:10 author: "Nadia" title: "The cutest dog in the world" content: "So cute. So very, very cute." url: "https://aws.amazon.com/appsync/" ) { author, title }
  post2: addPost(id:11 author: "Nadia" title: "Did you know...?" content: "AppSync works offline?" url: "https://aws.amazon.com/appsync/" ) { author, title }
  post3: addPost(id:12 author: "Steve" title: "I like GraphQL" content: "It's great" url: "https://aws.amazon.com/appsync/" ) { author, title }
}

[実行] (オレンジ色の再生ボタン) を選択し、[addPost] を選択します。

では、Nadia が作成したすべてのポストを返すクエリを実行しましょう。以下のクエリをクエリペインに貼り付けます。

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

[実行] (オレンジ色の再生ボタン) を選択し、[allPostsByAuthor] を選択します。Nadia が作成したすべてのポストが、クエリペインの右側にある結果ペインに表示されます。これは次のように表示されます。

{
  "data": {
    "allPostsByAuthor": {
      "posts": [
        {
          "id": "10",
          "title": "The cutest dog in the world"
        },
        {
          "id": "11",
          "title": "Did you know...?"
        }
      ],
      "nextToken": null
    }
  }
}

Query でのページ分割は Scan とまったく同じように動作します。例えば、AUTHORNAME によるすべてのポストを検索して、一度に 5 個ずつ取得します。

以下のクエリをクエリペインに貼り付けます。

query allPostsByAuthor {
  allPostsByAuthor(
    author: "AUTHORNAME"
    limit: 5
  ) {
    posts {
      id
      title
    }
    nextToken
  }
}

[実行] (オレンジ色の再生ボタン) を選択し、[allPostsByAuthor] を選択します。AUTHORNAME が作成したすべてのポストが、クエリペインの右側にある結果ペインに表示されます。これは次のように表示されます。

{
  "data": {
    "allPostsByAuthor": {
      "posts": [
        {
          "id": "6",
          "title": "A series of posts, Volume 6"
        },
        {
          "id": "4",
          "title": "A series of posts, Volume 4"
        },
        {
          "id": "2",
          "title": "A series of posts, Volume 2"
        },
        {
          "id": "7",
          "title": "A series of posts, Volume 7"
        },
        {
          "id": "1",
          "title": "A series of posts, Volume 1"
        }
      ],
      "nextToken": "<token>"
    }
  }
}

次のように、nextToken 引数を、前回のクエリで返された値に更新します。

query allPostsByAuthor {
  allPostsByAuthor(
    author: "AUTHORNAME"
    limit: 5
    nextToken: "<token>"
  ) {
    posts {
      id
      title
    }
    nextToken
  }
}

[実行] (オレンジ色の再生ボタン) を選択し、[allPostsByAuthor] を選択します。AUTHORNAME が作成した残りのポストが、クエリペインの右側にある結果ペインに表示されます。これは次のように表示されます。

{
  "data": {
    "allPostsByAuthor": {
      "posts": [
        {
          "id": "8",
          "title": "A series of posts, Volume 8"
        },
        {
          "id": "5",
          "title": "A series of posts, Volume 5"
        },
        {
          "id": "3",
          "title": "A series of posts, Volume 3"
        },
        {
          "id": "9",
          "title": "A series of posts, Volume 9"
        }
      ],
      "nextToken": null
    }
  }
}

でAPI、スキーマタブを選択します。

[スキーマ] ペインの Post タイプを次のように変更して、新しい tags フィールドを追加します。

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

[スキーマ] ペインの Query タイプを次のように変更して、新しい allPostsByTag クエリを追加します。

type Query {
  allPostsByTag(tag: String!, limit: Int, nextToken: String): PaginatedPosts!
  allPostsByAuthor(author: String!, limit: Int, nextToken: String): PaginatedPosts!
  allPost(limit: Int, nextToken: String): PaginatedPosts!
  getPost(id: ID): Post
}

[スキーマ] ペインの Mutation タイプを変更して、新しい addTag と removeTag ミューテーションを次のように追加します。

type Mutation {
  addTag(id: ID!, tag: String!): Post
  removeTag(id: ID!, tag: String!): Post
  deletePost(id: ID!, expectedVersion: Int): Post
  upvotePost(id: ID!): Post
  downvotePost(id: ID!): Post
  updatePost(
    id: ID!,
    author: String,
    title: String,
    content: String,
    url: String,
    expectedVersion: Int!
  ): Post
  addPost(
    author: String!,
    title: String!,
    content: String!,
    url: String!
  ): Post!
}

[Save Schema] を選択します。

右側のリゾルバーペインで、allPostsByTag 型の新しく作成された Query フィールドを見つけて、[アタッチ] を選択します。以下のスニペットを使用してリゾルバーを作成します。

import * as ddb from '@aws-appsync/utils/dynamodb';

export function request(ctx) {
  const { limit = 20, nextToken, tag } = ctx.arguments;
  return ddb.scan({ limit, nextToken, filter: { tags: { contains: tag } } });
}

export function response(ctx) {
  const { items: posts = [], nextToken } = ctx.result;
  return { posts, nextToken };
}

リゾルバーに加えた変更を保存します。

次に、以下のスニペットを使ってMutation フィールド addTag に対して同じ操作を行います。

import { util } from '@aws-appsync/utils'

export function request(ctx) {
	const { id, tag } = ctx.arguments
	const expressionValues = util.dynamodb.toMapValues({ ':plusOne': 1 })
	expressionValues[':tags'] = util.dynamodb.toStringSet([tag])

	return {
		operation: 'UpdateItem',
		key: util.dynamodb.toMapValues({ id }),
		update: {
			expression: `ADD tags :tags, version :plusOne`,
			expressionValues,
		},
	}
}

export const response = (ctx) => ctx.result

リゾルバーに加えた変更を保存します。

以下のスニペットを使用して、これを Mutation フィールドでもう一度繰り返します。

import { util } from '@aws-appsync/utils';
	
export function request(ctx) {
	  const { id, tag } = ctx.arguments;
	  const expressionValues = util.dynamodb.toMapValues({ ':plusOne': 1 });
	  expressionValues[':tags'] = util.dynamodb.toStringSet([tag]);
	
	  return {
	    operation: 'UpdateItem',
	    key: util.dynamodb.toMapValues({ id }),
	    update: {
	      expression: `DELETE tags :tags ADD version :plusOne`,
	      expressionValues,
	    },
	  };
	}
	
	export const response = (ctx) => ctx.resultexport 

リゾルバーに加えた変更を保存します。

でAPI、クエリタブを選択します。

以下のクエリをクエリペインに貼り付けます。

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

[実行] (オレンジ色の再生ボタン) を選択し、[allPostsByAuthor] を選択します。

Nadia のすべてのポストが、クエリペインの右側にある結果ペインに表示されます。これは次のように表示されます。

{
  "data": {
    "allPostsByAuthor": {
      "posts": [
        {
          "id": "10",
          "title": "The cutest dog in the world"
        },
        {
          "id": "11",
          "title": "Did you known...?"
        }
      ],
      "nextToken": null
    }
  }
}

タイトルが「The cutest dog in the world」の投稿を使用しましょう。id は後で使用するため書き留めておきます。では、dog タグを追加してみましょう。

以下のミューテーションを [クエリ] ペインに貼り付けます。また、id 引数を、前にメモしておいた値に更新する必要があります。

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

[実行] (オレンジ色の再生ボタン) を選択し、[addTag] を選択します。ポストが新しいタグで更新されています。

{
  "data": {
    "addTag": {
      "id": "10",
      "title": "The cutest dog in the world",
      "tags": [
        "dog"
      ]
    }
  }
}

タグを追加することができます。puppy に変更するように、tag 引数を更新します。

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

[実行] (オレンジ色の再生ボタン) を選択し、[addTag] を選択します。投稿が新しいタグで更新されています。

{
  "data": {
    "addTag": {
      "id": "10",
      "title": "The cutest dog in the world",
      "tags": [
        "dog",
        "puppy"
      ]
    }
  }
}

タグを削除することもできます。以下のミューテーションを [クエリ] ペインに貼り付けます。また、id 引数を、前にメモしておいた値に更新する必要があります。

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

[実行] (オレンジ色の再生ボタン) を選択し、[removeTag] を選択します。ポストが更新され、puppy タグが削除されています。

{
  "data": {
    "addTag": {
      "id": "10",
      "title": "The cutest dog in the world",
      "tags": [
        "dog"
      ]
    }
  }
}

タグが付いているすべての投稿を検索することもできます。以下のクエリをクエリペインに貼り付けます。

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

[実行] (オレンジ色の再生ボタン) を選択し、[allPostsByTag] を選択します。次のように dog タグが付いているすべての投稿が返されます。

{
  "data": {
    "allPostsByTag": {
      "posts": [
        {
          "id": "10",
          "title": "The cutest dog in the world",
          "tags": [
            "dog",
            "puppy"
          ]
        }
      ],
      "nextToken": null
    }
  }
}