Optional properties in types.model

[Sindr0me]

const ConditionalItems = types.array(types.model({
  install_date_since: types.string,
  campaign_like: types.string,
  campaign_in: types.maybeNull(ArrayOrString),
  campaign_not_like: types.maybeNull(types.string),
  adset_like: types.maybeNull(types.string),
  adset_in: types.maybeNull(ArrayOrString),
  adset_not_like: types.maybeNull(types.string),
}));

I need to make model with this options like interface in TS where properties can be optional.
I could use a types.frozen to create an observable object that might change the amount of keys that could contain (sometimes, depending on the API response, I could get 1, 3, 5 of those keys) but its not good decision to use types.frozen. How to do it properly?

[Ghirigoro]

@Sindr0me types.maybe seems to get you what you want. It allows undefined or an instance of the type you want. E.g.:

const ConditionalItems = types.array(types.model({
  install_date_since: types.string,
  campaign_like: types.string,
  campaign_in: types.maybe(types.union(types.array, types.string)),
  campaign_not_like: types.maybe(types.string),
  adset_like: types.maybe(types.string),
  adset_in: types.maybe(types.union(types.array, types.string)),
  adset_not_like: types.maybe(types.string),
}));

[Sindr0me]

adset_in: undefined
adset_like: undefined
adset_not_like: undefined
campaign_in: undefined
campaign_like: "exp-ab"
campaign_not_like: undefined
install_date_since: undefined

That the result on strore init.
I did the same solution, but its not the result that i want.

campaign_like: "exp-ab"

I want the result like this. If i dont have prop values, i just dont need the prop in object (dont need undefined assigment). But i didnt find the way how to do that.

[Ghirigoro]

If what you're concerned with is the snapshot your model produces you can use a snapshotProcessor to eliminate any undefined properties:

const ConditionalItem = types.snapshotProcessor(
  types.model("ConditionalItem", {
    a: types.maybe(types.string),
    b: types.maybe(types.number),
  }),
  {
    preProcessor: (snap) => snap,
    postProcessor: (snap) =>
      Object.entries(snap).reduce((p, [key, value]) => {
        if (value !== undefined) {
          p[key] = value;
        }
        return p;
      }, {}),
  }
);

const item = ConditionalItem.create({ a: "test" });
console.log(getSnapshot(item)); // { a: "test" }

[Sindr0me]

That looks good, thank you! MST has a so rich API

[Sindr0me]

If what you're concerned with is the snapshot your model produces you can use a snapshotProcessor to eliminate any undefined properties:

const ConditionalItem = types.snapshotProcessor(
  types.model("ConditionalItem", {
    a: types.maybe(types.string),
    b: types.maybe(types.number),
  }),
  {
    preProcessor: (snap) => snap,
    postProcessor: (snap) =>
      Object.entries(snap).reduce((p, [key, value]) => {
        if (value !== undefined) {
          p[key] = value;
        }
        return p;
      }, {}),
  }
);

const item = ConditionalItem.create({ a: "test" });
console.log(getSnapshot(item)); // { a: "test" }

That is the answer and possible way to do it