Overwriting query #2

adapters.person\.js

import RESTAdapter from '@ember-data/adapter/rest';
import { A as emberA } from '@ember/array';
import { later } from '@ember/runloop';

let count = 0;
let delay = 0;

export default RESTAdapter.extend({
  ajax(path, method, options) {    
    count++;
    
    // Alternate slow and fast requests.
    delay = (count % 2 === 0) ? 200 : 0;
    
    let results = people;
    
    if (options.data.q) {
      results = people.filter(person => {
         return person
           .name
           .toLowerCase()
           .indexOf(options.data.q.toLowerCase()) >= 0;
      });
    }
      
    return new Promise(resolve => {
      later(() => {
        resolve({ people: results });
      }, delay);
    });
  } 
})

let people = emberA([{
 id: '1',
 name: 'Alfred'
}, {
  id: '2',
  name: 'Ben'
}, {
  id: '3',
  name: 'Charlie'
}, {
   id: '4',
   name: 'Dominic'
}, {
  id: '5',
  name: 'Elliot'
}, {
   id: '6',
   name: 'Frank'
}, {
  id: '7',
  name: 'George'
}, {
  id: '8',
  name: 'Hayden'
}, {
  id: '9',
  name: 'Issac'
}, {
  id: '10',
  name: 'James'
}])

controllers.application\.js

import Controller from '@ember/controller';
import { tracked } from '@glimmer/tracking';

export default class ApplicationController extends Controller {
  queryParams = ['q'];

  @tracked q = '';
  @tracked people;
}

models.person\.js

import Model from 'ember-data/model';
import attr from 'ember-data/attr';

export default class extends Model {
  @attr name;
}

routes.application\.js

import Route from '@ember/routing/route';
import { inject } from '@ember/service';
import { action } from '@ember/object';
import { debounce, scheduleOnce } from '@ember/runloop';
import { timeout } from 'ember-concurrency';
import { task } from 'ember-concurrency-decorators';
import { defer } from 'rsvp';

export default class ApplicationRoute extends Route {
  @inject store;
  
  queryParams = {
    q: {
      refreshModel: true,
      replace: true
    },
  }

  beforeModel(transition) {
    super.beforeModel(...arguments);
    this.lastTransition = transition;
  }

  model(params) {
    return this.store.query('person', {
      q: params.q
    });
  }

  @action
  handleInputQuery({ target: { value } }) {
    console.log('got input value', value);
    
    this.search.perform(value);
  }
  
  @task({ restartable: true })
  *search(query) {
    this.lastTransition.abort();
    
    yield timeout(200);
    
    console.log('searching for', query);

    this.controller.q = query;   
  }
}

serializers.person\.js

import RESTSerializer from '@ember-data/serializer/rest';

export default RESTSerializer.extend({});

templates.application\.hbs

<p>
  The goal of this twiddle is to allow the user to enter a query to filter results displayed on screen.
</p>

<p>
  Thanks to Ember, this is as easy as updating the <code>q</code> query paramter along with the <code>refreshModel</code> setting.
</p>
<p>
  But if you introduce network latency, then stale model hooks can load, overwritting subsequent query attempts, thereby losing the user's input data.
</p>
<p>
  This problem is usually fixed by adding a guard that keeps count to check the ordering is right. Or by using something like Ember Concurrency. But these things aren't available to use in this scenario - without duplicating all the code and features that you get for free with Ember Routes (model loading, error handling, query strings etc)
</p>
<p>
  The <code>unbound</code> helper works around part of this issue, but is <a href="https://github.com/ember-template-lint/ember-template-lint/issues/708" target="_blank">denied</a> by ember template lint. Additonally it doesn't help if you actually <em>do</em> still need the value to be bound.
</p>
<p>
  To test, type slowly into the box below - characters will go missing.
</p>

<input
  value={{this.q}} 
  {{on "input" (route-action "handleInputQuery")}}
>

<ul>
  <li>
    <LinkTo @route="application" @query={{hash q="fred"}}>Run a query</LinkTo>
  </li>
  <li>
    <LinkTo @route="application" @query={{hash q=""}}>Clear query</LinkTo>
  </li>
</ul>

<br><br>

{{#each @model as |person|}}
  {{person.id}} - {{person.name}}<br>
{{/each}}

twiddle\.json

{
  "version": "0.17.0",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.17.0",
    "ember-template-compiler": "3.17.0",
    "ember-testing": "3.17.0"
  },
  "addons": {
    "@glimmer/component": "1.0.0",
    "ember-data": "3.16.2",
    "ember-route-action-helper": "2.0.8",
    "ember-concurrency": "1.1.7",
    "ember-concurrency-decorators": "1.0.0"
  }
}