Realtime feature

Just trying to use basic realtime features within a Vue component like so:

<script lang="ts" setup>
import type { WorkEvent } from '~/types/event';
const supabase = useSupabaseClient();
const props = defineProps<{ event: WorkEvent; }>();

const { data: count } = await useAsyncData('votes-count', async () => {
  const { count } = await supabase.from('user-votes').select('*', { count: 'exact' }).eq('event', props.event.id);
  return count;
});

supabase.from('user-votes').on('*', () => {
    refreshNuxtData('votes-count');
}).subscribe();

</script>

<template>
  <NuxtLink
    :to="`/dashboard/events/${props.event.id}`"
  >
    <div class="card card-compact w-full bg-base-100">
      <div class="card-body">
        <h2 class="card-title line-clamp-1">
          {{ props.event.name }}
        </h2>
        <p class="line-clamp-3">
          {{ props.event.description }}
        </p>
        <div class="card-actions">
          <div class="badge">
            {{ count }} votes
          </div>
        </div>
      </div>
    </div>
  </NuxtLink>
</template>

But this does not work and throws a Cannot read properties of undefined (reading 'event') error the moment I try to use the subscribe feature.

Is there a way to get those feature working or is this out of the scope of this module for now?

[amrnn90]

Try wrapping the subscription inside an onMounted hook:

let subscription;

onMounted(() => {
  subscription = supabase.from('user-votes').on('*', () => {
      refreshNuxtData('votes-count');
  }).subscribe();
})

Also make sure to unsubscribe on unmount:

onUnmounted(() => {
  supabase.removeSubscription(subscription);
});

And make sure you have turned on the Real Time API for your table.

[larbish]

Indeed ! Thanks !