$ node -v
v12.4.0
$ yarn -v
1.21.1

$ git clone https://github.com/tacck/comment-any.git
$ cd comment-any
$ git checkout -b base origin/base
$ yarn install

$ amplify init
Scanning for plugins...
Plugin scan successful
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project commentany
? Enter a name for the environment dev
? Choose your default editor: Visual Studio Code
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using vue
? Source Directory Path:  src
? Distribution Directory Path: dist
? Build Command:  yarn build
? Start Command: yarn serve
Using default provider  awscloudformation

For more information on AWS Profiles, see:
https://docs.aws.amazon.com/cli/latest/userguide/cli-multiple-profiles.html

? Do you want to use an AWS profile? Yes
? Please choose the profile you want to use default
Adding backend environment dev to AWS Amplify Console app: XXXXXXXXXXXXXX
⠧ Initializing project in the cloud...

(snip)

CREATE_COMPLETE amplify-commentany-dev-XXXXXX AWS::CloudFormation::Stack Thu Jun 25 2020 17:49:51 GMT+0900 (GMT+09:00) 
CREATE_COMPLETE DeploymentBucket              AWS::S3::Bucket            Thu Jun 25 2020 17:49:48 GMT+0900 (GMT+09:00) 
✔ Successfully created initial AWS cloud resources for deployments.
✔ Initialized provider successfully.
Initialized your environment successfully.

Your project has been successfully initialized and connected to the cloud!

Some next steps:
"amplify status" will show you what you've added already and if it's locally configured or deployed
"amplify add <category>" will allow you to add features like user login or a backend API
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify console" to open the Amplify Console and view your project status
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

Pro tip:
Try "amplify add api" to create a backend API and then "amplify publish" to deploy everything

$

$ yarn add aws-amplify @aws-amplify/ui-vue

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify'

import Amplify from 'aws-amplify'
import '@aws-amplify/ui-vue'
import aws_exports from './aws-exports'

Amplify.configure(aws_exports)

Vue.config.productionTip = false

new Vue({
  router,
  store,
  vuetify,
  render: h => h(App),
}).$mount('#app')

$ amplify add api
? Please select from one of the below mentioned services: GraphQL
? Provide API name: commentany
? Choose the default authorization type for the API API key
? Enter a description for the API key: 
? After how many days from now the API key should expire (1-365): 365
? Do you want to configure advanced settings for the GraphQL API No, I am done.
? Do you have an annotated GraphQL schema? No
? Do you want a guided schema creation? Yes
? What best describes your project: Single object with fields (e.g., “Todo” with ID, name, description)
? Do you want to edit the schema now? No

The following types do not have '@auth' enabled. Consider using @auth with @model
         - Todo
Learn more about @auth here: https://docs.amplify.aws/cli/graphql-transformer/directives#auth


GraphQL schema compiled successfully.

Edit your schema at /Users/[YOUR_DIRECTORY]/comment-any/amplify/backend/api/commentany/schema.graphql or place .graphql files in a directory at /Users/[YOUR_DIRECTORY]/comment-any/amplify/backend/api/commentany/schema
Successfully added resource commentany locally

Some next steps:
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

$

type Comment @model {
  id: ID!
  eventId: ID!
  comment: String!
  likes: Int!
  name: String
  updatedAt: AWSDateTime
}

$ amplify push
✔ Successfully pulled backend environment dev from the cloud.

Current Environment: dev

| Category | Resource name | Operation | Provider plugin   |
| -------- | ------------- | --------- | ----------------- |
| Api      | commentany    | Create    | awscloudformation |
? Are you sure you want to continue? Yes

The following types do not have '@auth' enabled. Consider using @auth with @model
         - Comment
Learn more about @auth here: https://docs.amplify.aws/cli/graphql-transformer/directives#auth


GraphQL schema compiled successfully.

