Supabase / SyncedCrud - select only specific records - what pattern to use?

[ryanengland]

Hi all!

I can't thank you enough for putting this library together. I'm seeing SIGNIFICANT improvements to a React Native mobile app we're working on - it's so much more powerful than our custom-coded sync engine.

I have a question around row selection. We have several huge databases in Supabase - collections like "places" (> 500,000 rows) "destinations" (>1,000,000 records). Obviously, I can't sync all of these to the device, so I need to allow the user to select specific ones. I'd like to do this in a way that keeps sync, uses local persistence and enables subscribing to realtime.

I'm currently doing this with:

export const getPlace = (placeId: string) => {
    return observable(
        syncedSupabase({
            supabase,
            collection: 'places',
            as: 'value',
            actions: ['read'],
            filter: select => select.eq('id', placeId),
            persist: {
                plugin: observablePersistAsyncStorage({
                    AsyncStorage,
                }),
                name: `place-${placeId}`,
                retrySync: true,
            },
            realtime: {
                schema: 'public',
                filter: `id=eq.${placeId}`, // Filter for realtime updates
            },
            retry: {
                infinite: true,
            },
            onError: (error, params) => {
                console.error('[legend-state] Place error:', error, params);
            },
        }),
    );
};

And then in my component, I'm calling (inside an observer) with const place$ = useMemo(() => getPlace(placeId), [placeId]);

This correctly establishes the connection, syncs the data, and connects to realtime. Changes sync to the device, and everything works lovely.

However, I have one issue with this pattern: when the component is unmounted, the realtime unsubscribe doesn't call, resulting in leaving the realtime connection open. Obviously, over time, when interacting with many places, many open realtime streams are opened, which saturates the available open channels on Supabase.

Perhaps I could use the subscribe function within a useEffect, or some sort of similar manual unsubscribe, but I wanted to check my logic / thinking about the way this is setup in the first place - is there a better way to do this instead of using useMemo or a factory function?

Unfortunately, I can't use RLS to scope places to only those relevant to the user, as users need the ability to search the entire collection of places / hotels / destinations.

Thanks everyone for your help on this!