Course Overview: Scalable Offline-Ready GraphQL Applications with AWS AppSync & React

Create your first AWS AppSync GraphQL API

Execute Mutations within the AWS AppSync Console

Execute Queries within the AWS AppSync Console

Connect to AWS AppSync from a React Application

Execute Queries to an AWS AppSync GraphQL API from a React Application

Execute Mutations to an AWS AppSync GraphQL API from a React Application

Subscribe to New Data in a React Application with AWS AppSync GraphQL Subscriptions

Building AWS AppSync APIs using the AWS Amplify CLI

Scalable Offline-Ready GraphQL Applications with AWS AppSync & React

In this lesson, we’ll execute mutations against the new AWS AppSyncGraphQL API, which we created in the last video, and view the data in our database.

You will see how to create, update, and delete “todos” within the AWS AppSync console

Instructor: [00:01] To execute a mutation or a query, click on the queries link in the left-hand menu to open the graphical editor. To view available queries, mutations and subscriptions, we can click on the docs link on the right side of the page.

[00:18] To view available mutations, click on mutation. Here, we see three available mutations -- createTodo, updateTodo and deleteTodo. The first mutation we'd like to create is createTodo, so I'll go ahead and define a new mutation called create that will execute createTodo.

[00:36] CreateTodo takes an input of type createTodoInput. CreateTodoInput accepts a title and a completed value. From this mutation, we'll return an ID, a title and a completed value. To execute the mutation, click on the orange play button.

[01:02] Now that we've successfully executed a mutation, let's open up our data source to view the data in our table. In the table view, we should be able to click on the items tab to view the data in our table.

[01:29] Next, let's go ahead and copy the ID of the Todo to our clipboard. The next mutation we'd like to execute is an update. We'll create a mutation called update and execute the update to do a mutation.

[01:50] For the input ID, we'll paste in the ID that we copied onto our clipboard from the database. The update to do a mutation will change the completed value from false to true.

[02:10] In our data source, we should now see the completed value change from false to true when we refresh. Finally, let's go ahead and create a delete mutation. This mutation will execute the deleteTodo mutation, taking an input with an ID field being the ID that we copy earlier to our clipboard.

[02:47] Once we execute this mutation, we should be able to go back to our data source, refresh and see that the item has been deleted.

Course

Scalable Offline-Ready GraphQL Applications with AWS AppSync & React

Execute Mutations within the AWS AppSync Console

Share this video with your friends