We have a RoomSchema where we add and remove objects from a collection (originally an ArraySchema).

Basically, on the server, we populate 10 Offers, which the client side handles just fine.

Then, every second, we randomly remove an offer on the server; if we have no more offers we stop the loop that removes the offers.

On the client side, as soon as we delete an offer in the ArraySchema, the onStateChange is triggered, but with an Empty Array for offers (offers.length always === 0)

I'm wondering why this is happening? Shouldn't the offers array simply sync and be one smaller?

We tried with delete, spice, and with SetSchema as well as MapSchema but any time we remove an entry, the room.onStateChange on the client always gives us back a zero sized array/map/set on the client.

export class RoomState extends Schema {
  @type('string') id: string;
  @type('boolean') isValidOffer: boolean;
  @type([OfferSchema]) offers: ArraySchema<OfferSchema> =
    new ArraySchema<OfferSchema>([]);
}

Room.ts:

const roomState = new RoomState();
this.room.setState(roomState).

for(let i=0; i < 10; i++) {
   roomState.offers.push(new Offer(....));
}

const loop = setInterval(()=> {  
  if(room.offers.length === 0) {
    clearInterval(loop);
    return;
 }
  const rIdx = random(0, room.offers.length);
  const objToDelete = room.offers[rIdx]
  room.offers.delete(objToDelete);
}, 1000)

ClientSide.ts (running in the browser)

this.room.onStateChange((state) => {
   console.log(state.offers.length)
});

First onStateChange, we see the expected 10 in the console log, but after the setInterval removes an entry the next browser console.log shows 0 for the room.state.offers.length.

Thank you, Jim