LoopBack 4 Todo Application Tutorial - Add Todo Model
Page Contents

Models

Now we can begin working on the representation of our data for use with LoopBack 4. To that end, we’re going to create a Todo model that can represent instances of a task for our Todo list. The Todo model will serve both as a Data Transfer Object (also known as a DTO) for representing incoming Todo instances on requests, as well as our data structure for use with the Legacy Juggler.

NOTE: LoopBack 3 treated models as the “center” of operations; in LoopBack 4, that is no longer the case. While LoopBack 4 provides many of the helper methods and decorators that allow you to utilize models in a similar way, you are no longer required to do so!

Building your Todo model

A todo list is all about tracking tasks. For this to be useful, it will need to let you label tasks so that you can distinguish between them, add extra information to describe those tasks, and finally, provide a way of tracking whether or not they’re complete.

For our Todo model to represent our Todo instances, it will need:

  • a unique id
  • a title
  • a description that details what the todo is all about
  • a boolean flag for whether or not we’ve completed the task

Inside the src/models folder, create two files:

  • index.ts
  • todo.model.ts

NOTE: The index.ts file is an export helper file; this pattern is a huge time-saver as the number of models in your project grows, because it allows you to point to the directory when attempting to import types from a file within the target folder. We will use this concept throughout the tutorial! For more info, see TypeScript’s Module Resolution docs.

// in src/models/index.ts
export * from './foo.model';
export * from './bar.model';
export * from './baz.model';

// elsewhere...

// with index.ts
import {Foo, Bar, Baz} from './models';
// ...and without index.ts
import {Foo} from './models/foo.model';
import {Bar} from './models/bar.model';
import {Baz} from './models/baz.model';
// Using an index.ts in your artifact folders really helps keep
// things tidy and succinct!

For the Legacy Juggler to understand how to work with our model class, it will need to extend the Entity type, as well as provide an override for the getId function, so that it can retrieve a Todo model’s ID as needed.

src/models/todo.model.ts

import {Entity, property, model} from '@loopback/repository';

@model()
export class Todo extends Entity {
  @property({
    type: 'number',
    id: true,
  })
  id?: number;

  @property({
    type: 'string',
    required: true,
  })
  title: string;

  @property({
    type: 'string',
  })
  desc?: string;

  @property({
    type: 'boolean',
  })
  isComplete: boolean;

  getId() {
    return this.id;
  }
}

Now that we have our model, it’s time to add a datasource so we can perform real CRUD operations!

Previous step: Adding the Legacy Juggler

Next step: Add a datasource