Create, update, and delete application data

In this guide, you will learn how to create, update, and delete your data using Amplify Libraries' GraphQL client.

Before you begin, you will need:

An application connected to the API

Run mutations to create, update, and delete application data

In GraphQL, mutations are APIs that are used to create, update, or delete data. This is different than queries, which are used to read the data but not change it. The following examples demonstrate how you can create, update, and delete items using the Amplify GraphQL client.

Create an item

You can create an item by first importing the API and mutations. Then you can add an item:

1import { API } from 'aws-amplify';
2import * as mutations from './graphql/mutations';
3import { GraphQLQuery } from '@aws-amplify/api';
4import { CreateTodoInput, CreateTodoMutation } from './API';
5
6const todoDetails: CreateTodoInput = {
7  name: 'Todo 1',
8  description: 'Learn AWS AppSync'
9};
10
11const newTodo = await API.graphql<GraphQLQuery<CreateTodoMutation>>({
12  query: mutations.createTodo,
13  variables: { input: todoDetails }
14});

You should see the item created: Learn AWS AppSync.

Note: You do not need to specify the createdAt field. Amplify will automatically populate this field for you.

Update an item

To update the item, use the GraphQL update mutation:

1import { API } from 'aws-amplify';
2import * as mutations from './graphql/mutations';
3import { GraphQLQuery } from '@aws-amplify/api';
4import { UpdateTodoInput, UpdateTodoMutation } from './API';
5
6const todoDetails: UpdateTodoInput = {
7  id: 'some_id',
8  description: 'Updated description'
9};
10
11const updatedTodo = await API.graphql<GraphQLQuery<UpdateTodoMutation>>({
12  query: mutations.updateTodo,
13  variables: { input: todoDetails }
14});

Notes:

You do not need to specify the updatedAt field. Amplify will automatically populate this field for you.
If you specify extra input fields not expected by the API, this query will fail. You can see this in the error field returned by the query. In GraphQL, errors are not thrown like exceptions in other languages. Instead, any errors are captured and returned as part of the query result in the error field.

Delete an item

You can then delete the Todo by using the delete mutation. To specify which item to delete, you only need to provide the id of that item:

1import { API } from 'aws-amplify';
2import * as mutations from './graphql/mutations';
3import { GraphQLQuery } from '@aws-amplify/api';
4import { DeleteTodoInput, DeleteTodoMutation } from './API';
5
6const todoDetails: DeleteTodoInput = {
7  id: 'some_id'
8};
9
10const deletedTodo = await API.graphql<GraphQLQuery<DeleteTodoMutation>>({
11  query: mutations.deleteTodo,
12  variables: { input: todoDetails }
13});

Note: Join table records must be deleted before deleting the associated records. For example, for a many-to-many relationship between Posts and Tags, delete the PostTags join record before deleting a Post or Tag.

Learn more

Custom authorization mode to mutate data

Each AWS AppSync API uses a default authorization mode when you configure your app. If you get unauthorized errors, you may need to update your authorization mode. To override this default, pass an authMode property. The following examples show how you can mutate data with a custom authorization mode:

1import { API } from 'aws-amplify';
2import { GraphQLQuery, GRAPHQL_AUTH_MODE } from '@aws-amplify/api';
3import * as mutations from './graphql/mutations';
4import { CreateTodoInput, CreateTodoMutation } from './API';
5
6const todoDetails: CreateTodoInput = {
7  id: 'some_id',
8  name: 'My todo!',
9  description: 'Hello world!'
10};
11
12const todo = await API.graphql<GraphQLQuery<CreateTodoMutation>>({
13  query: mutations.createTodo,
14  variables: { input: todoDetails },
15  authMode: GRAPHQL_AUTH_MODE.AWS_IAM
16});

Cancel mutation requests

You can cancel any GraphQL API request by calling .cancel on the GraphQL request promise that's returned by API.graphql(...).

1const promise = API.graphql({ query: "..." });
2
3try {
4  await promise;
5} catch (error) {
6  console.log(error);
7  // If the error is because the request was cancelled you can confirm here.
8  if (API.isCancel(error)) {
9    console.log(error.message); // "my message for cancellation"
10    // handle user cancellation logic
11  }
12}
13
14...
15
16// To cancel the above request
17API.cancel(promise, "my message for cancellation");

You need to ensure that the promise returned from API.graphql() has not been modified. Typically, async functions wrap the promise being returned into another promise. For example, the following will not work:

1async function makeAPICall() {
2  return API.graphql({ query: '...' });
3}
4const promise = makeAPICall();
5
6// The following will NOT cancel the request.
7API.cancel(promise, 'my error message');

Conclusion

Congratulations! You have finished the Create, update, and delete application data guide. In this guide, you created, updated, and deleted your app data through the GraphQL API.

Next steps

Our recommended next steps include using the API to query data and subscribe to real-time events to look for mutations in your data. Some resources that will help with this work include:

Customize your auth rules

Read application data