Ember JS: Assertion Failed: `AdapterError` expects json-api formatted errors array

Question

I am making my first Ember/Phoenix app using JSONAPIAdapter. When doing a post request Ember responds with Assertion Failed: AdapterError expects json-api formatted errors array.

Below is the relevant code:

adapter/application.js

import DS from 'ember-data';
import DataAdapterMixin from 'ember-simple-auth/mixins/data-adapter-mixin';
import config from '../config/environment';

export default DS.JSONAPIAdapter.extend(DataAdapterMixin, {

});

serializers/application.js

import DS from 'ember-data';

export default DS.JSONAPISerializer.extend({

});

request payload:

{
    "data": {
        "attributes": {
            "name": ""
        },
        "relationships": {
            "user": {
                "data": {
                    "type": "users",
                    "id": "1"
                }
            }
        },
        "type": "listings"
    }
}

response payload:

{"errors":{"name":["can't be blank"]}}

Why does Ember keeps giving me this error?

Answer 1

Your response payload is not correct. You are using json-api. So your payloads have to follow the json-api specification. Your request-payload looks correct. But check out how errors have to be serialized. A json-api error response must contain a root key "errors" holding an array of error-objects. Regarding the documenation an error may contain several members, but the two most important are detail and source.

Here's an example:

{
  "errors":[
    {
       "detail": "can't be blank",
       "source": {
         "pointer": "data/attributes/name"
       }
    }
  ]
}

The source-key contains a json-object holding a json-api-pointer. With the help of this pointer information ember's JSONAPI-Adapter adds the errors to the corresponding attributes of your record. Note that your backend needs to send a 422 HTTP status code (Unprocessable Entity).

If that works you can do something like that at client:

{{#each model.errors.name as |error|}}
  <div class="error">
    {{error.message}}
  </div>
{{/each}}

How do you serialize your errors at backend? Are you using ja_serializer? If not, I would recommend it, because ja_serializer can serialize json-api-errors by default.