Execute Mutations to an AWS AppSync GraphQL API from a React Application
In this lesson, we’ll execute GraphQL mutations using our AWS AppSync API and show how to add data to the database from a React web application using the AWS AppSync GraphQL client.
We'll create a mutation query string that will call createTodo that is defined in our WAS AppSync GraphQL client. This query will be passed in as props from a Higher-order component and we'll wire up input in React to feed values into this query.
Instructor: [00:01] Now that we know how to query data from our AppSync API, let's look at how to perform mutations.
[00:08] The first thing we'll do is we'll import the GraphQL mutation helper from aws-appsync-react. Next, we'll define our mutation. The mutation we'd like to create is create-to-do. The create-to-do mutation will take in two arguments, the title and the completed values.
[01:02] Next, in our class, we'll go ahead and create some initial state, setting a to-do value as an empty string. We'll also add an add-to-do class method. Here, we'll check to see if this.state.to-do is equal to an empty string. If it is, we'll return from the function.
[01:18] We'll then create a to-do object setting the title as this.state.to-do and the completed value as false. We'll then call this.props.create-to-do, passing in the to-do. This.props.create-to-do is a prop that we'll be creating and passing down as a prop in just a moment. Finally, we'll call this.setState, resetting to-do to an empty string.
[01:53] In the render method, we'll have an input component that has an onChange method that will call this.setState, setting the to-do value equal to the event.target.value. It will also have a value of this.state.to-do and a placeholder of to-do-name.
[02:28] We'll then create a button with an onClick handler that will call this.add-to-do. Finally, in compose, we'll add another argument of GraphQL mutation. GraphQL mutation takes three arguments -- the mutation, the query so we can update the UI with an optimistic response, and the type.
[03:07] Now we should be able to test this out. Open your terminal and run npm start. We should be able to now create new to-dos and have them show up in our in our UI with an optimistic response.
[03:24] If we refresh the screen, we should see the data still rendered to our UI, showing that the data has indeed been stored in our database.
[03:33] One of the most powerful things about the AWS AppSync client is that it actually works offline. To test this out, let's open the console and click on the network tab. Here, we can set our app as being offline by clicking offline.
[03:52] Now, if we create a new to-do, we see that our UI has been optimistically updated, but no network request has been initiated. When we unclick offline to put our app back online, we see that the network request has now been executed.