1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

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

    nader dabitnader dabit
    reactReact
    apolloApollo
    awsAWS
    graphqlGraphQL
    ^14.0.0

    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.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: Now that we know how to query data from our AppSync API, let's look at how to perform mutations.

    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.

    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.

    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.

    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.

    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.

    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.

    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.

    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.

    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.