Function RemoteData

Note

This is not a core part of ember-resources, but is an example utility to demonstrate a concept when authoring your own resources. However, this utility is still under the broader library's SemVer policy. A consuming app will not pay for the bytes of this utility unless imported.

json-based remote data utility.

this API mimics the API of fetch, and will give you a reactive [[State]] object, but won't be able to re-fetch when the url or options change

import { tracked } from '@glimmer/tracking';
import { use } from 'ember-resources';
import { RemoteData } from 'ember-resources/util/remote-data';

class Demo {
  @use myData = RemoteData(`https://some.domain.io`);

  @use withOptions = RemoteData(`https://some.domain.io`, {
    headers: {
      Authorization: 'Bearer <token>'
    }
  });
}

In strict mode with <template>

import { RemoteData } from 'ember-resources/util/remote-data';

const options = (token) => ({
  headers: {
    Authorization: `Bearer ${token}`
  }
});

<template>
 {{#let (RemoteData "https://some.domain" (options "my-token")) as |state|}}
   {{state.isLoading}}
   {{state.value}}
 {{/let}}
</template>

json-based remote data utility

For a reactive URL (causing the underlying fetch to re-run when the URL changes), the url must be the return value from a function passed to RemoteData.

import { tracked } from '@glimmer/tracking';
import { use } from 'ember-resources';
import { RemoteData } from 'ember-resources/util/remote-data';

class Demo {
  @tracked url = 'https:// .... '

  @use myData = RemoteData(() => this.url);
}

json-based remote data utility

When you want the remote data request to re-fetch when either the URL or FetchOptions change, the url becomes a property on the object returned from the thunk.

import { tracked } from '@glimmer/tracking';
import { use } from 'ember-resources';
import { RemoteData } from 'ember-resources/util/remote-data';

class Demo {
  @tracked id = 2;
  @tracked postData = '';

  @use myData = RemoteData(() => ({
    url: `https://this.some.domain/${this.id}`,
    method: 'POST',
    body: this.postData
  }));
}