Vue + AWS AppSync + GraphQL App
Task Manager Application built using Vue, AWS AppSync, and Vue Apollo
This application goes along with the medium blog Full Stack Vue with GraphQL & AWS AppSync
- clone project
git clone https://github.com/dabit3/vue-graphql-appsync.git
- cd into directory
cd vue-graphql-appsync
- install dependencies using npm or yarn
yarn || npm install
- create a new AppSync Project with the following schema:
Video walkthrough (replace Todo with Task, and fetchTodos with fetchTasks), or go to AWS AppSync if you already are familiar with how to create the correct schema.
input CreateTaskInput {
id: ID!
name: String!
completed: Boolean!
}
input DeleteTaskInput {
id: ID!
}
type Mutation {
createTask(input: CreateTaskInput!): Task
updateTask(input: UpdateTaskInput!): Task
deleteTask(input: DeleteTaskInput!): Task
}
type Query {
getTask(id: ID!): Task
listTasks(first: Int, after: String): TaskConnection
}
type Subscription {
onCreateTask(id: ID, name: String, completed: Boolean): Task
@aws_subscribe(mutations: ["createTask"])
onUpdateTask(id: ID, name: String, completed: Boolean): Task
@aws_subscribe(mutations: ["updateTask"])
onDeleteTask(id: ID, name: String, completed: Boolean): Task
@aws_subscribe(mutations: ["deleteTask"])
}
type Task {
id: ID!
name: String!
completed: Boolean!
}
type TaskConnection {
items: [Task]
nextToken: String
}
input UpdateTaskInput {
id: ID!
name: String
completed: Boolean
}
schema {
query: Query
mutation: Mutation
subscription: Subscription
}
- update your credentials in
src/AppSync.js