diff --git a/docs/ember-data/models.md b/docs/ember-data/models.md index 23d2e598a..d8f9bacd3 100644 --- a/docs/ember-data/models.md +++ b/docs/ember-data/models.md @@ -58,7 +58,17 @@ export default class User extends Model { } ``` -## `@belongsTo` +## Relationships + +Relationships between models in Ember Data rely on importing the related models, like `import User from './user';`. This, naturally, can cause a recursive loop, as `/app/models/post.ts` imports `User` from `/app/models/user.ts`, and `/app/models/user.ts` imports `Post` from `/app/models/post.ts`. Recursive importing triggers an [`import/no-cycle`](https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/no-cycle.md) error from eslint. + +To avoid these errors, use of [type-only imports](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html), available since TypeScript 3.8: + +```ts +import type User from './user'; +``` + +### `@belongsTo` The type returned by the `@hasMany` decorator depends on whether the relationship is `{ async: true }` \(which it is by default\). @@ -70,8 +80,8 @@ So, for example, you might define a class like this: ```typescript import Model, { belongsTo } from '@ember-data/model'; import DS from 'ember-data'; // NOTE: this is a workaround, see discussion below! -import User from './user'; -import Site from './site'; +import type User from './user'; +import type Site from './site'; export default class Post extends Model { @belongsTo('user') @@ -89,7 +99,7 @@ These are _type_-safe to define as always present, that is to leave off the `?` Note, however, that this type-safety is not a guarantee of there being no runtime error: you still need to uphold the contract for non-async relationships \(that is: loading the data first, or side-loading it with the request\) to avoid throwing an error! -## `@hasMany` +### `@hasMany` The type returned by the `@hasMany` decorator depends on whether the relationship is `{ async: true }` \(which it is by default\). @@ -102,8 +112,8 @@ So, for example, you might define a class like this: import Model, { hasMany } from '@ember-data/model'; import EmberArray from '@ember/array'; import DS from 'ember-data'; // NOTE: this is a workaround, see discussion below! -import Comment from './comment'; -import User from './user'; +import type Comment from './comment'; +import type User from './user'; export default class Thread extends Model { @hasMany('comment')