Class JSONAPIAdapter

public

Overview

⚠️ This is LEGACY documentation for a feature that is no longer encouraged to be used. If starting a new app or thinking of implementing a new adapter, consider writing a Handler instead to be used with the RequestManager

The JSONAPIAdapter is an adapter whichtransforms the store's requests into HTTP requests that follow the JSON API format.

JSON API Conventions

The JSONAPIAdapter uses JSON API conventions for building the URL for a record and selecting the HTTP verb to use with a request. The actions you can take on a record map onto the following URLs in the JSON API adapter:

Action HTTP Verb URL
`store.findRecord('post', 123)` GET /posts/123
`store.findAll('post')` GET /posts
Update `postRecord.save()` PATCH /posts/123
Create `store.createRecord('post').save()` POST /posts
Delete `postRecord.destroyRecord()` DELETE /posts/123

Success and failure

The JSONAPIAdapter will consider a success any response with a status code of the 2xx family ("Success"), as well as 304 ("Not Modified"). Any other status code will be considered a failure.

On success, the request promise will be resolved with the full response payload.

Failed responses with status code 422 ("Unprocessable Entity") will be considered "invalid". The response will be discarded, except for the errors key. The request promise will be rejected with a InvalidError. This error object will encapsulate the saved errors value.

Any other status codes will be treated as an adapter error. The request promise will be rejected, similarly to the invalid case, but with an instance of AdapterError instead.

Endpoint path customization

Endpoint paths can be prefixed with a namespace by setting the namespace property on the adapter:

app/adapters/application.js
import JSONAPIAdapter from '@ember-data/adapter/json-api';

export default class ApplicationAdapter extends JSONAPIAdapter {
  namespace = 'api/1';
}

Requests for the person model would now target /api/1/people/1.

Host customization

An adapter can target other hosts by setting the host property.

app/adapters/application.js
import JSONAPIAdapter from '@ember-data/adapter/json-api';

export default class ApplicationAdapter extends JSONAPIAdapter {
  host = 'https://api.example.com';
}

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

Show:

Available since v2.5.0

snapshot
Snapshot
returns
Object

Used by findAll and findRecord to build the query's data hash supplied to the ajax method.

modelName
String
id
(String|Array|Object)

single id or array of ids or query

snapshot
(Snapshot|SnapshotRecordArray)

single snapshot or array of snapshots

requestType
String
query
Object

object of query parameters to send for query requests.

returns
String

url

Builds a URL for a given type and optional ID.

By default, it pluralizes the type's name (for example, 'post' becomes 'posts' and 'person' becomes 'people'). To override the pluralization see pathForType.

If an ID is specified, it adds the ID to the path generated for the type, separated by a /.

When called by RESTAdapter.findMany() the id and snapshot parameters will be arrays of ids and snapshots.

store
Store
type
Model

the Model class of the record

snapshot
Snapshot
returns
Promise

promise

Implement this method in a subclass to handle the creation of new records.

Serializes the record and sends it to the server.

Example

app/adapters/application.js
import Adapter from '@ember-data/adapter';
import RSVP from 'RSVP';
import $ from 'jquery';

export default class ApplicationAdapter extends Adapter {
  createRecord(store, type, snapshot) {
    let data = this.serialize(snapshot, { includeId: true });

    return new RSVP.Promise(function (resolve, reject) {
      $.ajax({
        type: 'POST',
        url: `/${type.modelName}`,
        dataType: 'json',
        data: data
      }).then(function (data) {
        resolve(data);
      }, function (jqXHR) {
        jqXHR.then = null; // tame jQuery's ill mannered promises
        reject(jqXHR);
      });
    });
  }
}
store
Store
type
Model

the Model class of the record

snapshot
Snapshot
returns
Promise

promise

Implement this method in a subclass to handle the deletion of a record.

Sends a delete request for the record to the server.

Example

app/adapters/application.js
import Adapter from '@ember-data/adapter';
import RSVP from 'RSVP';
import $ from 'jquery';

