LoopBack 4 TodoList Application Tutorial - Add TodoList and TodoList's Todo Controller

Defining business logic to handle requests to related models isn’t too differentfrom handling requests for standalone models. We’ll create controllers to handlerequests for todo-lists and todo items under a todo-list.

Create TodoList controller

Run the CLI command for creating a RESTful CRUD controller for our TodoListroutes with the following inputs:

  1. $ lb4 controller
  2. ? Controller class name: TodoList
  3. Controller TodoList will be created in src/controllers/todo-list.controller.ts
  5. ? What kind of controller would you like to generate? REST Controller with CRUD functions
  6. ? What is the name of the model to use with this CRUD repository? TodoList
  7. ? What is the name of your CRUD repository? TodoListRepository
  8. ? What is the name of ID property? id
  9. ? What is the type of your ID? number
  10. ? What is the base HTTP path name of the CRUD operations? /todo-lists
  11.    create src/controllers/todo-list.controller.ts
  12.    update src/controllers/index.ts
  14. Controller TodoList was created in src/controllers/

And voilà! We now have a set of basic APIs for todo-lists, just like that!

In order to get our related Todos for each TodoList, let’s update theschema.

In src/models/todo-list.controller.ts, first import getModelSchemaRef from@loopback/rest.

Then update the following schemas in responses’s content:

src/models/todo-list.controller.ts

  1. @get('/todo-lists', {
  2.   responses: {
  3.     '200': {
  4.       description: 'Array of TodoList model instances',
  5.       content: {
  6.         'application/json': {
  7.           schema: {
  8.             type: 'array',
  9.             items: getModelSchemaRef(TodoList, {includeRelations: true}),
  10.           },
  11.         },
  12.       },
  13.     },
  14.   },
  15. })
  16. async find(/*...*/) {/*...*/}
  18. @get('/todo-lists/{id}', {
  19.   responses: {
  20.     '200': {
  21.       description: 'TodoList model instance',
  22.       content: {
  23.         'application/json': {
  24.           schema: getModelSchemaRef(TodoList, {includeRelations: true}),
  25.         },
  26.       },
  27.     },
  28.   },
  29. })
  30. async findById(/*...*/) {/*...*/}

Let’s also update it in the TodoController:

src/models/todo.controller.ts

  1. @get('/todos', {
  2.   responses: {
  3.     '200': {
  4.       description: 'Array of Todo model instances',
  5.       content: {
  6.         'application/json': {
  7.           schema: {
  8.             type: 'array',
  9.             items: getModelSchemaRef(Todo, {includeRelations: true}),
  10.           },
  11.         },
  12.       },
  13.     },
  14.   },
  15. })
  16. })
  17. async findTodos(/*...*/) {/*...*/}
  19. @get('/todos/{id}', {
  20.   responses: {
  21.     '200': {
  22.       description: 'Todo model instance',
  23.       content: {
  24.         'application/json': {
  25.           schema: getModelSchemaRef(Todo, {includeRelations: true}),
  26.         },
  27.       },
  28.     },
  29.   },
  30. })
  31. async findTodoById(/*...*/) {/*...*/}

Create TodoList’s Todo controller

For the controller handling Todos of a TodoList, we’ll start with an emptycontroller:

  1. $ lb4 controller
  2. ? Controller class name: TodoListTodo
  3. Controller TodoListTodo will be created in src/controllers/todo-list-todo.controller.ts
  5. ? What kind of controller would you like to generate? Empty Controller
  6.    create src/controllers/todo-list-todo.controller.ts
  7.    update src/controllers/index.ts
  9. Controller TodoListTodo was created in src/controllers/

Let’s add in an injection for our TodoListRepository:

src/controllers/todo-list-todo.controller.ts

  1. import {repository} from '@loopback/repository';
  2. import {TodoListRepository} from '../repositories';
  4. export class TodoListTodoController {
  5.   constructor(
  6.     @repository(TodoListRepository) protected todoListRepo: TodoListRepository,
  7.   ) {}
  8. }

We’re now ready to add in some routes for our todo requests. To call the CRUDmethods on a todo-list’s todo items, we’ll first need to create a constrainedTodoRepository. We can achieve this by using our repository instance’s todosfactory function that we defined earlier in TodoListRepository.

The POST request from /todo-lists/{id}/todos should look similar to thefollowing request:

src/controllers/todo-list-todo.controller.ts

  1. import {repository} from '@loopback/repository';
  2. import {TodoListRepository} from '../repositories';
  3. import {post, param, requestBody} from '@loopback/rest';
  4. import {Todo} from '../models';
  6. export class TodoListTodoController {
  7.   constructor(
  8.     @repository(TodoListRepository) protected todoListRepo: TodoListRepository,
  9.   ) {}
  11.   @post('/todo-lists/{id}/todos')
  12.   async create(
  13.     @param.path.number('id') id: number,
  14.     @requestBody({
  15.       content: {
  16.         'application/json': {
  17.           schema: getModelSchemaRef(Todo, {exclude: ['id']}),
  18.         },
  19.       },
  20.     })
  21.     todo: Omit<Todo, 'id'>,
  22.   ) {
  23.     return this.todoListRepo.todos(id).create(todo);
  24.   }
  25. }

