Sparse Fieldsets or Reload from Component, for Ember Data 2.0+

Question

We're working on a charting application that, for performance reasons, needs a way to split the chart data from some meta data to render charts to select from.

It doesn't appear that Ember-data (currently v2.5.0) supports JSONAPI's Sparse Fieldsets. Does it?

There are probably other options, like using relationships, but the design that's most intuitive to us right now is to break the spec and use different endpoints for when a chart is queried in a collection:

GET ../charts/

{"data": [{
  "type": "charts",
  "id": "1",
  "attributes": {
    "type": "A",
    "precision": "10",
    "average": "22.2",
    "minimum": "20.4",
    "maximum": "25.3",
  },
  {
  "type": "charts",
  "id": "2",
  "attributes": {
    "type": "A",
    "precision": "100",
    "average": "20.0",
    "minimum": "10.0",
    "maximum": "30.0",
  },
  ...
]}

and properly when queried by ID:

GET ../charts/1

{"data": {
  "type": "charts",
  "id": "1",
  "attributes": {
    "type": "A",
    "precision": "10",
    "average": "22.2",
    "minimum": "20.4",
    "maximum": "25.3",
    "history": [
      ["100","21.0"],
      ["200","20.4"],
      ["300","25.3"],
      ...
    ]
  }
}

But we haven't found a way to force EmberData to reload the data from the backend service from a Component. We'd like to use the backgroundReload functionality, as we believe that would provide the best visual results, but all documentation about it is done using model hooks from a Route.

Am I on the right track or has someone solved this?

A note of caution for future Googlers -- this is not using actual JSONapi Sparse Fieldsets with fields[chart]=history but is just relying on breaking the JSONapi spec and returning different attributes for each endpoint.

toobulkeh toobulkeh · Accepted Answer · 2016-04-14T04:25:54

You could inject the store service into the component and forcibly look up that model on hook:

import Ember from 'ember';

export default Ember.Component.extend({
  store: Ember.inject.service(),

  didReceiveAttrs() {
    this._super(...arguments);
    this.get('store').findRecord('chart', this.get('chart').id);
  },
});

EDIT: Note that this still has caching problems from the ember-data level, in that you may run into scenarios where partial attributes may exist or may not.

EDIT: Switched the hook to didReceiveAttrs

Sparse Fieldsets or Reload from Component, for Ember Data 2.0+

1 Answers