export default class ApplicationAdapter extends Adapter {
  deleteRecord(store, type, snapshot) {
    let data = this.serialize(snapshot, { includeId: true });
    let id = snapshot.id;

    return new RSVP.Promise(function(resolve, reject) {
      $.ajax({
        type: 'DELETE',
        url: `/${type.modelName}/${id}`,
        dataType: 'json',
        data: data
      }).then(function(data) {
        resolve(data)
      }, function(jqXHR) {
        jqXHR.then = null; // tame jQuery's ill mannered promises
        reject(jqXHR);
      });
    });
  }
}
store
Store
type
Model
neverSet
Undefined

a value is never provided to this argument

snapshotRecordArray
SnapshotRecordArray
returns
Promise

promise

The findAll() method is used to retrieve all records for a given type.

Example

app/adapters/application.js
import Adapter from '@ember-data/adapter';
import RSVP from 'RSVP';
import $ from 'jquery';

export default class ApplicationAdapter extends Adapter {
  findAll(store, type) {
    return new RSVP.Promise(function(resolve, reject) {
      $.getJSON(`/${type.modelName}`).then(function(data) {
        resolve(data);
      }, function(jqXHR) {
        reject(jqXHR);
      });
    });
  }
}
store
Store
snapshot
Snapshot
url
String
relationship
Object

meta object describing the relationship

returns
Promise

promise

Called by the store in order to fetch the JSON for the unloaded record in a belongs-to relationship that was originally specified as a URL (inside of links).

For example, if your original payload looks like this:

{
  "person": {
    "id": 1,
    "name": "Tom Dale",
    "links": { "group": "/people/1/group" }
  }
}

This method will be called with the parent record and /people/1/group.

The findBelongsTo method will make an Ajax (HTTP GET) request to the originally specified URL.

The format of your links value will influence the final request URL via the urlPrefix method:

  • Links beginning with //, http://, https://, will be used as is, with no further manipulation.

  • Links beginning with a single / will have the current adapter's host value prepended to it.

  • Links with no beginning / will have a parentURL prepended to it, via the current adapter's buildURL.

store
Store
snapshot
Snapshot
url
String
relationship
Object

meta object describing the relationship

returns
Promise

promise

Called by the store in order to fetch a JSON array for the unloaded records in a has-many relationship that were originally specified as a URL (inside of links).

For example, if your original payload looks like this:

{
  "post": {
    "id": 1,
    "title": "Rails is omakase",
    "links": { "comments": "/posts/1/comments" }
  }
}

This method will be called with the parent record and /posts/1/comments.

The findHasMany method will make an Ajax (HTTP GET) request to the originally specified URL.

The format of your links value will influence the final request URL via the urlPrefix method:

  • Links beginning with //, http://, https://, will be used as is, with no further manipulation.

  • Links beginning with a single / will have the current adapter's host value prepended to it.

  • Links with no beginning / will have a parentURL prepended to it, via the current adapter's buildURL.

store
Store
type
Model

the Model class of the records

ids
Array
snapshots
Array
returns
Promise

promise

The store will call findMany instead of multiple findRecord requests to find multiple records at once if coalesceFindRequests is true.

app/adapters/application.js
import Adapter from '@ember-data/adapter';
import RSVP from 'RSVP';
import $ from 'jquery';

export default class ApplicationAdapter extends Adapter {
  findMany(store, type, ids, snapshots) {
    return new RSVP.Promise(function(resolve, reject) {
      $.ajax({
        type: 'GET',
        url: `/${type.modelName}/`,
        dataType: 'json',
        data: { filter: { id: ids.join(',') } }
      }).then(function(data) {
        resolve(data);
      }, function(jqXHR) {
        jqXHR.then = null; // tame jQuery's ill mannered promises
        reject(jqXHR);
      });
    });
  }
}
store
Store
type
Model
id
String
snapshot
Snapshot
returns
Promise

promise

The findRecord() method is invoked when the store is asked for a record that has not previously been loaded. In response to findRecord() being called, you should query your persistence layer for a record with the given ID. The findRecord method should return a promise that will resolve to a JavaScript object that will be normalized by the serializer.