Using our constraining factory as we did with the POST request, we’ll definethe controller methods for the rest of the HTTP verbs for the route. Thecompleted controller should look as follows:

src/controllers/todo-list-todo.controller.ts

  1. import {
  2.   Count,
  3.   CountSchema,
  4.   Filter,
  5.   repository,
  6.   Where,
  7. } from '@loopback/repository';
  8. import {
  9.   del,
  10.   get,
  11.   getModelSchemaRef,
  12.   getWhereSchemaFor,
  13.   param,
  14.   patch,
  15.   post,
  16.   requestBody,
  17. } from '@loopback/rest';
  18. import {Todo} from '../models';
  19. import {TodoListRepository} from '../repositories';
  21. export class TodoListTodoController {
  22.   constructor(
  23.     @repository(TodoListRepository) protected todoListRepo: TodoListRepository,
  24.   ) {}
  26.   @post('/todo-lists/{id}/todos', {
  27.     responses: {
  28.       '200': {
  29.         description: 'TodoList.Todo model instance',
  30.         content: {'application/json': {schema: getModelSchemaRef(Todo)}},
  31.       },
  32.     },
  33.   })
  34.   async create(
  35.     @param.path.number('id') id: number,
  36.     @requestBody({
  37.       content: {
  38.         'application/json': {
  39.           schema: getModelSchemaRef(Todo, {exclude: ['id']}),
  40.         },
  41.       },
  42.     })
  43.     todo: Omit<Todo, 'id'>,
  44.   ): Promise<Todo> {
  45.     return this.todoListRepo.todos(id).create(todo);
  46.   }
  48.   @get('/todo-lists/{id}/todos', {
  49.     responses: {
  50.       '200': {
  51.         description: "Array of Todo's belonging to TodoList",
  52.         content: {
  53.           'application/json': {
  54.             schema: {type: 'array', items: getModelSchemaRef(Todo)},
  55.           },
  56.         },
  57.       },
  58.     },
  59.   })
  60.   async find(
  61.     @param.path.number('id') id: number,
  62.     @param.query.object('filter') filter?: Filter<Todo>,
  63.   ): Promise<Todo[]> {
  64.     return this.todoListRepo.todos(id).find(filter);
  65.   }
  67.   @patch('/todo-lists/{id}/todos', {
  68.     responses: {
  69.       '200': {
  70.         description: 'TodoList.Todo PATCH success count',
  71.         content: {'application/json': {schema: CountSchema}},
  72.       },
  73.     },
  74.   })
  75.   async patch(
  76.     @param.path.number('id') id: number,
  77.     @requestBody({
  78.       content: {
  79.         'application/json': {
  80.           schema: getModelSchemaRef(Todo, {partial: true}),
  81.         },
  82.       },
  83.     })
  84.     todo: Partial<Todo>
  85.     @param.query.object('where', getWhereSchemaFor(Todo)) where?: Where<Todo>,
  86.   ): Promise<Count> {
  87.     return this.todoListRepo.todos(id).patch(todo, where);
  88.   }
  90.   @del('/todo-lists/{id}/todos', {
  91.     responses: {
  92.       '200': {
  93.         description: 'TodoList.Todo DELETE success count',
  94.         content: {'application/json': {schema: CountSchema}},
  95.       },
  96.     },
  97.   })
  98.   async delete(
  99.     @param.path.number('id') id: number,
  100.     @param.query.object('where', getWhereSchemaFor(Todo)) where?: Where<Todo>,
  101.   ): Promise<Count> {
  102.     return this.todoListRepo.todos(id).delete(where);
  103.   }
  104. }

Check out our TodoList example to see the full source code generated for theTodoListTodo controller:src/controllers/todo-list-todo.controller.ts

Try it out

With the controllers complete, your application is ready to start up again!@loopback/boot should wire up everything for us when we start the application,so there’s nothing else we need to do before we try out our new routes.

  1. $ npm start
  2. Server is running at http://127.0.0.1:3000

Here are some new requests you can try out:

  • POST /todo-lists with a body of { "title": "grocery list" }.
  • POST /todo-lists/{id}/todos using the ID you got back from the previousPOST request and a body for a todo. Notice that response body you get backcontains property todoListId with the ID from before.
  • GET /todo-lists/{id}/todos and see if you get the todo you created frombefore.And there you have it! You now have the power to define APIs for related models!

Navigation

Previous step: Add TodoList repository