Function keepLatest

Example

when using RemoteData (or some other promise-based "eventually a value" resource), the value returned from the API is what's useful to see to users. But if the URL changes, the remote request will start anew, and isLoading becomes true, and the value is falsey until the request finishes. This can result in some flicker until the new request finishes.

To smooth that out, we can use [[keepLatest]]

 import { RemoteData } from 'reactiveweb/remote-data';
 import { keepLatest } from 'reactiveweb/keep-latest';
 import { use } from 'ember-resources';

 class A {
   @use request = RemoteData(() => 'some url');
   @use data = keepLatest({
     value: () => this.request.value,
     when: () => this.request.isLoading,
   });

   get result() {
     // after the initial request, this is always resolved
     return this.data;
   }
 }
Copy

To specify a default value, use an additional getter

 import { RemoteData } from 'reactiveweb/remote-data';
 import { keepLatest } from 'reactiveweb/keep-latest';
 import { use } from 'ember-resources';

 class A {
   @use request = RemoteData(() => 'some url');
   @use data = keepLatest({
     value: () => this.request.value,
     when: () => this.request.isLoading,
   });

   get latest() {
     // after the initial request, this is always resolved
     return this.data;
   }

   get result() {
     return this.latest ?? { default: 'value' };
   }
 }
Copy