Here is an example of the findRecord implementation:

app/adapters/application.js
import Adapter from '@ember-data/adapter';
import RSVP from 'RSVP';
import $ from 'jquery';

export default class ApplicationAdapter extends Adapter {
  findRecord(store, type, id, snapshot) {
    return new RSVP.Promise(function(resolve, reject) {
      $.getJSON(`/${type.modelName}/${id}`).then(function(data) {
        resolve(data);
      }, function(jqXHR) {
        reject(jqXHR);
      });
    });
  }
}
store
Store
type
Model

the Model class of the record

inputProperties
Object

a hash of properties to set on the newly created record.

returns
(String|Number)

id

If the globally unique IDs for your records should be generated on the client, implement the generateIdForRecord() method. This method will be invoked each time you create a new record, and the value returned from it will be assigned to the record's primaryKey.

Most traditional REST-like HTTP APIs will not use this method. Instead, the ID of the record will be set by the server, and your adapter will update the store with the new ID when it calls didCreateRecord(). Only implement this method if you intend to generate record IDs on the client-side.

The generateIdForRecord() method will be invoked with the requesting store as the first parameter and the newly created record as the second parameter:

import Adapter from '@ember-data/adapter';
import { v4 } from 'uuid';

export default class ApplicationAdapter extends Adapter {
  generateIdForRecord(store, type, inputProperties) {
    return v4();
  }
}
store
Store
snapshots
Array
returns
Array

an array of arrays of records, each of which is to be loaded separately by findMany.

Organize records into groups, each of which is to be passed to separate calls to findMany.

For example, if your API has nested URLs that depend on the parent, you will want to group records by their parent.

The default implementation returns the records as a single group.

Available since v1.13.0

status
Number
headers
Object
payload
Object
requestData
Object
  • the original request information
returns
Object | AdapterError

response

Takes an ajax response, and returns the json payload or an error.

By default this hook just returns the json payload passed to it. You might want to override it in two cases:

  1. Your API might return useful results in the response headers. Response headers are passed in as the second argument.

  2. Your API might return errors as successful responses with status code 200 and an Errors text or object. You can return a InvalidError or a AdapterError (or a sub class) from this hook and it will automatically reject the promise and put your record into the invalid or error state.

Returning a InvalidError from this method will cause the record to transition into the invalid state and make the errors object available on the record. When returning an InvalidError the store will attempt to normalize the error data returned from the server using the serializer's extractErrors method.

Available since v1.13.0

status
Number
headers
Object
payload
Object
returns
Boolean

Default handleResponse implementation uses this hook to decide if the response is an invalid error.

Available since v1.13.0

status
Number
headers
Object
payload
Object
returns
Boolean

Default handleResponse implementation uses this hook to decide if the response is a success.

modelName
String
returns
String

path

Determines the pathname for a given type.

By default, it pluralizes the type's name (for example, 'post' becomes 'posts' and 'person' becomes 'people').

Pathname customization

For example, if you have an object LineItem with an endpoint of /line_items/.

app/adapters/application.js
import RESTAdapter from '@ember-data/adapter/rest';
import { decamelize, pluralize } from '<app-name>/utils/string-utils';

export default class ApplicationAdapter extends RESTAdapter {
  pathForType(modelName) {
    var decamelized = decamelize(modelName);
    return pluralize(decamelized);
  }
}
store
Store
type
Model
query
Object
recordArray
Collection
adapterOptions
Object
returns
Promise

promise

This method is called when you call query on the store.

Example

app/adapters/application.js
import Adapter from '@ember-data/adapter';
import RSVP from 'RSVP';
import $ from 'jquery';

export default class ApplicationAdapter extends Adapter {
  query(store, type, query) {
    return new RSVP.Promise(function(resolve, reject) {
      $.getJSON(`/${type.modelName}`, query).then(function(data) {
        resolve(data);
      }, function(jqXHR) {
        reject(jqXHR);
      });
    });
  }
}
store
Store
type
Subclass of Model
query
Object
adapterOptions
Object
returns
Promise

