Skip to content

Instantly share code, notes, and snippets.

@EWhite613
Last active June 30, 2020 16:17
Show Gist options
  • Save EWhite613/f7e596c1c17136ba2c586eb26f0656fb to your computer and use it in GitHub Desktop.
Save EWhite613/f7e596c1c17136ba2c586eb26f0656fb to your computer and use it in GitHub Desktop.
Show relationship clear

Ember Twiddle Demo: Mirage with Ember Twiddle

Demo

If I have my first store.query('my-model', {}) has the backend return {id: 1 , name: 'Eric', foo: 'bar'}. The store will have that exactly.

But in my next call (say some sort of polling goes on) the backend returns {id: 1, name: 'Erik' } (where foo is gone).

The store (the data returned by query, and peeks of that record)  will have {id: 1, name: 'Erik', foo: 'bar'}, rather then what I would've expected {id: 1, name: 'Erik'}.

This twiddle presents a solution

import Ember from 'ember'
const {$, deprecate, get, inject} = Ember
import DS from 'ember-data'
const {RESTAdapter} = DS
export default RESTAdapter.extend({
coalesceFindRequests: true
})
import Ember from 'ember';
export default Ember.Controller.extend({
actions: {
select () {
this.send('reloadModel')
}
}
});
import Collection from 'ember-cli-mirage/orm/collection';
let count = 0
export default function() {
window.server = this;
this.get('/myModels', function (schema, request) {
let ex = {name: 'Jane Eyre ' + count}
let relationships = {
foobars: {data: [{type: 'my-mod', id:12}]}
}
if (count === 0){
ex.foo = 'bar'
}
if (count === 5) {
relationships = {
foobars: {data: []}
}
}
++count
var posts = [{
id: 1,
attributes: ex,
type: 'my-model',
}, {
id: 2,
attributes: {name: 'Emily Dickinson'},
relationships,
type: 'my-model'
}];
return {data: posts, included: [
{id: 12, type: 'my-mod', attributes: {name: 'Eric'}}
]
};
});
};
import Model from 'ember-data/model';
import attr from 'ember-data/attr';
export default Model.extend({
name: attr('string')
})
import Model from 'ember-data/model';
import attr from 'ember-data/attr';
import { belongsTo, hasMany } from 'ember-data/relationships';
export default Model.extend({
name: attr('string'),
foo: attr(),
foobars: hasMany('my-mod', {async: false})
});
import Ember from 'ember';
export default Ember.Route.extend({
model() {
return this.store.query('my-model', {});
},
actions: {
reloadModel: function() {
this.refresh()
}
}
});
import DS from 'ember-data'
const {JSONAPISerializer} = DS
import { assert, deprecate, runInDebug, warn } from 'ember-data/-private/debug';
import Ember from 'ember'
export default JSONAPISerializer.extend({
})
import DS from 'ember-data'
const {JSONAPISerializer} = DS
import { assert, deprecate, runInDebug, warn } from 'ember-data/-private/debug';
import Ember from 'ember'
export default JSONAPISerializer.extend({
extractAttributes(modelClass, resourceHash) {
// taken from https://github.com/emberjs/data/blob/v2.12.2/addon/serializers/json-api.js#L286
// Removed if around undefined
var attributes = {};
if (resourceHash.attributes) {
const partiallyPopulated = Ember.getWithDefault(resourceHash, 'meta.partiallyPopulated', false)
modelClass.eachAttribute((key) => {
let attributeKey = this.keyForAttribute(key, 'deserialize');
if (resourceHash.attributes[attributeKey] !== undefined || !partiallyPopulated) {
attributes[key] = resourceHash.attributes[attributeKey];
}
runInDebug(() => {
if (resourceHash.attributes[attributeKey] === undefined && resourceHash.attributes[key] !== undefined) {
assert(`Your payload for '${modelClass.modelName}' contains '${key}', but your serializer is setup to look for '${attributeKey}'. This is most likely because Ember Data's JSON API serializer dasherizes attribute keys by default. You should subclass JSONAPISerializer and implement 'keyForAttribute(key) { return key; }' to prevent Ember Data from customizing your attribute keys.`, false);
}
});
});
}
return attributes;
}
})
<header>
<h1>Mirage</h1>
</header>
<ul>
{{#each model as |post|}}
<li>{{post.name}} and {{post.foo}} with relationship {{post.foobars.firstObject.name}}</li>
{{/each}}
</ul>
<button {{action "select"}}>✓</button>
{
"version": "0.11.3",
"ENV": {
"ember-cli-mirage": {
"enabled": true
}
},
"EmberENV": {},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
"ember": "2.12.0",
"ember-template-compiler": "2.12.0"
},
"addons": {
"ember-data": "2.12.2",
"ember-cli-mirage": "0.2.4"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment