Supabase Realtime detecting duplicates for the same event

Question

I have a simple page where I'm inserting a message into a message table and then on the frontend detecting it. I have used the sample code provided.

However, everytime, I seem to be detecting 3 events for every insert.

Any ideas?

mounted() {
    const channel = supabase.channel('messages');

    channel.on(
        'postgres_changes',
        {
            event: 'insert',
            schema: 'public',
            table: 'messages',                
        },
        (payload) => console.log('payload:', payload)
    );

    channel.subscribe(async (status) => {
        if (status === 'SUBSCRIBED') {                
        }
    });

    const res = await supabase.from('messages').insert({
                conversationSID: 'CH3165c39d3d784823af47039081fe7c47',
                messageSID: '4567',
                body: 'hi',
                source: 'SDK',
                author: 'John',
                patNum: 6,
                dateCreated: new Date()
            });
            console.log('inserted',res);
  },

Answer 1

The event parameter is set to '*', which means you're receiving notifications for all types of events, like insert, update, and delete for the table messages.

Try setting the event parameter to only listen for 'INSERT' events, which could help narrow down what you're receiving notifications for.

Another thing to keep in mind is that you're inserting data into the messages table within the subscribe method, which could be causing you to receive multiple notifications for each insertion. I suggest that you move the insertion code outside of the subscribe method, so it's only executed once.

This could help streamline things to isolate what could be causing the issue.

Answer 2

I don't know which framework you're using but in my case I think I had multiple subscriptions caused by useEffect(), and adding the right dependency fixed it. I guess it now reloads the component properly. Hope it'll help !

    let channel = null;

    useEffect(() => {
        if (!channel && user) {
            channel = supabase.channel('orders-changes')
                .on(
                    'postgres_changes',
                    {
                        event: 'INSERT',
                        schema: 'public',
                        table: 'orders',
                        filter: `employee_id=eq.${user.id}`,
                    },
                    (payload: any) => handleNewOrder(payload)
                )
                .on(
                    'postgres_changes',
                    {
                        event: 'UPDATE',
                        schema: 'public',
                        table: 'orders',
                        filter: `employee_id=eq.${user.id}`,
                    },
                    (payload: any) => handleNewOrder(payload)
                )
                .subscribe();
        }
    }, [user])

    const handleNewOrder = (payload: any) => console.log(payload)