Customizing the adapter and serializer

Ember Data is very opinionated on how it wants to access data. The adapter has built-in assumptions on what the data looks like. We can use serializers and adapters to change these assumptions.

For this recipe, we'll be building on the student application that we created in the previous section.

Getting ready

We'll be using the same application from the previous recipe. We'll need to edit Ember CLI Mirage to handle a new namespace.

In the config.js file in the mirage folder, update the students route:

// app/mirage/config.js
export default function() {

    this.get('api/v1/students');
}

This will change the endpoint to api/v1/students instead of just /students.

How to do it...

  1. In the students application from the previous section, edit the application.js file in the adapters folder.
  2. Add a new namespace:
    // app/adapters/application.js
import DS from 'ember-data';

export default DS.RESTAdapter.extend({
    namespace: 'api/v1'
});

    The namespace property is used to prefix requests with a specific URL. In this case, all requests will have api/v1 prepended to them.

  3. Start the Ember server and you should see requests going to /api/v1/students.

Optional customizations in Ember Data

Ember offers a number of other customizations if needed. Here are a few important ones to keep in mind.

Host customization

In the adapter file, you can add a new location where Ember Data should send requests. This overwrites the default location of the local server:

// app/adapters/application.js
import DS from 'ember-data';

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

As an example, now all the requests will be sent to api.example.com.

Headers customization

Depending on the API, you may need to send specific headers in each HTTP request. You can add this using the headers property:

// app/adapters/application.js
import DS from 'ember-data';

export default DS.RESTAdapter.extend({
  headers: {
    'API_INFO:': 'key',
    'SECOND_HEADER': 'Some value'
  }
});

This will add new headers for every request that is sent. If needed, you can also use dynamic information in your headers by creating a computed property.

Working with serializers

When using Ember Data, serializers format the data that's sent and received from the backend data store. We can customize this data to fit the needs of our backend.

Updating IDs

By default, Ember Data expects each record to have an ID. We can change the name of this using the primary key property.

  1. Generate a new serializer file:
    $ ember g serializer application

    This generates the serializer file that we can update.

  2. Update the application.js serializer with the new ID:
    // app/serializers/application.js
import DS from 'ember-data';

export default DS.RESTSerializer.extend({
    primaryKey: '_id'
});

    This will transform the ID property to _id when serializing and deserializing data. In other words, when data is sent or received from the server, it will have a primary key that is set to _id.

KeyForAttribute when working a JSON payload

At times, the data sent back from the server may not be in the correct format. For example, RESTAdapter expects the JSON payload attribute names in camel-case. We can change this using the keyForAttribute property:

// app/serializers/application.js
import DS from 'ember-data';

export default DS.RESTSerializer.extend({
    keyForAttribute(attr) {
      return Ember.String.decamelize(attr);
    }
});

For example, let's say that the data sent back from the server is underscored instead of camel-cased. The server is returning school_name instead of schoolName. This can be fixed using keyForAttribute and decamelize. This will take the model name schoolName and decamelize it to school_name so that it matches what's returned from the server.

How it works...

Adapters are used in Ember Data to help interpret data that is sent and retrieved from the server. It has a set of built-in assumptions on how the data should look. We can make changes so that we can accommodate different types of APIs. For example, we can customize the endpoint's path namespace as well as the host if needed.

Serializers format the data that is sent and received from the server. Ember Data expects data to be in a certain format. We can change many things in this data including the primary key and the keys in the JSON payload. This is accomplished by adding new properties to the serializer.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset