Subscribe the UI to Database Changes with Supabase Real-Time

Share this video with your friends

The cancellation event from stripe doesn't get triggered until the end of the billing cycle. Therefore, our customer may still be using our app when their subscription status changes, with their dashboard confusingly displaying the incorrect data.

In this video, we implement Supabase real-time to subscribe the UI to changes in the database. We can initiate the subscription in our useUser hook, and specify that we only care about updates to our currently logged in user.

In order for Supabase to broadcast these changes on our websocket connection, we need to enable replication for the specific tables we want to subscribe to.

This means that anytime our is_subscribed value changes in the profile table, our useUser hook will automatically be updated with the new value, and the dashboard will immediately update to display the correct data.

Mark Moriarty

~ 3 years ago

I've learned so much in this course, and realtime is one of those "wow" features that makes me excited to use Supabase for my next project! Thank you, Jon!

The "cancel now" vs "cancel at period end" distinction mentioned right at the start of this video is a separate consideration though. If the user can click "Cancel" and the result is the subscription is marked to cancel at period end, the we need to look out for cancel_at_period_end: true in the updated Stripe subscription, and reflect that in the UI ("marked to cancel at end of this billing period; you won't be charged again") so they are sure their "Cancel" action worked.

Jon Meyers(instructor)

~ 3 years ago

Excellent call out! Thanks Mark! 💯