The associated data from the list does not come to the content of the Proxy object of the model

Question

I use [email protected] , [email protected]

There is a workshift.js model

import DS from 'ember-data';

export default DS.Model.extend({
  date: DS.attr(),
  timestart: DS.attr(),
  timeend: DS.attr(),

  house: DS.belongsTo('house'),
  responsible: DS.belongsTo('employee'),

  employeeOnWorkshift: DS.hasMany('employee-on-workshift'),
});

There are employee-on-workshift.js model

import DS from 'ember-data';

export default DS.Model.extend({
  workshift: DS.belongsTo('workshift'),
  account: DS.belongsTo('account'),
  employee: DS.belongsTo('employee'),
});

and employee.js model

import DS from 'ember-data';

export default DS.Model.extend({
  fio: DS.attr(),
  age: DS.attr(),
  phone: DS.attr(),
  datebirth: DS.attr(),
  telegram: DS.attr(),

  user: DS.belongsTo('people'),
  employeeOnWorkshift: DS.hasMany('employee-on-workshift'),
});

In route, I unload all the workshift and their associated employeeOnWorkshift data as an array.

import Route from './base-route';
import RSVP from 'rsvp';

export default Route.extend({
  model(params) {
    return this.store.findRecord('workshift', params.id);
  },
  afterModel(models) {
    models.get('employeeOnWorkshift').forEach((employeeOnWorkshift) => {
      employeeOnWorkshift.get('employee');
      employeeOnWorkshift.get('employee.user');
    })
  }
});

Yes, I understand that loading additional models for each list item is a bad decision, but my goal is to figure out why the data is not displayed.

In the template, I'm just going through the model list and trying to get an employee.fio, but the data is empty

{{#each model.employeeOnWorkshift as |employeeOnWorkshift|}}
  {{employeeOnWorkshift.employee.fio}}
{{/each}}

Although in the browser on the network I can see how the data of each employee for the employeeOnWorkshift list has been loaded: Requests to the backend

I checked the model e employee in the console. The Proxy object is returned there, in which, as I understand it, if isPending = false and isSettled = true, the content parameter will be filled with the Model object, but even after receiving the data, this does not happen.

Proxy {isFulfilled: false, isRejected: false, content: null, _belongsToState: {…}, _super: ƒ, …}
[[Handler]]: Object
[[Target]]: Class
  content: null
  isFulfilled: false
  isRejected: false
  _belongsToState: {key: 'employee', store: Store, originatingInternalModel: InternalModel,   modelName: 'employee'}
  _super: ƒ ()
  Symbol(INIT_FACTORY): undefined
  Symbol(OWNER): undefined
  isPending: true
  isSettled: false
  isTruthy: false
  meta: (...)
  promise: (...)
  isDestroyed: (...)
  isDestroying: (...)
  _debugContainerKey: (...)
[[Prototype]]: Class
[[IsRevoked]]: false

Please tell me what I'm doing wrong, why employee is not unloaded without crutches of this format:

    models.get('employeeOnWorkshift').forEach((model) => {
      model.employee.then(function (employee) {
        model.employee = employee;
      });
    });

Answer 1

Your afterModel hook needs to await the fetches of the related records, otherwise they will not be present by the time you render initially.

async afterModel(model) {
  const workshifts = await model.employeeOnWorkshift;
  const employees = await Promise.all(workshifts.map((w) => w.employee));

  await Promise.all(employees.map((e) => e.user));  
}