remote-data.md

RemoteData

RemoteData is a utility Resource from ember-resources that provides an easy way to interact with fetch with a pre-wired AbortController.

In this example, the fetching of data from the StarWars API occurs automatically based on changes to the URL. You may change the id of the Person to fetch from the StarWars API.

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { on } from '@ember/modifier';

import { RemoteData } from 'reactiveweb/remote-data';

const urlFor = (id) => `https://swapi.tech/api/people/${id}`;

const Person = <template>
  {{#let (RemoteData (urlFor @id)) as |request|}}
    {{#if request.isLoading}}
      ... loading {{@id}} ...
    {{else if request.value}}
      {{request.value.result.properties.name}}
    {{/if}}
  {{/let}}
</template>

export default class Demo extends Component {
  @tracked id = 51;
  updateId = (event) => this.id = event.target.value;

  <template>
    <div class="border p-4 grid gap-4">
        <Person @id={{this.id}} />

        <label>
            Person ID
            <input
                type='number'
                class='border px-3 py-2'
                value={{this.id}}
                {{on 'input' this.updateId}}>
        </label>
    </div>
  </template>
}

Docs for RemoteData can be found here. Information about how Resources fit in to the next edition of Ember can be found here