Side-loading data is inconsistent

Ember Data
1

I am side loading relationship data in a table in a component. There are two nested relationships, like this…

    <tbody>
      {{#each @customer.borrowerBorrowerRelationships as |relatedBorrower|}}
        {{#each relatedBorrower.borrowerAccountRelationships as |relatedAccount|}}
          <tr {{on "click" (fn this.getBorrower relatedBorrower.borrowerId)}} role="button">
            <td class="pull-right">{{relatedAccount.accountNumber}}</td>
            <td title="{{relatedBorrower.borrowerId}} - {{relatedBorrower.name}} - {{relatedAccount.borrowerType}} - {{relatedAccount.borrowerAccountStatus}}" class="pull-left">
              {{relatedBorrower.name}}
            </td>
            <td class="center">
              {{relatedAccount.borrowerType}}
            </td>
            <td class="center">{{relatedBorrower.language}}</td>
          </tr>
        {{/each}}
      {{else}}
        <tr>
          <td>NONE</td><td></td><td></td><td></td>
        </tr>
      {{/each}}
    </tbody>

The JSON looks like this. We are using RESTAdapter.

[{
	"id":279815
	,"name":"Aliquis Smith"

	...

	,"borrowerAccountRelationships":[186046]
	,"borrowerBorrowerRelationships":[279816]
	,"borrowerPhones":[440184]
	,"borrowerEmails":[66300]
	,"customerAddresses":[213544]
	,"skillsRequiredToCallBorrower":[9]
}]

Frequently this data will not load, even though there are key values in the relationship array, and the table will be blank. Reloading the page always results in a correct load.

This is the only place in the app, currently, where I am nesting relationship data.

I’m happy to provide more information.

Thanks.

2

Possible that the template is rendered before having the dataset. Try pushing the data to an ember array and use that in the template.

3

Thank you. I thought that was how side-loaded data was supposed to work. The template renders and then the data fills in as the relationships are retrieved and loaded.

4

It is. When you say side-loaded though do you mean that the relationship data is in the same API payload? Or do you mean lazy-loaded via additional requests? Are the relationships defined as async (default) or sync?

What do your models look like?

5

Here are the models. Thanks for your help.

Update: The relationship data is being lazy-loaded. The relationship ids are being returned in an array with the customer data.

Customer model

import Model, { attr, belongsTo, hasMany } from '@ember-data/model';
import { computed } from '@ember/object';

export default class CustomerModel extends Model {
  @attr borrowerId;
  @attr legalName;

...

  @belongsTo("collection-queue") conciergeQueue;

  @hasMany("borrower-account") borrowerAccountRelationships;
  @hasMany("customer",{inverse: null}) borrowerBorrowerRelationships;
  @hasMany("action") recentActions;
  @hasMany("borrower-phone") borrowerPhones;
  @hasMany("borrower-email") borrowerEmails;
  @hasMany("customer-address") customerAddresses;
  @hasMany("skill") skillsRequiredToCallBorrower;

}

Borrower Account model

import AccountModel from "./account";
import {attr, belongsTo} from '@ember-data/model';
import {computed} from '@ember/object';

export default class BorrowerAccountModel extends AccountModel {

  @attr borrowerAccountId;
  @belongsTo("customer") borrowerId;
  @attr customerId;
  @attr borrowerTypeId;

...

  @attr lienPosition;
  @attr collectibleAccountNumber;

}

[Note: there is no semantic difference between a borrower and a customer. There is a gradual refactor going on that is replacing borrower with customer.]

6

Hmmmm nothing is jumping out. Are the requests for the related records made correctly? The way I typically debug this sort of thing is:

  • check that the requests for the related data are made properly
  • inspect the “primary” record and look at its relationships (in ember inspector/console)
  • looking at the contents of the store to see if the related records are there (assuming the requests look fine in bullet 1) and look right

you could also try throwing {{log relatedBorrower}} and {{log relatedAccount}} in the first and second “each” loop respectively to see if they’re being “executed”. You could also throw some debug logs in for the @customer model and the relationship statuses (which would tell you if the relationships are pending or have been loaded, and if loaded and they don’t have a length then you know where to look next)

this part is suspicious to me… do you have any idea what circumstances lead to the data not being loaded/shown? if reloading always works, is there some situation where it always breaks? That might be a good place to start investigating as well.

7

Thanks, much. I’ll try the logging. So far, no, I have not found a way to make it fail. The logging should help. (I actually did not know about {{log …}}.) That will be a great help.

8

To close this out, I never did get the nested side-loaded data to work 100% of the time. It worked about 90% of the time in production and 99% of the time in development.

Instead, I’m loading the data directly in the route now. It’s cleaner and more transparent, anyway.

Thank you for your help, dknutsen.

1 Like
9

Maybe you want to have a look at ember-async-data and this corresponding article async-data-and-autotracking-in-ember-octane It deals with async data load within Templates in general and side-loading data.

1 Like