In this\u00a0Ember.js example, I’ll show\u00a0how to get ember-cli-mirage to return correct JSON-API response, so that\u00a0Ember Data correctly processes Error message and makes it\u00a0accessible inside the template.<\/p>\n
This code was tested on Ember 2.6.0.<\/p>\n
We have the following\u00a0registration model:<\/p>\n
import Model from 'ember-data\/model';\r\nimport attr from 'ember-data\/attr';\r\n\r\nexport default Model.extend({\r\n firstname: attr('string'),\r\n lastname: attr('string'),\r\n});<\/pre>\nThere are\u00a0three main\u00a0elements\u00a0that make this work: Controller<\/strong> that saves the data, Template<\/strong> that renders\u00a0form and errors, and Mirage<\/strong> that mocks the response.<\/p>\nController’s save action is very basic,\u00a0it calls save on the model and\u00a0catches any errors:<\/p>\n
import Ember from 'ember';\r\n\r\nexport default Ember.Controller.extend({\r\n actions: {\r\n save() {\r\n this.get('model').save().then((registration) => {\r\n \/\/ it's a mock, we don't do anything\r\n }).catch((adapterError) => {\r\n \/\/ we just need to catch error\r\n });\r\n }\r\n }\r\n});\r\n<\/pre>\nTemplate displays form and any connected errors:<\/p>\n
\r\n<form>\r\n <p>\r\n <label>First name: {{input value=model.firstname}}<\/label>\r\n {{#each model.errors.firstname as |error|}}\r\n <span class="errors">{{error.message}}<\/span>\r\n {{\/each}}\r\n <\/p>\r\n <p>\r\n <label>Last name:\r\n {{input value=model.lastname}}\r\n <\/label>\r\n {{#each model.errors.lastname as |error|}}\r\n <span class="errors">{{error.message}}<\/span>\r\n {{\/each}}\r\n <\/p>\r\n <button {{action 'save'}}>Save<\/button>\r\n<\/form>\r\n<\/pre>\nNow we only need to setup Ember Mirage. We emulate two different states. If firstname is ‘John’, we let request come through, and in all other cases we display error.<\/p>\n
\r\nimport Response from 'ember-cli-mirage\/response';\r\n\r\nexport default function() {\r\n\r\n this.namespace = '\/api';\r\n\r\n this.post('registrations', function(schema, request) {\r\n let attrs = JSON.parse(request.requestBody).data.attributes;\r\n\r\n if ( attrs.firstname === 'John') {\r\n return {\r\n 'id': 1,\r\n 'firstname': 'John',\r\n 'lastname': attrs.lastname\r\n }\r\n } else {\r\n return new Response(422, {}, {\r\n "errors": [\r\n {\r\n "source": { "pointer": "\/data\/attributes\/firstname"},\r\n "detail": "Please enter John as name"\r\n }\r\n ]}\r\n );\r\n }\r\n });\r\n}\r\n<\/pre>\nIn the above example, it’s important that we return error code 422 (Unprocessable Entity), otherwise it will not be processed by JSONAPIAdapter as error.<\/p>\n
Example repository<\/h2>\n