• 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>

    Type Parameters

    • T = unknown

    Parameters

    • url: string
    • Optional options: RequestInit

    Returns State<T>

  • 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);
    }

    Type Parameters

    • T = unknown

    Parameters

    • url: (() => string)
        • (): string
        • Returns string

    Returns State<T>

  • 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
    }));
    }

    Type Parameters

    • T = unknown

    Parameters

    • options: (() => {
          url: string;
      } & RequestInit)
        • (): {
              url: string;
          } & RequestInit
        • Returns {
              url: string;
          } & RequestInit

    Returns State<T>

Generated using TypeDoc