Exercise 10: Real-time subscriptions

There's one more amazing thing you get out-of-the-box with Amplify: real-time updates. This mean you don't need to refresh the page and you'll be able to see new meetups as they are added. Let's try to do that!

Task

Subscribe to all mutations and update the list of meetups in real-time when some change occurs.

Hints

• See the documentation for the details: https://aws-amplify.github.io/docs/js/api#subscriptions.

• Amplify and AppSync generated the following three subscriptions for you:

  • subscription OnCreateMeetupGroup
  • subscription OnUpdateMeetupGroup
  • subscription OnDeleteMeetupGroup
  • subscription OnCreateEvent
  • subscription OnUpdateEvent
  • subscription OnDeleteEvent
  • subscription OnCreateAttendee
  • subscription OnUpdateAttendee
  • subscription OnDeleteAttendee

  See your project schema in AWS Web Console > AppSync for more details.

// import the subscription
import { OnCreateMeetupGroup } from './graphql/subscriptions'

// subscribe in componentDidMount
async function subscribeToNewMeetups(cb) {
  // Subscribe to creation of a Meetup Group
  API.graphql(
    graphqlOperation(onCreateMeetupGroup)
  ).subscribe({
    next: (meetup) => cb(meetup.value.data.onCreateMeetupGroup)
  });
}