Ember.js - Model todo not found when using ember-cli-mirage for a fake model

Question

I am learning ember.js with this tutorial When using ember-cli-mirage to create a fake model for todos like this

import Mirage, {faker} from 'ember-cli-mirage';

export default Mirage.Factory.extend({
    title(i) { return 'Todo title ${i + 1}'; },
    complete: faker.list.random(true, false)
});

my mirage config looks like following

export default function() {
    this.get('/todos', function(db, request) {
        return {
            data: db.todos.map(attrs => (
                {type: 'todos', id: attrs.id, attributes: attrs }
            ))
        };
    });
    this.post('/todos', function(db, request) {
        let attrs = JSON.parse(request.requestBody);
        let todo = db.todos.insert(attrs);
        return {
            data: {
                type: 'todos',
                id: todo.id,
                attributs: todo
            }
        };
    });
    this.patch('/todos/:id', function(db, request) {
        let attrs = JSON.parse(request.requestBody);
        let todo = db.todos.update(attrs.data.id, attrs.data.attributes);
        return {
            data: {
                type: "todos",
                id: todo.id,
                attributes: todo
            }
        };
    });
    this.del('/todos/:id');
}

My confusion is mostly with models. The name of model is 'todos' and ember somehow changes it to 'todo' when dealing with single record.

From my todos route, I return the model as follows

routes/todos.js

  model() {
        return this.store.findAll('todos');
    }

And then I don't understand the above code - tutorial said it should be this.store.findAll(**'todo'**); But that does not return any data to ember console. I changed it to 'todos' and I see some output. (output at the end)

In routes/todos/index.js -- We return modelFor('todos')

  model(){
    return this.modelFor('todos');
  }

And in the template -- todos/index.hbs

<ul id="todo-list">
  {{#each model as |todo| }}
      {{todo-item todo=todo}}
  {{/each}}
</ul>

I understand that index gets this model from todos.hbs's {{outlet}} todos.hbs looks like below

<input type="text" id="new-todo" placeholder="What needs to be done?" />

{{#todo-list todos=model}}
  {{outlet}}
{{/todo-list}}

When I run this application, I get the following error.

In the output, I get the data from the get request on / --> this is todos route But I am not getting the access to todos in the todos/index route.

Thanks for the help. All code snippets are from the tutorial.

Answer 1

Check the following (things I noticed):

1. Is your model file named "todo.js"? It should be singular...
2. Your route should be singular findAll('todo') !
3. Your post route in mirage config has a typo: "attributs: todo" should be attributes.
4. You are returning JSONAPI formatted data. Are you using the JSONAPIAdapter and not the RestAdapter for your application adapter?