Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dabit3/vue-graphql-appsync
Vue example using GraphQL with AWS AppSync
https://github.com/dabit3/vue-graphql-appsync
appsync aws-appsync graphql vue vue-graphql
Last synced: 1 day ago
JSON representation
Vue example using GraphQL with AWS AppSync
- Host: GitHub
- URL: https://github.com/dabit3/vue-graphql-appsync
- Owner: dabit3
- Created: 2018-02-16T06:59:56.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-03-01T16:41:45.000Z (over 6 years ago)
- Last Synced: 2024-08-02T07:18:13.769Z (3 months ago)
- Topics: appsync, aws-appsync, graphql, vue, vue-graphql
- Language: JavaScript
- Size: 87.9 KB
- Stars: 81
- Watchers: 8
- Forks: 13
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-aws-appsync - Vue example using GraphQL with AWS AppSync
README
# Vue + [AWS AppSync](https://aws.amazon.com/appsync/) + GraphQL App
Task Manager Application built using [Vue](https://vuejs.org/), [AWS AppSync](https://aws.amazon.com/appsync/), and [Vue Apollo](https://github.com/Akryum/vue-apollo)
This application goes along with the medium blog [Full Stack Vue with GraphQL & AWS AppSync](https://medium.com/@dabit3/full-stack-vue-with-graphql-aws-appsync-adc5af474dc9)
## Getting started
1. clone project
```
git clone https://github.com/dabit3/vue-graphql-appsync.git
```
2. cd into directory
```
cd vue-graphql-appsync
```
3. install dependencies using npm or yarn
```
yarn || npm install
```
4. create a new AppSync Project with the following schema:
[Video walkthrough](https://www.youtube.com/watch?v=0Xbt7VqkJNc) (replace Todo with Task, and fetchTodos with fetchTasks), or go to [AWS AppSync](https://aws.amazon.com/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
}
```
5. update your credentials in `src/AppSync.js`