Cannot read properties of null (reading 'indexOf') on getRelatedRecords function

[AMontagu]

Describe the bug

/!\ this only happen in production environment and not in development.

I have a Customers and an Invoices page. When both load well when going to it directly. But when I load Customers then Invoices and then go back to Customers this exception happen:

/!\ the issue only happen if customers was load first. If we load invoice then customers it work. But if we load Invoices -> Customers -> Invoices -> Customers it fail again.

vue.runtime.esm.js:1897 TypeError: Cannot read properties of null (reading 'indexOf')
    at vuex-orm.esm.js:1749:22
    at Map.forEach (<anonymous>)
    at Ye.getRelatedRecords (vuex-orm.esm.js:1748:19)
    at vuex-orm.esm.js:1730:34
    at Array.forEach (<anonymous>)
    at Ye.load (vuex-orm.esm.js:1729:20)
    at Function.eagerLoadRelations (vuex-orm.esm.js:4059:26)
    at nr.collect (vuex-orm.esm.js:4757:20)
    at nr.get (vuex-orm.esm.js:4383:21)
    at s.customers (Customers.vue:66:1)

With getRelatedRecords (on vuex-orm librabry) is:

getRelatedRecords(relations, keys) {
        const records = [];
        relations.forEach((record, id) => {
            if (keys.indexOf(id) !== -1) {
                records.push(record);
            }
        });
        return records;
    }

Steps to reproduce the bug

1. Define models [...]

export default class Customer extends Model {
  static entity = "customer";

  static primaryKey = "uuid";

  static fields() {
    return {
      uuid: this.uid(""),
      createdAt: this.attr(null),
      updatedAt: this.attr(null),
      firstName: this.string(),
      lastName: this.string(),
      email: this.string(),
      postalCode: this.string(),
      vendorsList: this.attr(null),
      vendorsObjList: this.hasManyBy(Vendor, "vendorsList"),
      enabled: this.boolean(true),
    };
  }
}

export default class Invoice extends Model {
  static entity = "invoice";

  static primaryKey = "uuid";

  static fields() {
    return {
      uuid: this.uid(""),
      createdAt: this.attr(null),
      updatedAt: this.attr(null),
      totalPrice: this.number(0),
      dateStart: this.attr(null),
      dateEnd: this.attr(null),
      vendor: this.uid(null).nullable(),
      customer: this.uid(null).nullable(),
      vendorObj: this.belongsTo(Vendor, "vendor", "uuid"),
      customerObj: this.belongsTo(Customer, "customer", "uuid"),
    };
  }
}

2. Create data [...]

...

3. Retrieve data [...]

In Customers.vue:

  computed: {
    customers() {
      return Customer.query()
        .where("enabled", this.form.enabled)
        .withAll()
        .get();
    },
}

In Invocies.vue:

  computed: {
    invoices() {
      return Invoice.query().withAll().get();
    },
  },

4. See error:

vue.runtime.esm.js:1897 TypeError: Cannot read properties of null (reading 'indexOf')
    at vuex-orm.esm.js:1749:22
    at Map.forEach (<anonymous>)
    at Ye.getRelatedRecords (vuex-orm.esm.js:1748:19)
    at vuex-orm.esm.js:1730:34
    at Array.forEach (<anonymous>)
    at Ye.load (vuex-orm.esm.js:1729:20)
    at Function.eagerLoadRelations (vuex-orm.esm.js:4059:26)
    at nr.collect (vuex-orm.esm.js:4757:20)
    at nr.get (vuex-orm.esm.js:4383:21)
    at s.customers (Customers.vue:66:1)

Expected behaviour

Expected to retrieve the customer list without issue.

Versions

• Vuex ORM: 0.36.4
• Vue: 2.6.11

Additional context

Will try to clean all the data in the store before loading customers again as a try to quickfix. But as I need a deployment it will be at the end of the day. Will let you know if a deleteAll before querying again fix it.

[AMontagu]

Okay it appear logical that the issue come when I insert Invoice with customer data that do not have the relations keys.
Indeed Deleting all the customer in the created method work.

What about handling this error with a message of ignoring item that do not have the relation data ?

In my case I deleted the data but not at component creation but just before inserting new ones so the computed reacted before the deletion.