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.
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
.
application.js
file in the adapters
folder.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.
/api/v1/students
.Ember offers a number of other customizations if needed. Here are a few important ones to keep in mind.
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
.
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.
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.
By default, Ember Data expects each record to have an ID. We can change the name of this using the primary key property.
serializer
file:$ ember g serializer application
This generates the serializer
file that we can update.
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
.
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.
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.