Ember-cli-mirage not showing any data with get

Question

I am learning Ember and I am getting stuck on making the mock api with ember-cli-mirage. I modified the config file as specified in the ember tutorial as well as on the ember-cli-mirage site, but everytime I hit the endpoint I get nothing. Here is my current config file

export default function() {
this.get('/api/users', function() {
return {
  users: [
    {id: 1, name: 'Zelda'},
    {id: 2, name: 'Link'},
    {id: 3, name: 'Epona'},
  ]
}
});
}

Like I said, when I go to /api/users it is just a blank page. Am I missing something here?

Thanks!

Are you manually navigating to `/api/users` within your browser? Hitting that endpoint directly will not trigger the `ember-cli-mirage` pipeline - you need to navigate within your ember app to a location that will cause ember to make the query for you. — Oren Hizkiya, Dec 31 '15 at 04:26
Also, do you have the ember inspector installed? Are there errors being shown in the console? — Oren Hizkiya, Dec 31 '15 at 04:31

score 1 · Answer 1 · answered Mar 24 '17 at 23:39

First thing first, install Ember inspector extension (for Chrome or Firefox) and look in the browser console to see if Mirage is giving you some errors. If nothing is written in there, you are not hitting the endpoint with your ember application. Basically, Mirage proxies all the request from your ember application.

So you need to generate a user model

    ember g model user

and put in there the name attribute.

Create a route and in the model hook write

    return this.get('store').findAll('user');

(look at the quick start tutorial if something is not clear)

So now, leveraging Ember Data, your app will request all users hitting on /users.

Now let's start with mirage, generate a mirage model

    ember g mirage-model user

and follow the mirage quickstart, just adapt it to your needs :)

Start your application with ember s and you should see the request to /users. If you want to put your api on the same domain, but with the /api prefix, then i suggest you to read about endpoint path customization

score 0 · Answer 2 · answered Dec 31 '15 at 04:30

In app/mirage/config.js you can set up mock endpoints for your users:

export default function() {
  this.get('/users');
  this.post('/users');
  this.put('/users/:id');
  this.del('/users/:id');
}

You can set up your mock data by configuring fixtures in app/mirage/fixtures/users.js:

export default [
    {id: 1, name: 'Zelda'},
    {id: 2, name: 'Link'},
    {id: 3, name: 'Epona'},
  ];

score 0 · Answer 3 · answered Dec 31 '15 at 14:36

Mirage isn't an actual server, so you won't be able to hit the API from your browser directly. It's a mock server that lives in JavaScript memory, and is instantiated when your Ember app boots up.

To test out your mocks, have your Ember app make an API request, e.g.

// routes/application.js
export default Ember.Route.extend({
  model() {
    return Ember.$.getJSON('/api/users');
  }
});

If everything's hooked up correctly, you should now see Mirage handling this request and logging the response data in your console.

Ember-cli-mirage not showing any data with get

3 Answers3