promise

The queryRecord() method is invoked when the store is asked for a single record through a query object.

In response to queryRecord() being called, you should always fetch fresh data. Once found, you can asynchronously call the store's push() method to push the record into the store.

Here is an example queryRecord implementation:

Example

app/adapters/application.js
import Adapter, { BuildURLMixin } from '@ember-data/adapter';
import RSVP from 'RSVP';
import $ from 'jquery';

export default class ApplicationAdapter extends Adapter.extend(BuildURLMixin) {
  queryRecord(store, type, query) {
    return new RSVP.Promise(function(resolve, reject) {
      $.getJSON(`/${type.modelName}`, query).then(function(data) {
        resolve(data);
      }, function(jqXHR) {
        reject(jqXHR);
      });
    });
  }
}
snapshot
Snapshot
options
Object
returns
Object

serialized snapshot

Proxies to the serializer's serialize method.

Example

app/adapters/application.js
import Adapter from '@ember-data/adapter';

export default class ApplicationAdapter extends Adapter {
  createRecord(store, type, snapshot) {
    let data = this.serialize(snapshot, { includeId: true });
    let url = `/${type.modelName}`;

    // ...
  }
}

Available since v1.13.0

store
Store
snapshotRecordArray
SnapshotRecordArray
returns
Boolean

This method is used by the store to determine if the store should reload a record array after the store.findAll method resolves with a cached record array.

This method is only checked by the store when the store is returning a cached record array.

If this method returns true the store will re-fetch all records from the adapter.

For example, if you do not want to fetch complex data over a mobile connection, or if the network is down, you can implement shouldBackgroundReloadAll as follows:

shouldBackgroundReloadAll(store, snapshotArray) {
  let { downlink, effectiveType } = navigator.connection;

  return downlink > 0 && effectiveType === '4g';
}

By default this method returns true, indicating that a background reload should always be triggered.

Available since v1.13.0

store
Store
snapshot
Snapshot
returns
Boolean

This method is used by the store to determine if the store should reload a record after the store.findRecord method resolves a cached record.

This method is only checked by the store when the store is returning a cached record.

If this method returns true the store will re-fetch a record from the adapter.

For example, if you do not want to fetch complex data over a mobile connection, or if the network is down, you can implement shouldBackgroundReloadRecord as follows:

shouldBackgroundReloadRecord(store, snapshot) {
  let { downlink, effectiveType } = navigator.connection;

  return downlink > 0 && effectiveType === '4g';
}

By default, this hook returns true so the data for the record is updated in the background.

Available since v1.13.0

store
Store
snapshotRecordArray
SnapshotRecordArray
returns
Boolean

This method is used by the store to determine if the store should reload all records from the adapter when records are requested by store.findAll.

If this method returns true, the store will re-fetch all records from the adapter. If this method returns false, the store will resolve immediately using the cached records.

For example, if you are building an events ticketing system, in which users can only reserve tickets for 20 minutes at a time, and want to ensure that in each route you have data that is no more than 20 minutes old you could write:

shouldReloadAll(store, snapshotArray) {
  let snapshots = snapshotArray.snapshots();

  return snapshots.any((ticketSnapshot) => {
    let lastAccessedAt = ticketSnapshot.attr('lastAccessedAt');
    let timeDiff = moment().diff(lastAccessedAt, 'minutes');

    if (timeDiff > 20) {
      return true;
    } else {
      return false;
    }
  });
}

This method would ensure that whenever you do store.findAll('ticket') you will always get a list of tickets that are no more than 20 minutes old. In case a cached version is more than 20 minutes old, findAll will not resolve until you fetched the latest versions.

By default, this method returns true if the passed snapshotRecordArray is empty (meaning that there are no records locally available yet), otherwise, it returns false.

Note that, with default settings, shouldBackgroundReloadAll will always re-fetch all the records in the background even if shouldReloadAll returns false. You can override shouldBackgroundReloadAll if this does not suit your use case.

Available since v1.13.0

