Using synced observable and filters

[patrick91]

Hi there!

I'm trying to use the supabase plugin with a filter, like this:

export const useNotes = (contactId: string) => {
  const notes$ = observable({
    notes: customSynced({
      supabase,
      collection: 'notes',
      actions: ['read', 'create', 'update', 'delete'],
      realtime: true,
      filter: (from) => from.eq('contact_id', contactId),
      persist: {
        name: `notes-${contactId}`,
        retrySync: true,
      },
      retry: {
        infinite: true,
      },
    }),
    addNote: (note: Omit<TablesInsert<'notes'>, 'id'>) => {
      const id = generateId();
      const newNote = {
        ...note,
        id,
      };

      notes$.notes[id].assign(newNote);

      return newNote;
    },
  });

  return notes$;
};

I'm having some issue with this, but before I dig too deep, is this a correct way of using observable?

[patrick91]

The answer seems to be yes, but I needed to use useMemo 😊

I think there's still quite a bit of issue (potentially in my code), so I'll report back 😊

[jmeistrich]

Hi Patrick! If you're creating an observable within a hook you probably want to use useObservable. It does slightly more than just wrapping it in useMemo like deactivating it on unmount.

[patrick91]

ah awesome! I'll try that, thanks 😊