Is it possible to use `ember-infinity` with `ember-concurrency`?

Is it possible to use ember-infinity with ember-concurrency (I am learning ember and javascript)?

I have the following code in my route:

import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';
import { isBlank } from '@ember/utils';
import { task, timeout } from 'ember-concurrency';

const DEBOUNCE_MS = 250;

export default Route.extend(AuthenticatedRouteMixin, {
  infinity: service(),

  actions: {
    doNothing() {
      return false;
    }
  },
  contactTask: task(function *(params) {
    if (isBlank(params)) { return []; }
    yield timeout(DEBOUNCE_MS);
    let contact = yield this.infinity.model('contact', params);
    return contact;
  }).restartable(),
  model(params) {
    /*
     * Copied from:
     * Replacing your Route models with Ember Concurrency Tasks:
     * https://medium.com/@AveryBloom/async-or-swim-replacing-your-route-models-with-ember-concurrency-tasks-5a230252893a
     * and:
     * Debounced Type-Ahead Search:
     * http://ember-concurrency.com/docs/examples/autocomplete
     */
    return {
      contact: this.get('contactTask').perform(params)
    };
  },
  queryParams: {
    criteria: {
      refreshModel: true
    }
  }

And this in my hbs file:

        {{#if model.contact.isRunning}}
            <tr valign="top">
              <td colspan="3">
                Loading contact list...
              </td>
            </tr>
        {{else}}
          {{#each model.contact.value as |contact|}}
            <tr valign="top">
              <td>
                {{#link-to "contact-detail" contact.id}}
                  {{contact.companyName}}
                {{/link-to}}
              </td>
              <td>
                {{#link-to "contact-detail" contact.id}}
                  {{contact.title}}
                  {{contact.firstName}}
                  {{contact.lastName}}
                {{/link-to}}
              </td>
              <td>
                {{#each contact.addresses as |address|}}
                  {{contact-address-in-a-table-cell address=address}}
                {{/each}}
              </td>
            </tr>
          {{/each}}
          <tr>
            <td colspan="3">
              {{infinity-loader
                infinityModel=model.contact
                loadingText='Loading records...'
                loadedText='All records loaded.'}}
            </td>
          </tr>
        {{/if}}

It is nearly working, but the infinity-loader never finishes loading and every request to the server is duplicated.

Any thoughts would be appreciated. Thank you.

[nickschot]

I’ve been using ember-infinity in a similar way recently. The pattern works really well. 👍for service based infinity models!

It’s not immediately clear from the README yet that this kind of stuff is possible. I’d say that’s mainly because the README only focusses on using infinity in the model hook.

Just to comment on the yield example for e-c, that’s just meant as a debounce so you don’t completely spam your API while typing.

[snewcomer]

@scottkidder @nickschot @pkimber I think ya’ll are onto something 😄. Would anybody like to put up a PR in the README/or paste a shortened version here to show what is possible with e-c and components? I think it would be useful to put this towards the top based on what ya’ll are saying!! Perhaps we will move the content to a wiki if it makes sense.

Separately, I’ll put up a PR to add navigation to various sections b/c scrolling through the whole README kinda is painful.