store
Store
snapshot
Snapshot
returns
Boolean

This method is used by the store to determine if the store should reload a record from the adapter when a record is requested by store.findRecord.

If this method returns true, the store will re-fetch a record from the adapter. If this method returns false, the store will resolve immediately using the cached record.

For example, if you are building an events ticketing system, in which users can only reserve tickets for 20 minutes at a time, and want to ensure that in each route you have data that is no more than 20 minutes old you could write:

shouldReloadRecord(store, ticketSnapshot) {
  let lastAccessedAt = ticketSnapshot.attr('lastAccessedAt');
  let timeDiff = moment().diff(lastAccessedAt, 'minutes');

  if (timeDiff > 20) {
    return true;
  } else {
    return false;
  }
}

This method would ensure that whenever you do store.findRecord('ticket', id) you will always get a ticket that is no more than 20 minutes old. In case the cached version is more than 20 minutes old, findRecord will not resolve until you fetched the latest version.

By default this hook returns false, as most UIs should not block user interactions while waiting on data update.

Note that, with default settings, shouldBackgroundReloadRecord will always re-fetch the records in the background even if shouldReloadRecord returns false. You can override shouldBackgroundReloadRecord if this does not suit your use case.

obj
Object
returns
Object

By default, the RESTAdapter will send the query params sorted alphabetically to the server.

For example:

store.query('posts', { sort: 'price', category: 'pets' });

will generate a requests like this /posts?category=pets&sort=price, even if the parameters were specified in a different order.

That way the generated URL will be deterministic and that simplifies caching mechanisms in the backend.

Setting sortQueryParams to a falsey value will respect the original order.

In case you want to sort the query parameters with a different criteria, set sortQueryParams to your custom sort function.

app/adapters/application.js
import RESTAdapter from '@ember-data/adapter/rest';

export default class ApplicationAdapter extends RESTAdapter {
  sortQueryParams(params) {
    let sortedKeys = Object.keys(params).sort().reverse();
    let len = sortedKeys.length, newParams = {};

    for (let i = 0; i < len; i++) {
      newParams[sortedKeys[i]] = params[sortedKeys[i]];
    }

    return newParams;
  }
}
store
Store
type
Model

the Model class of the record

snapshot
Snapshot
returns
Promise

promise

Implement this method in a subclass to handle the updating of a record.

Serializes the record update and sends it to the server.

The updateRecord method is expected to return a promise that will resolve with the serialized record. This allows the backend to inform the Ember Data store the current state of this record after the update. If it is not possible to return a serialized record the updateRecord promise can also resolve with undefined and the Ember Data store will assume all of the updates were successfully applied on the backend.

Example

app/adapters/application.js
import Adapter from '@ember-data/adapter';
import RSVP from 'RSVP';
import $ from 'jquery';

export default class ApplicationAdapter extends Adapter {
  updateRecord(store, type, snapshot) {
    let data = this.serialize(snapshot, { includeId: true });
    let id = snapshot.id;

    return new RSVP.Promise(function(resolve, reject) {
      $.ajax({
        type: 'PUT',
        url: `/${type.modelName}/${id}`,
        dataType: 'json',
        data: data
      }).then(function(data) {
        resolve(data);
      }, function(jqXHR) {
        jqXHR.then = null; // tame jQuery's ill mannered promises
        reject(jqXHR);
      });
    });
  }
}
modelName
String
snapshot
Snapshot
returns
String

url

Builds a URL for a record.save() call when the record was created locally using store.createRecord().

Example:

app/adapters/application.js
import RESTAdapter from '@ember-data/adapter/rest';

export default class ApplicationAdapter extends RESTAdapter {
  urlForCreateRecord(modelName, snapshot) {
    return super.urlForCreateRecord(...arguments) + '/new';
  }
}
id
String
modelName
String
snapshot
Snapshot
returns
String

url

Builds a URL for a record.save() call when the record has been deleted locally.

Example:

app/adapters/application.js
import RESTAdapter from '@ember-data/adapter/rest';

