Vuex ORM models dependency cycle

Question

In the store, I have two related models: Company and User

User

import { Model } from '@vuex-orm/core';
import { Company } from './models';

export class User extends Model {
  static entity = 'users';
  static fields() {
    return {
      company: this.belongsTo(Company, 'company_id'),
    };
  }
}
export default User;

Company

import { Model } from '@vuex-orm/core';
import { User } from './models';

export class Company extends Model {
  // This is the name used as module name of the Vuex Store.
  static entity = 'companies';
  static fields() {
    return {
      account_manager: this.belongsTo(User, 'account_manager_id'),
    };
  }
}
export default Company;

To avoid dependency cycle, I closely followed the solution from https://vuex-orm.org/guide/model/single-table-inheritance.html#solution-how-to-break-cycles and import Company and User into models.js

Models

export * from './company';
export * from './user';

Yet I still get the dependency cycle error from the linter.

I run out of ideas.

Code sample: https://github.com/mareksmakosz/vuex-orm-dependency-cycle

Answer 1

This is just ESLint enforcing the rule, you can't avoid it if you're using airbnb. Consider eslint:recommended if it's truly a pain.

Alternatively, if you want to keep airbnb and your models separated, I suggest dropping the imports and define your relations using entity as a string.

this.belongsTo('companies', 'company_id')
this.belongsTo('users', 'account_manager_id')