Function resource

resource is an alternative API to the class-based Resource. It provides a single read-only value and provides a way to optionally cleanup.

When would you reach for the class-based Resource?

• If you want to provide some api that has methods (so that you can manage binding, etc).
• If you want service injections

A function-resource

• must return a value.
• cannot, itself, be async - but can interact with promises and update a value

Example using fetch + AbortController

import { use, resource } from 'ember-resources';
import { TrackedObject } from 'tracked-built-ins';
import { tracked } from '@glimmer/tracking';

class Demo {
  @tracked url = '...';

  @use myData = resource(({ on }) => {
    let state = new TrackedObject({ ... });

    let controller = new AbortController();

    on.cleanup(() => controller.abort());

    // because this.url is tracked, anytime url changes,
    // this resource will re-run
    fetch(this.url, { signal: controller.signal })
      .then(response => response.json())
      .then(data => {
        state.value = data;
        // ...
      })
      .catch(error => {
        state.error = error;
        // ...
      });
    // Note that this fetch request could be written async by wrapping in an
    // immediately invoked async function, e.g: (async () => {})()


    return state;
  })
}

resource is an alternative API to the class-based Resource. It provides a single read-only value and provides a way to optionally cleanup.

When would you reach for the class-based Resource?

• If you want to provide some api that has methods (so that you can manage binding, etc).
• If you want service injections

A function-resource

• must return a value.
• cannot, itself, be async - but can interact with promises and update a value

Example using fetch + AbortController

import { resource } from 'ember-resources';
import { TrackedObject } from 'tracked-built-ins';
import { tracked } from '@glimmer/tracking';

class Demo {
  @tracked url = '...';

  myData = resource(this, ({ on }) => {
    let state = new TrackedObject({ isResolved: false, isLoading: true, isError: false });

    let controller = new AbortController();

    on.cleanup(() => controller.abort());

    // because this.url is tracked, anytime url changes,
    // this resource will re-run
    fetch(this.url, { signal: controller.signal })
      .then(response => response.json())
      .then(data => {
        state.value = data;
        state.isResolved = true;
        state.isLoading = false;
        state.isError = false;
      })
      .catch(error => {
        state.error = error;
        state.isResolved = true;
        state.isLoading = false;
        state.isError = true;
      });
    // Note that this fetch request could be written async by wrapping in an
    // immediately invoked async function, e.g: (async () => {})()


    return state;
  })
}