How to filter realtime rows

[kachar]

Is there a way to filter the records and show only a fraction of them using useRealtime hook

Scenario:

I've got tables groups and items where each item belongs to a single group

create table public.groups (
  id uuid primary key default uuid_generate_v4(),
  name text
);

create table public.items (
  id uuid primary key default uuid_generate_v4(),
  group_id uuid not null references public.groups on delete cascade,
  name text
);

create index item_group_id_idx on items (group_id);

alter publication supabase_realtime add table items;

Each group gets their own url and want to show previous records and update as new records are inserted in the items table in the given group.

The current behavior is that I get all items from all groups in the response

const [{ data, error, fetching }] = useRealtime<Item>(
  'items',
  (data, payload) => data.id === payload.id,
)

[tmm]

Correct, currently you cannot filter. Could add a filter option that is passed through to the internal useSelect.

The challenge with that is it will filter the initially fetched data, but not the real-time updates since Supabase doesn't provide a method for filtering the events.

Right now, I recommend filtering client-side after data is fetched or compose your own hook with useSelect and useSubscription.

[kachar]

Actually the compareFn is only used in the subscription reducer action type and never in fetch, which makes it more or less part of the subscription defaults.

export type UseRealtimeConfig<Data = any> = {
    select?: UseSelectConfig<Data>
    subscription?: UseSubscriptionConfig & { compareFn?: UseRealtimeCompareFn<Data> }
}

const [{ data, error, fetching }] =  useRealtime('items', { 
    select: { 
        filter: (query) => query.eq('status', 'completed'),
    },
    subscription: {
        event: 'INSERT', 
        compareFn: (a, b) => a.id === b.id,
    }
})

[tmm]

This looks good, but what happens if you want to add another compare function for another event type?

Let's think about this more. I think you are onto something though.

I'm okay releasing a breaking change at this point if it improves the API because the library isn't super popular yet.

[kachar]

what happens if you want to add another compare function for another event type?

The user may have multiple useRealtime hooks for different events within the same component.

const [{ dataInsert }] =  useRealtime('items', {
    subscription: {
        event: 'INSERT', 
        compareFn: (a, b) => a.id === b.id,
    }
})
const [{ dataDelete }] =  useRealtime('items', {
    subscription: {
        event: 'DELETE', 
        compareFn: (a, b) => a.deleted === b.deleted,
    }
})

[tmm]

Got it. It seems like this is starting to look similar to useSubscription in its current form:

useSubscription(
  (payload) => {
    console.log('Change received!', payload)
  },
  {
    event: 'INSERT',
    table: 'items',
  },
)

Another approach could be making the compare function either a function:

const [result, reexecute] = useRealtime(
  'items',
  (data, payload) => data.username === payload.username,
)

Or object:

const [result, reexecute] = useRealtime(
  'items',
  {
    delete: (data, payload) => data.deleted === payload.deleted,
    insert: (data, payload) => data.id === payload.id,
    update: (data, payload) => data.username === payload.username,
  },
)

What do you think about this approach?

[kachar]

@tmm After taking some time off the problem I came up with a more elegant solution by providing either the table name or useSelect options with a table name as first argument of useRealtime

You might find the PR at #21

const [result, reexecute] = useRealtime('todos')

// or

const [result, reexecute] = useRealtime(
  {
    table: 'todos',
    columns: 'id, username, description',
    filter: (query) => query.eq('completed', false),
  },
  (data, payload) => data.username === payload.username,
)

In this way we don't break backward compatability and still support the quick way of defining the table argument