Become a member
to unlock all features

Level Up!

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


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


    In this lesson we’ll show how to use GraphQL subscriptions coming from our AWS AppSync API to listen to real time data changes in a React application and render the new data as it comes in.



    Become a Member to view code

    You must be a Pro 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
    orLog In




    Instructor: To add subscriptions, the first thing we'll need to do is import the buildSubscription helper from AWS AppSync. We'll next define our subscription that will hook into the onCreate Todo subscription.

    Next, in our list Todo's GraphQL operation, we'll pass in a new prop called subscribeToMore that will be set to props.data.subscribeToMore.

    Finally, we'll create a componentDidMount lifecycle method that we'll call this.props.subscribeToMore passing in the buildSubscription helper.

    BuildSubscription takes two arguments, the subscription definition and the query which we'd like to update when the subscription comes through. Now, we're ready to test this out. Open up your terminal and run npm start.

    To test our GraphQL subscriptions, we're going to open up two browser windows in order to see that the data is coming through in the other browser. When we create a Todo in one browser, we should see the other browser update with a new data.