Elegantly composable. Made for JSON:API
This package provides an in-memory document and resource Cache and associated utilities for use with EmberData and JSON:API.
Install using your javascript package manager of choice. For instance with pnpm
pnpm add @ember-data/json-api
If this package is how you are first learning about EmberData, we recommend starting with learning about the Store and Requests
Note When using ember-data the below configuration is handled for you automatically.
import Store from '@ember-data/store';
import Cache from '@ember-data/json-api';
export default class extends Store {
createCache(wrapper) {
return new Cache(wrapper);
}
}
Usually you will directly interact with the cache only if implementing a presentation class. Below we
give an example of a read-only record (mutations never written back to the cache). More typically cache
interactions are something that the Store
coordinates as part of the request/response
lifecycle.
import Store, { recordIdentifierFor } from '@ember-data/store';
import Cache from '@ember-data/json-api';
import { TrackedObject } from 'tracked-built-ins';
class extends Store {
createCache(wrapper) {
return new Cache(wrapper);
}
instantiateRecord(identifier) {
const { cache, notifications } = this;
const { type, id } = identifier;
// create a TrackedObject with our attributes, id and type
const attrs = cache.peek(identifier).attributes;
const data = Object.assign({}, attrs, { type, id });
const record = new TrackedObject(data);
// update the TrackedObject whenever attributes change
const token = notifications.subscribe(identifier, (_, change) => {
if (change === 'attributes') {
Object.assign(record, cache.peek(identifier).attributes);
}
});
// setup the ability to teardown the subscription when the
// record is no longer needed
record.destroy = () => {
this.notifications.unsubscribe(token);
};
return record;
}
teardownRecord(record: FakeRecord) {
record.destroy();
}
}
For the full list of APIs available read the code documentation for EmberData Cache
Request builders are functions that produce Fetch Options. They take a few contextual inputs about the request you want to make, abstracting away the gnarlier details.
For instance, to fetch a resource from your API
import { findRecord } from '@ember-data/json-api/request';
const options = findRecord('ember-developer', '1', { include: ['pets', 'friends'] });
/*
=> {
url: 'https://api.example.com/v1/ember-developers/1?include=friends,pets',
method: 'GET',
headers: <Headers>,
// => 'Accept': 'application/vnd.api+json'
// => 'Content-Type': 'application/vnd.api+json'
op: 'findRecord';
records: [{ type: 'ember-developer', id: '1' }]
}
*/
Request builder output may be used with either requestManager.request
or store.request
.
URLs are stable. The same query will produce the same URL every time, even if the order of keys in the query or values in an array changes.
URLs follow the most common JSON:API format (dasherized pluralized resource types).