export default class ApplicationAdapter extends RESTAdapter {
  urlForDeleteRecord(id, modelName, snapshot) {
    return super.urlForDeleteRecord(...arguments) + '/destroy';
  }
}
modelName
String
snapshot
SnapshotRecordArray
returns
String

url

Builds a URL for a store.findAll(type) call.

Example:

app/adapters/comment.js
import JSONAPIAdapter from '@ember-data/adapter/json-api';

export default class ApplicationAdapter extends JSONAPIAdapter {
  urlForFindAll(modelName, snapshot) {
    let baseUrl = this.buildURL(modelName);
    return `${baseUrl}/data/comments.json`;
  }
}
id
String
modelName
String
snapshot
Snapshot
returns
String

url

Builds a URL for fetching an async belongsTo relationship when a url is not provided by the server.

Example:

app/adapters/application.js
import JSONAPIAdapter from '@ember-data/adapter/json-api';

export default class ApplicationAdapter extends JSONAPIAdapter {
  urlForFindBelongsTo(id, modelName, snapshot) {
    let baseUrl = this.buildURL(modelName, id);
    return `${baseUrl}/relationships`;
  }
}
id
String
modelName
String
snapshot
Snapshot
returns
String

url

Builds a URL for fetching an async hasMany relationship when a URL is not provided by the server.

Example:

app/adapters/application.js
import JSONAPIAdapter from '@ember-data/adapter/json-api';

export default class ApplicationAdapter extends JSONAPIAdapter {
  urlForFindHasMany(id, modelName, snapshot) {
    let baseUrl = this.buildURL(modelName, id);
    return `${baseUrl}/relationships`;
  }
}
ids
Array
modelName
String
snapshots
Array
returns
String

url

Builds a URL for coalescing multiple store.findRecord(type, id) records into 1 request when the adapter's coalesceFindRequests property is true.

Example:

app/adapters/application.js
import RESTAdapter from '@ember-data/adapter/rest';

export default class ApplicationAdapter extends RESTAdapter {
  urlForFindMany(ids, modelName) {
    let baseUrl = this.buildURL();
    return `${baseUrl}/coalesce`;
  }
}
id
String
modelName
String
snapshot
Snapshot
returns
String

url

Builds a URL for a store.findRecord(type, id) call.

Example:

app/adapters/user.js
import JSONAPIAdapter from '@ember-data/adapter/json-api';

export default class ApplicationAdapter extends JSONAPIAdapter {
  urlForFindRecord(id, modelName, snapshot) {
    let baseUrl = this.buildURL(modelName, id, snapshot);
    return `${baseUrl}/users/${snapshot.adapterOptions.user_id}/playlists/${id}`;
  }
}
query
Object
modelName
String
returns
String

url

Builds a URL for a store.query(type, query) call.

Example:

app/adapters/application.js
import RESTAdapter from '@ember-data/adapter/rest';

export default class ApplicationAdapter extends RESTAdapter {
  host = 'https://api.github.com';
  urlForQuery (query, modelName) {
    switch(modelName) {
      case 'repo':
        return `https://api.github.com/orgs/${query.orgId}/repos`;
      default:
        return super.urlForQuery(...arguments);
    }
  }
}
query
Object
modelName
String
returns
String

url

Builds a URL for a store.queryRecord(type, query) call.

Example:

app/adapters/application.js
import RESTAdapter from '@ember-data/adapter/rest';

export default class ApplicationAdapter extends RESTAdapter {
  urlForQueryRecord({ slug }, modelName) {
    let baseUrl = this.buildURL();
    return `${baseUrl}/${encodeURIComponent(slug)}`;
  }
}
id
String
modelName
String
snapshot
Snapshot
returns
String

url

Builds a URL for a record.save() call when the record has been updated locally.

Example:

app/adapters/application.js
import RESTAdapter from '@ember-data/adapter/rest';

export default class ApplicationAdapter extends RESTAdapter {
  urlForUpdateRecord(id, modelName, snapshot) {
    return `/${id}/feed?access_token=${snapshot.adapterOptions.token}`;
  }
}