Skip to content

Updated Vue getting started guide #4711

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 19, 2022
Merged

Updated Vue getting started guide #4711

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion cspell.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1471,7 +1471,8 @@
"myfunction",
"roadmap",
"infowindow",
"Libre's"
"Libre's",
"Pinia"
],
"flagWords": ["hte"]
}
168 changes: 83 additions & 85 deletions src/fragments/start/getting-started/vue/data-model.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ Select the default values which are highlighted below:

The CLI should open this GraphQL schema in your text editor.

__amplify/backend/api/myapi/schema.graphql__
**amplify/backend/api/myapi/schema.graphql**

```graphql
type Todo @model {
Expand All @@ -72,13 +72,13 @@ type Todo @model {
}
```

The schema generated is for a Todo app. You'll notice a directive on the `Todo` type of `@model`. This directive is part of the [GraphQL transform](/cli/graphql/data-modeling) library of Amplify.
The schema generated is for a Todo app. You'll notice a directive on the `Todo` type of `@model`. This directive is part of the [GraphQL transform](/cli/graphql/data-modeling) library of Amplify.

The GraphQL Transform Library provides custom directives you can use in your schema that allow you to do things like define data models, set up authentication and authorization rules, configure serverless functions as resolvers, and more.

A type decorated with the `@model` directive will scaffold out the database table for the type (Todo table), the schema for CRUD (create, read, update, delete) and list operations, and the GraphQL resolvers needed to make everything work together.

From the command line, press __enter__ to accept the schema and continue to the next steps.
From the command line, press **enter** to accept the schema and continue to the next steps.

## Deploy your GraphQL API

Expand Down Expand Up @@ -128,7 +128,7 @@ This will open your Amplify app project in the AWS service console. Choose the *

## Connect frontend to API

Next, open __App.vue__.
Next, open **App.vue**.

### Writing data with GraphQL mutations

Expand All @@ -138,38 +138,38 @@ To create a new todo in the database, use the `API.graphql()` operation with the
<template>
<div id="app">
<h1>Todo App</h1>
<input type="text" v-model="name" placeholder="Todo name">
<input type="text" v-model="description" placeholder="Todo description">
<input type="text" v-model="name" placeholder="Todo name" />
<input type="text" v-model="description" placeholder="Todo description" />
<button v-on:click="createTodo">Create Todo</button>
</div>
</template>

<script>
import { API } from 'aws-amplify';
import { createTodo } from './graphql/mutations';

export default {
name: 'app',
data() {
return {
name: '',
description: ''
}
},
methods: {
async createTodo() {
const { name, description } = this;
if (!name || !description) return;
const todo = { name, description };
await API.graphql({
query: createTodo,
variables: {input: todo},
});
this.name = '';
this.description = '';
import { API } from 'aws-amplify';
import { createTodo } from './graphql/mutations';

export default {
name: 'app',
data() {
return {
name: '',
description: ''
};
},
methods: {
async createTodo() {
const { name, description } = this;
if (!name || !description) return;
const todo = { name, description };
await API.graphql({
query: createTodo,
variables: { input: todo }
});
this.name = '';
this.description = '';
}
}
}
};
};
</script>
```

Expand All @@ -181,8 +181,8 @@ To display the data, update `App.vue` to list all the items in the database by i
<template>
<div id="app">
<h1>Todo App</h1>
<input type="text" v-model="name" placeholder="Todo name">
<input type="text" v-model="description" placeholder="Todo description">
<input type="text" v-model="name" placeholder="Todo name" />
<input type="text" v-model="description" placeholder="Todo description" />
<button v-on:click="createTodo">Create Todo</button>
<div v-for="item in todos" :key="item.id">
<h3>{{ item.name }}</h3>
Expand All @@ -192,44 +192,43 @@ To display the data, update `App.vue` to list all the items in the database by i
</template>

<script>
import { API } from 'aws-amplify';
import { createTodo } from './graphql/mutations';
import { listTodos } from './graphql/queries';

export default {
name: 'App',
async created() {
this.getTodos();
this.subscribe();
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was the only real change in this file. This was calling subscribe before it was added.

},
data() {
return {
name: '',
description: '',
todos: []
}
},
methods: {
async createTodo() {
const { name, description } = this;
if (!name || !description) return;
const todo = { name, description };
this.todos = [...this.todos, todo];
await API.graphql({
query: createTodo,
variables: {input: todo},
});
this.name = '';
this.description = '';
import { API } from 'aws-amplify';
import { createTodo } from './graphql/mutations';
import { listTodos } from './graphql/queries';

export default {
name: 'App',
async created() {
this.getTodos();
},
data() {
return {
name: '',
description: '',
todos: []
};
},
async getTodos() {
const todos = await API.graphql({
query: listTodos
});
this.todos = todos.data.listTodos.items;
methods: {
async createTodo() {
const { name, description } = this;
if (!name || !description) return;
const todo = { name, description };
this.todos = [...this.todos, todo];
await API.graphql({
query: createTodo,
variables: { input: todo }
});
this.name = '';
this.description = '';
},
async getTodos() {
const todos = await API.graphql({
query: listTodos
});
this.todos = todos.data.listTodos.items;
}
}
}
}
};
</script>
```

Expand All @@ -239,28 +238,27 @@ Now if you wish to subscribe to data, import the `onCreateTodo` subscription and

```html
<script>
// other imports
import { onCreateTodo } from './graphql/subscriptions';

export default {
// other functions and properties
created(){
this.getTodos();
this.subscribe();
},
methods: {
// other methods
subscribe() {
API.graphql({ query: onCreateTodo })
.subscribe({
// other imports
import { onCreateTodo } from './graphql/subscriptions';

export default {
// other functions and properties
created() {
this.getTodos();
this.subscribe();
},
methods: {
// other methods
subscribe() {
API.graphql({ query: onCreateTodo }).subscribe({
next: (eventData) => {
let todo = eventData.value.data.onCreateTodo;
if (this.todos.some(item => item.name === todo.name)) return; // remove duplications
if (this.todos.some((item) => item.name === todo.name)) return; // remove duplications
this.todos = [...this.todos, todo];
}
});
}
}
}
};
};
</script>
```
Loading