ember-data-resources
v5.2.1
Published
Resource helpers for reactively (re)fetching data with ember-data
Downloads
6,462
Readme
ember-data-resources
Resources for reactive data fetching with ember-data's store
service.
Compatibility
- ember-source v3.28 or above
- ember-data v3.28 or above
- ember-auto-import v2 or above
- ember-resources v5.3 or above
- typescript v4.8 or above
Installation
npm add ember-data-resources
Usage
findAll
import { findAll } from 'ember-data-resources';
export default class MyComponent extends Component {
@tracked included = '';
blog = findAll(this, 'blog', () => ({ included: this.included }));
// blog = findAll(this, 'blog');
}
Available properties:
- {{this.blog.records}}
- {{this.blog.error}}
- {{this.blog.isLoading}}
- {{this.blog.isSuccess}}
- {{this.blog.isError}}
- {{this.blog.hasRan}}
Available methods:
- <button {{on 'click' this.blog.retry}}>Retry</button>
in a template
{{#let (find-all 'blog') as |blogs|}}
{{#if blogs.isLoading}}
...
{{else if blogs.isError}}
{{blogs.error}}
{{else}}
{{blogs.records}}
{{/if}}
Available properties:
- {{blog.records}}
- {{blog.error}}
- {{blog.isLoading}}
- {{blog.isSuccess}}
- {{blog.isError}}
- {{blog.hasRan}}
Available methods:
- <button {{on 'click' blog.retry}}>Retry</button>
{{/let}}
in strict mode
See: First-class Component Templates
import { FindAll } from 'ember-data-resources';
<template>
{{#let (FindAll 'blog') as |blogs|}}
...
{{/let}}
</template>
findRecord
import { findRecord } from 'ember-data-resources';
export default class MyComponent extends Component {
@tracked id = 1;
blog = findRecord(this, 'blog', () => this.id)
// blog = findRecord(this, 'blog', () => [this.id])
// blog = findRecord(this, 'blog', () => [this.id, { ...options }])
}
Available properties:
- {{this.blog.record}}
- {{this.blog.error}}
- {{this.blog.isLoading}}
- {{this.blog.isSuccess}}
- {{this.blog.isError}}
- {{this.blog.hasRan}}
Available methods:
- <button {{on 'click' this.blog.retry}}>Retry</button>
in a template
{{#let (find-record 'blog' @id) as |blog|}}
{{!-- or: (find-record 'blog' @id options=...) --}}
{{#if blog.isLoading}}
...
{{else if blog.isError}}
{{blog.error}}
{{else}}
{{blog.record}}
{{/if}}
Available properties:
- {{blog.record}}
- {{blog.error}}
- {{blog.isLoading}}
- {{blog.isSuccess}}
- {{blog.isError}}
- {{blog.hasRan}}
Available methods:
- <button {{on 'click' blog.retry}}>Retry</button>
{{/let}}
in strict mode
See: First-class Component Templates
import { FindRecord } from 'ember-data-resources';
<template>
{{#let (FindRecord 'blog' @id) as |blog|}}
...
{{/let}}
</template>
query
import { query } from 'ember-data-resources';
export default class MyComponent extends Component {
blog = query(this, 'blog', () => ({ ...query }));
// blog = query(this, 'blog', () => [{ ...query }]);
// blog = query(this, 'blog', () => [{ ...query }, { ...options }]);
}
Available properties:
- {{this.blog.records}}
- {{this.blog.error}}
- {{this.blog.isLoading}}
- {{this.blog.isSuccess}}
- {{this.blog.isError}}
- {{this.blog.hasRan}}
Available methods:
- <button {{on 'click' this.blog.retry}}>Retry</button>
in a template
{{#let (query 'blog' query=(hash ...)) as |blogs|}}
{{#if blogs.isLoading}}
...
{{else if blogs.isError}}
{{blogs.error}}
{{else}}
{{blogs.records}}
{{/if}}
Available properties:
- {{blog.records}}
- {{blog.error}}
- {{blog.isLoading}}
- {{blog.isSuccess}}
- {{blog.isError}}
- {{blog.hasRan}}
Available methods:
- <button {{on 'click' blog.retry}}>Retry</button>
{{/let}}
in strict mode
See: First-class Component Templates
import { Query } from 'ember-data-resources';
<template>
{{#let (Query 'blog' query=(hash ...)) as |blogs|}}
...
{{/let}}
</template>
queryRecord
import { queryRecord } from 'ember-data-resources';
export default class MyComponent extends Component {
@tracked id = 1;
blog = queryRecord(this, 'blog', () => ({ ...query }))
// blog = findRecord(this, 'blog', () => [{ ...query }])
// blog = findRecord(this, 'blog', () => [{ ...query }, { ...options }])
}
Available properties:
- {{this.blog.record}}
- {{this.blog.error}}
- {{this.blog.isLoading}}
- {{this.blog.isSuccess}}
- {{this.blog.isError}}
- {{this.blog.hasRan}}
Available methods:
- <button {{on 'click' this.blog.retry}}>Retry</button>
in a template
{{#let (query-record 'blog' query=(hash ...)) as |blog|}}
{{#if blog.isLoading}}
...
{{else if blog.isError}}
{{blog.error}}
{{else}}
{{blog.record}}
{{/if}}
Available properties:
- {{blog.record}}
- {{blog.error}}
- {{blog.isLoading}}
- {{blog.isSuccess}}
- {{blog.isError}}
- {{blog.hasRan}}
Available methods:
- <button {{on 'click' blog.retry}}>Retry</button>
{{/let}}
in strict mode
See: First-class Component Templates
import { QueryRecord } from 'ember-data-resources';
<template>
{{#let (QueryRecord 'blog' query=(hash ...)) as |blog|}}
...
{{/let}}
</template>
Contributing
See the Contributing guide for details.
License
This project is licensed under the MIT License.