Merge pull request #481 from NullVoxPopuli/document-remote-data-witho…

…ut-use chore(docs): demonstrate remoteData without @use
NullVoxPopuli · May 14, 2022 · e374ac0 · e374ac0
2 parents 79a7fca + 7de1cc4
commit e374ac0
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 6 deletions.
diff --git 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
@@ -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) =>