type Event
  @model
{
  id: ID!
  name: String
  active: Boolean!
  comments: [Comment] @connection(keyName: "listCommentByEventId", fields: ["id"])
  createdAt: AWSDateTime
  owner: String
}

type Comment
  @model
  @key (name: "listCommentByEventId", fields: ["eventId"], queryField: "listCommentByEventId")
{
  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    | Update    | awscloudformation |
? Are you sure you want to continue? Yes

The following types do not have '@auth' enabled. Consider using @auth with @model
         - Event
         - 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 update code for your updated GraphQL API Yes
? Do you want to generate GraphQL statements (queries, mutations and subscription) based on your schema types?
This will overwrite your current graphql queries, mutations and subscriptions Yes
⠹ Updating resources in the cloud. This may take a few minutes...

(snip)

UPDATE_COMPLETE amplify-commentany-dev-174901 AWS::CloudFormation::Stack Thu Jul 02 2020 17:40:41 GMT+0900 (GMT+09:00) 
UPDATE_COMPLETE apicommentany                 AWS::CloudFormation::Stack Thu Jul 02 2020 17:40:40 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 { listEvents } from '@/graphql/queries'
import { createEvent, updateEvent } from '@/graphql/mutations'

  created: async function() {
    const items = await API.graphql(graphqlOperation(listEvents)).catch(err =>
      console.error('listEvents', err),
    )
    this.events = items.data.listEvents.items
  },

    addEvent: async function() {
      if (!this.newEventName || this.newEventName.length <= 0) {
        return
      }

      const input = {
        name: this.newEventName,
        active: true,
        owner: 'me',
      }

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

      this.events.push(savedEvent)

      this.newEventNameDialog = false
      this.newEventName = ''
    },

    activeSwitch: async function(event) {
      const index = this.events.findIndex(item => item.id === event.id)
      if (index < 0) {
        return
      }

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

      this.events.splice(index, 1, savedEvent)
    },

    <v-row v-for="(event, index) in sortedEvents" :key="index">
      <EventItem
        :event="event"
        :isEventOwner="isEventOwner(event.owner)"
        @activeSwitch="activeSwitch"
      ></EventItem>
    </v-row>

    <v-card
      :to="{ name: 'EventDetail', params: { eventId: event.id } }"
      :outlined="!event.active"
    >

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

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

    const item = await API.graphql(
      graphqlOperation(getEvent, { id: this.eventId }),
    ).catch(err => console.error('getEvent', err))
    this.event = item.data.getEvent
    this.comments = this.event.comments.items
  },