@ember-data/json-api

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.

Installation

Install using your javascript package manager of choice. For instance with pnpm

pnpm add @ember-data/json-api

Tagged Releases

• 
• 
• 
• 
• 

Getting Started

If this package is how you are first learning about EmberData, we recommend starting with learning about the Store and Requests

🚀 Setup

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);
  }
}

Usage

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

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).

Available Builders

• createRecord
• deleteRecord
• findRecord
• query
• updateRecord