Supabase Realtime Example

leaderboard.vue

<script setup lang="ts">
  import type { RealtimeChannel } from '@supabase/supabase-js'

  const route = useRoute()

  const { slug }: { slug?: string } = route.params
  if (!slug) {
    throw createError({
      statusCode: 404,
      statusMessage: 'Page not found',
      fatal: true
    })
  }

  let realtimeChannel: RealtimeChannel
  onMounted(() => {
    // Create a function to handle inserts
    realtimeChannel = supabase
      .channel(`leaderboard_${slug}`)
      .on(
        'postgres_changes',
        {
          event: 'INSERT',
          schema: 'public',
          table: 'tournament_snapshot',
          filter: `tournament_id=eq.${pool.value?.tournament_id}`
        },
        async () => {
          console.log('refreshing leaderboard data...')
          refreshPool()
          refreshTournament()
          refreshLeaderboard()
        }
      )
      .subscribe((status, err) => {
        const timestamp = new Date().toISOString()
        console.log('SUBSCRIPTION STATUS:', status, timestamp)
        if (err) {
          console.log('SUBSCRIPTION ERROR:', err, timestamp)
        }

        if (status === 'SUBSCRIBED') {
          console.log('Connected!')
        }

        if (status === 'CHANNEL_ERROR') {
          console.log(`There was an error subscribing to channel: ${err?.message}`)
        }

        if (status === 'TIMED_OUT') {
          console.log('Realtime server did not respond in time.')
        }

        if (status === 'CLOSED') {
          console.log('Realtime channel was unexpectedly closed.')
        }
      })
  })

  // Don't forget to unsubscribe when user left the page
  onUnmounted(() => {
    if (realtimeChannel) {
      supabase.removeChannel(realtimeChannel)
    }
  })

  // Initialize the JS client
  const supabase = useSupabaseClient()
  const { $client } = useNuxtApp()

  // grab pool data
  const { data: pool, refresh: refreshPool } = await $client.pool.getBySlug.useQuery({ slug })

  if (!pool.value) {
    throw createError({
      statusCode: 404,
      statusMessage: 'Pool not found. Please check the URL supplied to you and try again.',
      fatal: true
    })
  }

  // grab tournament data
  const { data: tournament, refresh: refreshTournament } = await $client.tournament.getByIdWithLastSnapshot.useQuery({
    id: pool.value.tournament_id
  })
  if (!tournament.value) {
    throw createError({
      statusCode: 404,
      statusMessage: 'Tournament not found. Please check the URL supplied to you and try again.',
      fatal: true
    })
  }

  // grab leaderboard data
  const { data: leaderboardResults, refresh: refreshLeaderboard } =
    await $client.leaderboard.getLeaderboardById.useQuery({
      id: pool.value.id
    })

</script>