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.
Instructor: [00:01] 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.
[00:35] 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.
[00:53] Finally, we'll create a componentDidMount lifecycle method that we'll call this.props.subscribeToMore passing in the buildSubscription helper.
[01:01] 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.
[01:32] 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.