INDIA +91 964 309 2571 | USA +1669 327 4700 info@navyuginfo.com

What is Ember-cli mirage
Ember CLI Mirage is a client-side mock server to develop and prototype applications.
At some point, while learning Ember.js you probably have needed to mock some data from your server.
Older Ember.js tutorials recommended developers use the Fixture Adapter. It’s an in-memory data store that could be used with Ember Data. Unfortunately, it’s been deprecated now.

When to use ember-cli mirage
When you want to have a functional prototype of your app and you don’t want to create a fully functional backend but instead just want to mock data then you can use ember-cli mirage.

How it works
It uses a library called Pretender in the background to make this possible.
Pretender will temporarily replace the native XMLHttpRequest object, intercept all requests, and direct them to little pretend service you’ve defined.
A small example using pretender:- (Here we are defining what response will be sent on a get request to /api/songs )

var server = new Pretender(function(){
   this.get('/api/songs', function(request){
  return [200, {}, "{'id': 12}"];
});

How to use ember cli mirage

  • Install ember-cli mirage.
  • Handle all your requests in one file named config.js which is found
    under mirage directory.
   this.get('/users', function(schema,request){ 
      //  Schema is the db    given to us by mirage and request is the full 
          request hijacked by pretender.
     // Here we'll return the data.
})
  • You can then return a response in one of the three ways specified
    below

Returning Response

  1. Return the data in the format specified by JSON API (Jsonapi is the default adapter that ember uses nowadays. Previously it used REST API adapter. The main reason for shifting to JSON API is because jsonapi follows conventions so we are not reinventing the wheel with every project and argue with our team about the way our JSON responses should be formatted. In every project we’ll return the data in same format.)
    Note:- For the next two points to work, we’ll have to define models, like the one’s we define in ember. Why you ask? Because formatting data in jsonapi is very cumbersome. So mirage handles it for us by using jsonapi serializer to format data. All we have to do is write data as json the old-fashioned way. But to make the serialization actually work, mirage requires these models. It has to know if one table is related to another and in what way( It’ll become more clear if you take a look at how responses are returned in jsonapi).
    Disclaimer:- Mirage’s ORM should currently be considered somewhat half-finished.The simple case of one-to-many relationships is supported (even chained). However, one-to-one, many-to-many, polymorphic and reflexive relationships are not yet supported. There are a few ways to get around this for now, which all involve you manually solving this in some way(More about this on official ember-cli mirage website)
  2. We can write fixture data in which we’ll have to hard code every record for our tables. Ember cli mirage will give you a database named schema under which all your tables and their data will be stored. So for example to get all users we can use schema.users.all()
  3. We can use factories provided by mirage. Factories work like generators which generate data for us depending upon the generating function we write. So we can easily populate or seed mirage’s database based using factories and save a lot of time.

Full Example showcasing above points

this.get('/users', function(schema,request){
    if(request.queryParams.email){
      var record =  schema.users.where({email: request.queryParams.email});
      if(record.models.length){ 
         return record.models[0]; }
      else{ 
         return {data: {type: 'users', id: 10023, attributes: undefined}}; } 
         // record not found. Return response in jsonapi format.
    }
    else{
      return schema.users.all();
    }
  });

Resources
https://github.com/pretenderjs/pretender
http://www.ember-cli-mirage.com/
http://jsonapi.org/
http://www.programwitherik.com/ember-mirage-tutorial-and-examples/