Cant we put a ember concurrency task in glimmer component getter, which is tracking the components arguments

Question

-- when an ember concurrency task is called glimmer components getter then it runs in infinite loop.

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { inject as service } from '@ember/service';
import { task } from 'ember-concurrency';

export default class UserTableComponent extends Component {
  @service store;
  @tracked users;

  get taskStatus() {
    let params = {
      'account_id':this.args.account,
      'page':this.args.page
    }
    this.getUsersTask.perform(params);

  }


  @task(function*(params) {
      let recordsWithMeta = yield this.store.query('user', params);
      this.users= recordsWithMeta.toArray();
    }) getUsersTask;

}

user-table.hbs

<table>
  <thead>
    <tr>
      <th>
        <div class="first">Name</div>
      </th>
    </tr>
  </thead>
  <tbody>
    {{#if this.taskStatus.isRunning}}
    <tr>
      <td >
        <div class="h-64">
          {{ui-kit/loader}}
        </div>
      </td>
    </tr>
    {{else}}
    {{#each @users as |user|}}

    {{/each}}
    {{/if}}
  </tbody>
</table>

Above component is called somewhere in template and passing account and page dynamic.

<UserTable 
  @account={{this.account}}
  @page={{this.page}}
  >          
</UserTable>

Note: it runs in infinite loop.

I couldn't get this. Are you calling `taskStatus` from the template? And actually `taskStatus` is a getter but not returning anything? — ykaragol, May 14 '19 at 15:56
@ykaragol yes it is used in template and it's return the task. just updated post — kdhayal, May 15 '19 at 10:59

score 0 · Answer 1 · answered May 16 '19 at 08:04

I've found two things to change. But not sure if they will be enough to make it work.

First point,

{{#each @users as |user|}} is equivalent to this.args.users. But users array is defined on the component. So it has to be changed to {{#each this.users as |user|}}

Second point,

taskStatus is not returning anything. So {{#if this.taskStatus.isRunning}} will be false every time. The correct check would be {{#if this.getUsersTask.isRunning}}, because isRunning is a property of the task.
But when you changed to {{#if this.getUsersTask.isRunning}}, it will not work since no one triggering getUserTask. I think you can initiate that task in one of lifecycle hooks (such as didInsertElement).

Cant we put a ember concurrency task in glimmer component getter, which is tracking the components arguments

1 Answers1