Handle JSON Body After save() on a Model - ember.js

In an application using the standard Ember 2.0 DS.JSONAPISerializer, the default behaviour for the REST API responding to a save() is "to return an empty object ({})."[1]
In my case, my REST API performs some changes to the data—including assigning a bigserial int64 ID from Postgres and processing text entry to Markdown (much, much faster than Ember can). This should (has to be) synchronous/blocking.
Is there an idiomatic approach to handling the response from save() on the default DS.JSONAPISerializer so that a (the) returned JSON model is stored in Ember's cache?
From what I can see I should be overriding normaliseSaveResponse to achieve this when accepting a response from the server. It's not immediately clear how I should set the fields of the "just saved" model with the server-provided values, however:
// app/models/item.js - simplified
export default DS.Model.extend({
id: DS.attr("number"),
title: DS.attr(),
body: DS.attr(),
// Only populated in the server response
rendered: DS.attr(),
createdDate: DS.attr("date"),
normalizeSaveResponse: function(store, primaryType, payload, id, requestType) {
// What goes here to deserialize the response into the model?
this.id = payload.item[i].id,
this.title = payload.item[i].title,
this.body = payload.item[i].rendered,
}
});
To sum:
I need to populate the model's ID field with a serial ID from the server as a response to save()
I also need to populate the rendered field with Markdown
Date fields, etc with server validated timestamps
Does this work when saving a single item AND multiple items?
If there's a better way to achieve this - e.g. a different method - I'm open to suggestions. The desire is to have additional validation/transforms happen on the server, return the 'corrected' response, and then have Ember save it in its own store => transition to /model/:id.

Just to close this out: Ember Data's default behaviour is to populate the fields (empty or not) in your model with the response JSON, provided your data has the correct structure for your adapter (i.e. RESTAdapter)
e.g.
A model like the below using the RESTAdapter:
export default DS.Model.extend({
id: DS.attr("number"),
title: DS.attr(),
body: DS.attr(),
// Only populated in the server response
rendered: DS.attr(),
// Only populated in the server response
createdDate: DS.attr("date"),
});
... will have the rendered and createdDate fields populated by the server provided your response looks like the below, with one exception (noted):
{
// This can be pluralized regardless of a single item or array response as Ember can deserialize it regardless
"posts": [{
"id": 1,
"title": "I'm Running to Reform the W3C's Tag",
"body": "Yehuda Katz",
"rendered": "<some markdown>",
// snake_case - not suitable by default
"created_at": "2015-09-08T20:31:09Z"
}]
}
You can fix this by overriding the keyForAttribute method on your serializer:
// app/serializers/application.js
export default DS.RESTSerializer.extend({
keyForAttribute: function(key) {
return Ember.String.decamelize(key);
}
});
Ref: http://emberigniter.com/fit-any-backend-into-ember-custom-adapters-serializers/

Related

How to access top level meta key from json-api server's 200 response when calling ember data's destroyRecord()