Edit your schema at /Users/[YOUR_DIRECTORY]/comment-any/amplify/backend/api/commentany/schema.graphql or place .graphql files in a directory at /Users/[YOUR_DIRECTORY]/comment-any/amplify/backend/api/commentany/schema
? Do you want to generate code for your newly created GraphQL API Yes
? Choose the code generation language target javascript
? Enter the file name pattern of graphql queries, mutations and subscriptions src/graphql/**/*.js
? Do you want to generate/update all possible GraphQL operations - queries, mutations and subscriptions Yes
? Enter maximum statement depth [increase from default if your schema is deeply nested] 2
⠏ Updating resources in the cloud. This may take a few minutes...

(snip)

UPDATE_COMPLETE                     amplify-commentany-dev-XXXXXX AWS::CloudFormation::Stack Thu Jun 25 2020 18:07:58 GMT+0900 (GMT+09:00) 
UPDATE_COMPLETE_CLEANUP_IN_PROGRESS amplify-commentany-dev-XXXXXX AWS::CloudFormation::Stack Thu Jun 25 2020 18:07:58 GMT+0900 (GMT+09:00) 
CREATE_COMPLETE                     apicommentany                 AWS::CloudFormation::Stack Thu Jun 25 2020 18:07:55 GMT+0900 (GMT+09:00) 
✔ Generated GraphQL operations successfully and saved at src/graphql
✔ All resources are updated in the cloud

GraphQL endpoint: https://XXXXXXXXXXXXXXXXXXXXXXXXXX.appsync-api.ap-northeast-1.amazonaws.com/graphql
GraphQL API KEY: da2-XXXXXXXXXXXXXXXXXXXXXXXXXX

$ 

import { API, graphqlOperation } from 'aws-amplify'
import { listComments } from '@/graphql/queries'
import {
  createComment,
  updateComment,
  deleteComment,
} from '@/graphql/mutations'

  created: async function() {
    this.linkUrl = location.href

    const items = await API.graphql(graphqlOperation(listComments)).catch(err =>
      console.error('listComments', err),
    )
    this.comments = items.data.listComments.items
  },

export const listComments = /* GraphQL */ `
  query ListComments(
    $filter: ModelCommentFilterInput
    $limit: Int
    $nextToken: String
  ) {
    listComments(filter: $filter, limit: $limit, nextToken: $nextToken) {
      items {
        id
        eventId
        comment
        likes
        name
        updatedAt
        createdAt
      }
      nextToken
    }
  }
`;

    addComment: async function(inputComment) {
      if (!inputComment || inputComment.length <= 0) {
        return
      }

      const comment = {
        eventId: this.event.id,
        name: this.loginUserName,
        comment: inputComment,
        likes: 0,
      }

      const item = await API.graphql(
        graphqlOperation(createComment, { input: comment }),
      ).catch(err => console.error('createComment', err))
      const savedComment = item.data.createComment

      this.comments.push(savedComment)

      this.scrollToId(savedComment.id)
      this.pushUpdatedIds(savedComment.id)
    },

    addLike: async function(elementId) {
      const comment = this.getComment(elementId)
      if (comment === null) {
        return
      }

      const beforeIndex = this.getCommentIndex(elementId)

      const input = {
        id: comment.id,
        likes: comment.likes + 1,
      }

      const item = await API.graphql(
        graphqlOperation(updateComment, { input: input }),
      ).catch(err => console.error('updateComment', err))
      const savedComment = item.data.updateComment

      comment.likes = savedComment.likes
      comment.updatedAt = savedComment.updatedAt
      const afterIndex = this.getCommentIndex(elementId)

      if (beforeIndex > afterIndex) {
        this.scrollToId(comment.id)
        this.pushUpdatedIds(comment.id)
      }
    },

    deleteComment: async function(elementId) {
      const index = this.comments.findIndex(item => item.id === elementId)
      if (index < 0) {
        return
      }

      const comment = this.getComment(elementId)
      const input = {
        id: comment.id,
      }

      await API.graphql(
        graphqlOperation(deleteComment, { input: input }),
      ).catch(err => console.error('deleteComment', err))

      this.comments.splice(index, 1)
    },