Issue with LegendState and Supabase Sync for Arrays Across Multiple Devices

[juanmigdr]

Description:

Hello team, thank you so much for this amazing library which I am loving to develop with.

I have Supabase and LegendState set up in my project, and everything is working fine until I noticed an issue when handling arrays across multiple devices.

Issue

I have a table with a column of type TEXT[], and I modify it using LegendState. The state is correctly updated locally and in the database. However, when I have two devices open:

• Adding an item to the array updates correctly on both devices.
• Removing an item from the array updates correctly in the database and on the first device’s local storage, and the second device receives the event (I have verified this), but the array is not updated on the second device.
• The array only updates correctly on all devices when it becomes empty (i.e., when the last item is removed).

Table Schema

CREATE TABLE oposiciones (
  id text not null,
  user_id uuid,
  titulo text not null,
  organismo TEXT NOT NULL,
  ubicacion TEXT NOT NULL,
  grupo TEXT NOT NULL,
  exam_ids TEXT[] NOT NULL,
  created_at timestamptz default now() not null,
  updated_at timestamptz default now() not null,
  deleted boolean default false,
  PRIMARY KEY (id, user_id)
);

LegendState Setup & Functions

import { observable } from "@legendapp/state";
import { customSynced, supabase, generateId } from "../utils/SupaLegend";

export const oposiciones$ = observable(
  customSynced({
    supabase,
    initial: {},
    collection: "oposiciones",
    select: (from) =>
      from.select(
        "id,user_id,titulo,organismo,ubicacion,grupo,exam_ids,created_at,updated_at,deleted"
      ),
    actions: ["read", "create", "update", "delete"],
    realtime: true,
    persist: {
      name: "oposiciones",
      retrySync: true,
    },
    retry: {
      infinite: true,
    },
    onSaved(params) {
      console.log("savedOpo");
    },
    onError(error, params) {
      console.error(error);
    },
  })
);

export const addExam = (oposicionId: string) => {
  const oposicion = oposiciones$[oposicionId].get();
  if (oposicion) {
    const examId = generateId();
    oposiciones$[oposicionId].exam_ids.push(examId);
  }
};

export const removeExam = (oposicionId: string, examId: string) => {
  const oposicion = oposiciones$[oposicionId].get();
  if (oposicion) {
    oposiciones$[oposicionId].exam_ids.set(
      oposicion.exam_ids.filter((id) => id !== examId)
    );
  }
};

export const reorderExams = (oposicionId: string, from: number, to: number) => {
  const oposicion = oposiciones$[oposicionId].get();
  if (oposicion) {
    const newData = [...oposiciones$[oposicionId].exam_ids.get()];
    newData.splice(to, 0, newData.splice(from, 1)[0]);
    oposiciones$[oposicionId].exam_ids.set(newData);
  }
};

Expected Behavior

• When removing an item from the exam_ids array on one device, the update should be reflected on all devices.

Actual Behavior

• The update is saved correctly in the database.
• The update is reflected locally on the first device.
• The second device receives the update event but does not update the array unless it is emptied completely.

Steps to Reproduce

1. Open the app on two devices.
2. Add an item to the exam_ids array → Works correctly on both devices.
3. Remove an item from the exam_ids array on Device 1.
4. Check Device 2:
   • It receives the update event but does not update the array.
   • If all items are removed, then the update is reflected correctly.

Additional Notes

• The issue only happens with removals, not additions.
• I have verified that Device 2 receives the real-time update event, so the issue is likely related to how LegendState processes array modifications.

Would really appreciate your help in understanding if this is a bug or if I am missing something!

Thanks again for this amazing library! 🙌

cc @jmeistrich