DynamoDB JavaScript 해석기를 사용하여 간단한 사후 애플리케이션 생성

AppSync 콘솔을 열고 API 생성을 선택합니다.

처음부터 디자인을 선택하고 다음을 선택합니다.

API PostTutorialAPI의 이름을 지정한 후 다음을 선택합니다. 나머지 옵션은 기본값으로 설정한 채 검토 페이지로 건너뛰고 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로 증가했습니다.

요청을 두 번째로 실행했을 때 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 필드를 선택 사항으로 설정했습니다. 다음으로 스키마 저장을 선택합니다.

오른쪽의 해석기 창에서 Mutation 유형에 새로 생성된 delete 필드를 찾은 다음 연결을 선택합니다. 다음 코드를 사용하여 새 해석기를 생성합니다.

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)을 선택합니다.

오른쪽의 해석기 창에서 Query 유형에 새로 생성된 allPost 필드를 찾은 다음 연결을 선택합니다. 다음 코드를 사용하여 새 해석기를 생성합니다.

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 };
}

이 해석기의 요청 핸들러에는 두 개의 선택적 인수가 필요합니다.

해석기의 모든 변경 사항을 저장합니다.

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)을 선택합니다.

오른쪽의 해석기 창에서 Query 유형에 새로 생성된 allPostsByAuthor 필드를 찾은 다음 연결을 선택합니다. 아래 코드 조각을 사용하여 해석기를 만듭니다.

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 해석기와 마찬가지로 이 해석기에는 두 개의 선택적 인수가 있습니다.

해석기의 모든 변경 사항을 저장합니다.

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)을 선택합니다.

오른쪽의 해석기 창에서 Query 유형에 새로 생성된 allPostsByTag 필드를 찾은 다음 연결을 선택합니다. 아래 코드 조각을 사용하여 해석기를 만듭니다.

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 필드 removeTag에 대해 이 작업을 한 번 더 반복합니다.

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
    }
  }
}

세상에서 가장 귀여운 강아지라는 제목이 붙은 게시물을 사용해 봅시다. 나중에 사용할 것이기 때문에 이 게시물의 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"
      ]
    }
  }
}

태그를 더 추가할 수 있습니다. tag 인수를 puppy로 변경하도록 뮤테이션을 업데이트합니다.

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
    }
  }
}