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.
Subscription is no longer working. I even downloaded your repo and replaced the api keys with my own. I tried on both my development server and deployed to a production server and neither one is pushing out real-time updates. Can you please advise? Also, would love to see this course refactored with the React Hooks API! ✋🏽
Subscription is no longer working.
I can confirm, isn't working for me either.
Hey @Michael or @Fabricio, do either of you have any errors you can post to help narrow down what's going on here?
@zac ACK, I'll update as soon as possible. :-)
Please can you show me how to subscribe to deletes