I'm working on an Ember app that is using Ember Data and the now default json-api adapter.
According to the json-api spec (http://jsonapi.org/format/#crud-deleting) when deleting a record your server should return a 200 response if the deletion is successful and the server responds with just a top level meta key.
My current server does just this and I'm trying to figure out how to access the data in the top level meta object when using Ember Data's model.destroyRecord() method.
myModel.destroyRecord().then(function(model){
// the returned value is the model. How can I get the actual metadata
// returned by the server?
});
The server response contains information about what exactly was deleted and looks like this:
{
"meta": {
num-deleted-a: 10,
num-deleted-b: 100,
num-deleted-c: 200
}
}
I'd like to get this information so I can display it to the user.
Thank you!
I am using the following versions:
Ember : 2.2.0
Ember Data : 2.3.3
jQuery : 1.11.3
After upgrading to Ember 2.6.1 and Ember 2.6.1 I was no longer able to access the store._metadataFor property.
To get access to the metadata from a particular call I now override the serializer for the model and add a meta property to the model itself that simply passes through the metadata.
As an example I have a record type called vote which when saved returns some metadata.
For the model I do the following:
// Vote Model (/app/models/vote)
export default DS.Model.extend({
vote: DS.attr('number'),
// Since i don't provide a transform the values for meta are passed through in
// raw form
meta: DS.attr()
});
Then in the serializer for the vote model I do the following:
// Vote serializer (/app/serializers/vote)
import DS from "ember-data";
export default DS.JSONAPISerializer.extend({
normalizeSaveResponse(store, primaryModelClass, payload, id, requestType) {
// The metadata in the payload does get processed by default and will be
// placed into a top level `meta` key on the returned documentHash
let documentHash = this._super(store, primaryModelClass, payload, id, requestType);
// Make sure we always have an empty object assigned to the meta attribute
if(typeof(payload.meta) !== 'object'){
payload.meta = {};
}
// Move the metadata into the attributes hash for the model
documentHash.data.attributes.meta = payload.meta;
return documentHash;
}
});
Note that in the above example I'm only adding in metadata to the vote model when making a save call to the store. If you wanted to always add in the metadata then you would override the normalize method instead of the normalizeSaveResponse method.
Then you can access a meta field in the results of your save call.
let vote = self.store.createRecord('vote', {
vote: voteValue
});
vote.save().then(function(result){
// this will now contain your metadata
console.info(result.get('meta'));
});
Ember does not support meta for single model requests (find,save and destroyRecord) at the moment!
If you want this you have to hook into ember internals.
The following code uses ember internals from ember 2.3 and may break in future versions!
There is the undocumented _metadataFor function on the store that gives you the last metadata for a given type. I use a custom initializer to always save it to the Model:
import Ember from 'ember';
import DS from 'ember-data';
const {set} = Ember;
export function initialize(application) {
DS.Model.reopen({
meta: null,
didCommit() {
this._super(...arguments);
set(this, 'meta', this.store._metadataFor(this.constructor.modelName));
}
});
};
export default {
name: 'meta',
initialize: initialize
};
After this you can do model.save().then(() => console.log(model.get('meta'))) or model.destroyRecord.then(() => console.log(model.get('meta'))).
Maybe checkout this ember-twiddle.

EmberJS embedded items in payload JSONAPI

Ember : 1.13.3
Ember Data : 1.13.5
jQuery : 1.11.3
I am trying to send a JSON payload using ember-data from my EmberJS client to my server. I want to send the entire object graph to the server on saving the project, as I don't want to send multiple requests. I wouldn't mind sending multiple requests, but I am worried about what happens if one of the requests fails in the middle and the data on the server will not be correct.
I wanted to use JSONAPI (http://jsonapi.org/format/#document-compound-documents) as that is becoming the default adapter in Ember. Also, there is a few C# libraries that handle this format, so I thought it would be quite straightforward. However, after reading the spec, it seems that I cannot embed objects if they do not have an id. EmberJS also does not attach the child objects to the JSON either even though I have specified { async: false, embedded: 'always' }) on the DS.attr.
My question is: If an application is used in such a way that an object graph is created on the client side, how do you use JSONAPI format to send the entire object graph to the server? Do I have to generate ids on the client side to satisfy the JSONAPI standard? Then once they get to the server just ignore them so they get saved with an id generated by the ORM?
Here is my labelGroup model:
import DS from 'ember-data';
export default DS.Model.extend({
name: DS.attr('string'),
labels: DS.hasMany('label-model', { async: false, embedded: 'always' })
});
Here is my project model:
import DS from 'ember-data';
export default DS.Model.extend(DS.EmbeddedRecordsMixin, {
name: DS.attr('string'),
labelGroups: DS.hasMany('labelGroup', { async: false, embedded: 'always'})
});
Here is the POST that I get after doing a save() on the project:
{
"data":{
"attributes":{"name":"Project"},
"relationships":{
"label-groups":{
"data":[
{"type":"label-groups","id":null},
{"type":"label-groups","id":null},
{"type":"label-groups","id":null},
{"type":"label-groups","id":null},
{"type":"label-groups","id":null},
{"type":"label-groups","id":null},
{"type":"label-groups","id":null}
]
}
},
"type":"label-projects"
}
}
UPDATE: I tried using https://www.npmjs.com/package/ember-cli-uuid to generate client side ids which it has. However the data getting output does not include the extra objects, only a reference to their ids. I expected to see an "included" property as specified here:http://jsonapi.org/format/#document-compound-documents, but it is not there.
{
"data":{
"id":"7b4544ee-91cd-493d-8b10-52040e68c283",
"attributes":{"name":"Project"},
"relationships":{
"label-groups":{
"data":[
{"type":"label-groups","id":"08115273-e82a-4d46-93ea-232ce071fb78"},
{"type":"label-groups","id":"9ca94fe9-8077-411e-98d2-1694c6fecce4"},
{"type":"label-groups","id":"d629f1e8-7962-404d-8034-38229ab21f77"},
{"type":"label-groups","id":"c6bda655-5489-4760-847b-bf02239bb2c5"},
{"type":"label-groups","id":"f6fef249-2d1d-43f0-ba64-24b7ff8b5637"},
{"type":"label-groups","id":"a7db25bf-52c8-477b-83e4-64e7c76b072e"},
{"type":"label-groups","id":"f3b5fbb3-261a-4b3d-b481-b9352f8ce2d6"}
]
}
},
"type":"label-projects"
}
}
Ember-data has no support for what you want at the moment. So ember-data will not save your relationships data in a save payload.
But its possible to do this your own by using a custom adapter and serializer.
I strongly recommend you to checkout the API and then look into the source.
If you call .save() on your Model the createRecord method is called on your adapter.
Here serializeIntoHash on the serializer is called to serialize the Model.
serializeIntoHash calls serialize, where serializeBelongsTo and serializeHasMany is called.
Now you can just override serializeHasMany and modify the hasMany before the line:
json[payloadKey] = hasMany;
Here you have the type and the ids as they are sent by ember-data. You could just .forEach the data on the hasMany and then fetch the store for the data and build your included array.
I hope this helps you to understand the serializer and the adapter so you can modify it to do whatever you want pretty easy. Actually this is the best part about ember-data. The structure of the adapter and the serializer, which allows easy modifications.

Ember Data Endpoint Issue

I am experiencing a weird issue while using ember data. With the following user model everything works great.
App.User= DS.Model.extend({
firstName: attr(),
lastName: attr()
});
I call user.save() and is posts to /users with the correct data. However when i try and use a user model that has relationships on it
App.User= DS.Model.extend({
firstName: DS.attr('string'),
lastName: DS.attr('string'),
friends: DS.hasMany('user'),
followers: DS.hasMany('user'),
});
For some reason with that model when i call user.save() it posts to /Users (note the capitalization. Also, in the response it expects it formatted {"User": {...}} instead of {"user": {...}}
Anyone run into this before? I could always add the additional endpoints to my api however I would like it to work uniform if possible.
I did a little more digging and it seems when you add a relationship to the model there is a computed property called relationshipsByName. This property, in my example, will set the meta.type property to 'User'. It works without relationships because I called the createRecord method with 'user' so i assume it uses this as the type. When the relationship is added it uses 'User'
I found that modelFor calls the resolvers normalize on the keys. So the solution is to add a custom resolver like below.
App = Ember.Application.create({
Resolver: Ember.DefaultResolver.extend({
normalize: function(fullName) {
var n = this._super(fullName);
if(fullName.startsWith('model')){
n = n.replaceAt(6, n[6].toLowerCase());
}
return n;
}
})
});
*note i have string extensions for startsWith and replaceAt

Ember Data 1.0.0: what is expected format for belongsTo relationship

I have the following models:
App.Publication = DS.Model.extend({
title: DS.attr('string'),
bodytext: DS.attr('string'),
author: DS.belongsTo('author')
});
App.Author = DS.Model.extend({
name: DS.attr('string')
});
And the folowing json data:
{
"publications": [
{
id: '1',
title: 'first title',
bodytext: 'first body',
author_id: 100
},
{
id: '2',
title: 'second title',
bodytext: 'second post',
author_id: 200
}
];
}
In Ember Data RC12 this worked (you could specify author_id OR author in the json and the publication would always have the correct author linked).
In Ember Data 1.0.0 this no longer works; author is always null.
In some documents I found that - since I am using "author_id" in the json data (and not simply author) - I need to specify the key in the model; thus:
author: DS.belongsTo('author', { key: 'author_id' })
This however does not work; the author in the publication remains null.
The only solution I see for now is to implement a custom serializer and override the author_id to author (via normailzeId); I cannot change my backend data structure ... thus:
App.MySerializer = DS.RESTSerializer.extend({
//Custom serializer used for all models
normalizeId: function (hash) {
hash.author = hash.author_id;
delete hash.author_id;
return hash;
}
});
Is the above the correct way ?
Ember Data 1.0 no longer does any payload normalization by default. The key configuration for DS.belongsTo has been removed as well so you will have to implement a custom serializer.
normalizeId is an internal serializer function used for converting primary keys to always be available at id. You shouldn't override this.
Instead, you can override the keyForRelationship method which is provided for this purpose.
You could use something like the following:
App.ApplicationSerializer = DS.RESTSerializer.extend({
keyForRelationship: function(rel, kind) {
if (kind === 'belongsTo') {
var underscored = rel.underscore();
return underscored + "_id";
} else {
var singular = rel.singularize();
var underscored = singular.underscore();
return underscored + "_ids";
}
}
});
Note: I've also renamed the serializer to App.ApplicationSerializer so that it will be used as the default serializer for your application.
Finally, if you haven't already found it, please take a look at the transition notes here: https://github.com/emberjs/data/blob/master/TRANSITION.md
If you read through the transition document shortly after the initial 1.0.0.beta.1 release I would recommend taking a look again as there have been a number of additions, particularly regarding serialization.
From the Ember 1.0.0 Transition Guide:
Underscored Keys, _id and _ids
In 0.13, the REST Adapter automatically camelized incoming keys for you. It also expected belongsTo relationships to be listed under name_id and hasMany relationships to be listed under name_ids.
If your application returns json with underscored attributes and _id or _ids for relation, you can extend ActiveModelSerializer and all will work out of the box.
App.ApplicationSerializer = DS.ActiveModelSerializer.extend({});
Note: DS.ActiveModelSerializer is not to be confused with the ActiveModelSerializer gem that is part of Rails API project. A conventional Rails API project with produce underscored output and the DS.ActiveModelSerializer will perform the expected normalization behavior such as camelizing property keys in your JSON.

Non-persistent attributes in EmberJS

Does anyone know of a way to specify for an Ember model an attribute which is not persisted?
Basically, we're loading some metadata related to each model and sending that data to Ember via the RESTAdapter within the model. This metadata can be changed in our app, but is done via using an AJAX call. Once the call succeeds, I want to be able to update this value within the model without Ember sticking its nose in this business by changing the model to the uncommitted and doing whatever it does with transactions behind the scenes.
I also have the problem that this metadata, which is not data from the model's database record, is passed by the RESTAdapter back to the server, which doesn't expect these values. I am using a RoR backend, so the server errors out trying to mass-assign protected attributes which aren't meant to be attributes at all. I know I can scrub the data received on the server, but I would prefer the client to be able to distinguish between persistent data and auxiliary data.
So, to the original question: is there any alternative to Ember-Data's DS.attr('...') which will specify a non-persistent attribute?
The other answers to this question work with Ember data versions up to 0.13, and no longer work.
For Ember data 1.0 beta 3 you can do:
App.ApplicationSerializer = DS.RESTSerializer.extend({
serializeAttribute: function(record, json, key, attribute) {
if (attribute.options.transient) {
return;
}
return this._super(record, json, key, attribute);
}
});
Now you can use transient attributes:
App.User = DS.Model.extend({
name: DS.attr('string', {transient: true})
});
These attributes won't be sent to the server when saving records.
When this PR get's merged it will be possible to flag properties as readOnly. But till then there are some workarounds to this, e.g. overriding your addAttributes method in the Adapter and deal with your special properties, here an example how this could look like:
Define your Model by adding the new option readOnly:
App.MyModel = DS.Model.extend({
myMetaProperty: DS.attr('metaProperty', {readOnly: true})
});
and then on the Adapter:
App.Serializer = DS.RESTSerializer.extend({
addAttributes: function(data, record) {
record.eachAttribute(function(name, attribute) {
if (!attribute.options.readOnly) {
this._addAttribute(data, record, name, attribute.type);
}
}, this);
}
});
what this does is to loop over the attributes of your model and when it find's an attribute with the readOnly flag set it skips the property.
I hope this mechanism works for your use case.
Following this answer, to prevent a field from being serialized, override the default serializer for your model:
In app/serializers/person.js:
export default DS.JSONSerializer.extend({
attrs: {
admin: { serialize: false }
}
});
See here for the source PR. This solution works in Ember Data 2, and should work in older versions as well.
Update
This answer is most likely out of date with the current releases of Ember Data. I wouldn't use anything in my answer.
I'm answering this question for reference, and because your comment indicated that the record remains isDirty, but here is my solution for read-only, non-persistent, non-dirty attributes.
Overriding the addAtributes method in your Serializer prevents readOnly attributes from being sent to the server, which is probably exactly what you want, but you need to extend (or reopen) your adapter to override the dirtyRecordsForAttributeChange to prevent the record from becoming dirty:
App.CustomAdapter = DS.RESTAdapter.extend({
dirtyRecordsForAttributeChange: function(dirtySet, record, attrName, newValue, oldValue) {
meta = record.constructor.metaForProperty(attrName);
if (meta && meta.options.readOnly) { return; }
this._super.apply(this, arguments);
};
});
Then you can use readOnly attributes like so:
App.User = DS.Model.extend({
name: DS.attr('string', {readOnly: true})
});
user = App.User.find(1); # => {id: 1, name: 'John Doe'}
user.set('name', 'Jane Doe'); #
user.get('isDirty') # => false
This setup is working for me.