5.2.1 • Published 3 months ago
ember-data-resources v5.2.1
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.
5.2.1
3 months ago
5.2.0
3 months ago
5.1.0
3 months ago
5.0.0
11 months ago
4.0.4
2 years ago
4.0.0
2 years ago
4.0.3
2 years ago
2.0.5
2 years ago
2.0.7
2 years ago
2.0.6
2 years ago
2.0.8
2 years ago
2.1.0
2 years ago
3.0.4
2 years ago
3.0.3
2 years ago
3.0.2
2 years ago
3.0.1
2 years ago
3.0.5
2 years ago
3.0.0
2 years ago
2.0.3
2 years ago
2.0.2
3 years ago
2.0.4
2 years ago
2.0.1
3 years ago
2.0.0
3 years ago
1.1.4
3 years ago
1.1.3
3 years ago
1.1.1
3 years ago
1.1.2
3 years ago
1.1.0
3 years ago
1.0.1
3 years ago
1.0.0
3 years ago