diff --git a/ember-resources/src/util/remote-data.ts b/ember-resources/src/util/remote-data.ts index e9b1d3fa5..0f26d5848 100644 --- a/ember-resources/src/util/remote-data.ts +++ b/ember-resources/src/util/remote-data.ts @@ -26,12 +26,8 @@ class State { } /** - * Native [fetch][mdn-fetch] - * but with built-in [AbortController][mdn-abort-controller] - * - * [mdn-fetch]: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API - * [mdn-abort-controller]: https://developer.mozilla.org/en-US/docs/Web/API/AbortController - * + * Native [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) + * but with built-in [AbortController](https://developer.mozilla.org/en-US/docs/Web/API/AbortController) * * example with composition (maybe you want to implement your own version * that also wraps up authorization headers): @@ -48,6 +44,23 @@ class State { * ); * } * ``` + * + * The same example, but without `@use` + * + * ```js + * import { tracked } from '@glimmer/tracking'; + * import { resource } from 'ember-resources/util/function-resource'; + * import { remoteData } from 'ember-resources/util/remote-data'; + * + * class Demo { + * @tracked id = 1; + * + * myData = resource(this, (hooks) => + * remoteData(hooks, `https://...${this.id}`) + * ); + * } + * ``` + * */ export function remoteData({ on }: Hooks, url: string, options: FetchOptions = {}): State { let state = new State(); diff --git a/testing/ember-app/tests/utils/remote-data/js-test.ts b/testing/ember-app/tests/utils/remote-data/js-test.ts index b82aebc9d..5711927e8 100644 --- a/testing/ember-app/tests/utils/remote-data/js-test.ts +++ b/testing/ember-app/tests/utils/remote-data/js-test.ts @@ -187,6 +187,26 @@ module('Utils | remote-data | js', function (hooks) { assert.true(test.request.isResolved); }); + test('works without @use', async function (assert) { + class Test { + request = resource(this, (api) => remoteData(api, `/blogs/1`)); + } + + let test = new Test(); + + setOwner(test, this.owner); + + assert.strictEqual(test.request.value, null); + assert.true(test.request.isLoading); + assert.false(test.request.isError); + assert.false(test.request.isResolved); + await settled(); + assert.deepEqual(test.request.value, data[0]); + assert.false(test.request.isLoading); + assert.false(test.request.isError); + assert.true(test.request.isResolved); + }); + test('works with static options', async function (assert) { class Test { @use request = resource((api) =>