Customizing Adapters

The DS.JSONAPIAdapter has a handful of hooks that are commonly used to extend it to work with non-standard backends.

The JSONAPIAdapter is smart enough to determine the URLs it communicates with based on the name of the model. For example, if you ask for a Post by ID:

store.findRecord('post', 1).then(function(post) {
});

The JSON:API adapter will automatically send a GET request to /posts/1.

The actions you can take on a record map onto the following URLs in the JSON:API adapter:

To facilitate pluralizing model names when generating route URLs Ember Data comes bundled with Ember Inflector, an ActiveSupport::Inflector compatible library for inflecting words between plural and singular forms. Irregular or uncountable pluralizations can be specified via Ember.Inflector.inflector.

To do this, create an Initializer file containing your customizations. The Ember CLI's initializer generator can be used ember generate initializer custom-inflector-rules to create the file. Update its content as follow:

import Inflector from 'ember-inflector';

export function initialize(/* application */) {
  const inflector = Inflector.inflector;

  // Tell the inflector that the plural of "campus" is "campuses"
  inflector.irregular('campus', 'campuses');

  // Tell the inflector that the plural of "advice" is "advice"
  inflector.uncountable('advice');
}

export default {
  name: 'custom-inflector-rules',
  initialize
};

The JSON:API adapter will now make requests for Campus models to /campuses and /campuses/1 (instead of /campus/ and /campus/1), and requests for advice to /advice and /advice/1 (instead of /advices/ and /advices/1).

When specifying irregular inflection rules for compound words, only the final word or phrase should be specified. For example, to specify the plural of redCow as redKine or red-cow as red-kine, only the final word segments cow and kine should be specified:

inflector.irregular('cow', 'kine');

The namespace property can be used to prefix requests with a specific URL namespace.

import DS from 'ember-data';

export default DS.JSONAPIAdapter.extend({
  namespace: 'api/1'
});

Requests for person would now target https://api.emberjs.com/1/people/1.

By default, the adapter will target the current domain. If you would like to specify a new domain you can do so by setting the host property on the adapter.

import DS from 'ember-data';

export default DS.JSONAPIAdapter.extend({
  host: 'https://api.example.com'
});

Requests for person would now target https://api.example.com/people/1.

By default, the JSONAPIAdapter will attempt to pluralize and dasherize the model name to generate the path name. If this convention does not conform to your backend you can override the pathForType method.

For example, if you did not want to pluralize model names and needed underscore_case instead of dash-case you could override the pathForType method like this:

import DS from 'ember-data';
import { underscore } from '@ember/string';

export default DS.JSONAPIAdapter.extend({
  pathForType(type) {
    return underscore(type);
  }
});

Requests for person would now target /person/1. Requests for user-profile would now target /user_profile/1.

Some APIs require HTTP headers, e.g. to provide an API key. Arbitrary headers can be set as key/value pairs on the JSONAPIAdapter's headers object and Ember Data will send them along with each network request. (Note that we set headers in init() because default property values should not be arrays or objects.)

import DS from 'ember-data';

export default DS.JSONAPIAdapter.extend({
  init() {
    this._super(...arguments);

    this.set('headers', {
      'API_KEY': 'secret key',
      'ANOTHER_HEADER': 'Some header value'
    });
  }
});

headers can also be used as a computed property to support dynamic headers. In the example below, the headers are generated with a computed property dependent on the session service.

import DS from 'ember-data';
import { computed } from '@ember/object';
import { inject as service } from '@ember/service';


export default DS.JSONAPIAdapter.extend({
  session: service('session'),
  headers: computed('session.authToken', function() {
    return {
      'API_KEY': this.session.authToken,
      'ANOTHER_HEADER': 'Some header value'
    };
  })
});

In some cases, your dynamic headers may require data from some object outside of Ember's observer system (for example document.cookie). You can use the volatile function to set the property into a non-cached mode causing the headers to be recomputed with every request.

import DS from 'ember-data';
import { computed } from '@ember/object';
import { get } from '@ember/object';

export default DS.JSONAPIAdapter.extend({
  headers: computed(function() {
    return {
      'API_KEY': get(document.cookie.match(/apiKey\=([^;]*)/), '1'),
      'ANOTHER_HEADER': 'Some header value'
    };
  }).volatile()
});

If none of the built-in Ember Data Adapters work for your backend, be sure to check out some of the community maintained Ember Data Adapters. Some good places to look for Ember Data Adapters include:

• Ember Observer
• GitHub