How to properly use nullable/optional values in Dexie JS?

I apologize if the title is a little vague as it's hard to explain in only one short sentence, but here's what I'm trying to do:

In Angular 17 with DexieJS, I have the following object:

export interface IView {
x?: number,
y?: number,
z?: number,
id: string,
name?: string,
}


The coordinates and the name are optional because although I will need them, they're not accessible from every part of the application.

For the database, I have the following:

export class MyDB extends Dexie {
viewDatabase!: Table<IView, string>;
constructor() {
super('database');
this.version(1).stores({
viewDatabase: 'id',
});
}
}
export const db = new MyDB();


And I have the following get/set functions in another class:

async getView(id: string) {
return db.viewDatabase
.where('id')
.equals(id)
.first((data) => {
return data;
});
}

async addOrUpdateView(view: IView) {
return db.viewDatabase.put(view);
}


And finally, this is what I'm trying to achieve:

Because some of the values in iView are optional, I want the database to not overwrite those values with undefined/null if a value passed in doesn't have all of them. Instead, I want it to detect if there's already values in there for the optional variables, and if so, just keep them and add the new stuff on top. I.e, if I initialize the following into the database:

{
x: 1,
y: 2,
z: 3,
id: '109210abc',
name: 'test'
}


And then later I push the following value to the database, which has the same id (because I want to overwrite the values):

{
x: 5,
id: '109210abc',
name: 'test_updated'
}


I want the database to keep the original values for y and z because they were not changed. I don't want them to automatically get set to undefined or null. I only want x and the name to change since those are the only values that changed.

I understand I could do this manually by reading the database first, grabbing what's in there, and then making a new value composed of both old and new data, but this is really tedious, especially in a large program where you may have to wait for the database to respond. Is there a way to do this automatically or at least more efficiently?

In the current program, it's not working correctly because the optional values just keep getting removed/reset if they're not defined when I save the value. I'm looking for a solution that allows me to keep the values as optional, if possible.

Continue reading...