Maximum call stack exceeded in unlisten when there are models with bi-directional relationships

[geeosh]

I'm really enjoying using Spraypaint (currently in React, and potentially next in React Native).

I am getting an uncaught RangeError: Maximum call stack size exceeded when model instances are trying to unlisten. I have model syncing turned on:

ApplicationRecord.sync = true

I have two models, Course and Group. A course belongs to a group, and a group has many courses.

const Course = ApplicationRecord.extend({
  static: {
    jsonapiType: 'courses',
  },
  attrs: {
    name: attr(),
    group: belongsTo(),
  }
})

const Group = ApplicationRecord.extend({
  static: {
    jsonapiType: 'groups',
  },
  attrs: {
    name: attr(),
    courses: hasMany(),
  }
})

I am loading both from the API:

Group.includes({ courses: 'group' }).find(123)

I get the RangeError: Maximum call stack size exceeded when the .unlisten method is called on all instances. Those models are recursively checking their relationships and are getting stuck in a loop when traversing from Group -> Course -> Group -> Course -> etc.

It hits the exception on model.ts line 548:

Object.keys(this.relationships).forEach(k => {
  let related = this.relationships[k]

  if (related) {
    if (Array.isArray(related)) {  // <-- Exception happens here
      related.forEach(r => r.unlisten())
    } else {
      related.unlisten()
    }
  }
})

Let me know if this is a known issue or you need any other documentation! Thanks.

I'm Running:

Spraypaint v0.10.23
React v16.13.1
Node v14.4.0

[benlieb]

@geeosh sorry not related to your question, but how do you set your spraypaint models up so that React can "react" to changes to them?