How to add pagination in FoalTS

FoalTS is web framework for creating Node.Js applications. It is written in TypeScript, offers built-in dev tools and has a large set of integrated components required in common situations (password encryption, authentication, validation, etc).

When building a REST API, it is very common to add pagination on GET requests. This articles shows you how to do that.

First create a new project.

npm install -g @foal/cli
foal createapp todo-app
cd todo-app
npm run develop

Then generate a new model called Todo:

foal generate entity todo

Open the generated file src/app/entities/todo.entity.ts and complete its content:

import { Column, Entity, PrimaryGeneratedColumn } from 'typeorm';

@Entity()
export class Todo {

  @PrimaryGeneratedColumn()
  id: number;

  @Column()
  text: string;

}

Great!

The next step is to create a controller that will handle GET requests at /todos:

foal generate controller todos --register

Open src/app/controllers/todos.controller.ts and add a new route to list the todos:

import { Get, HttpResponseOK, ValidateQuery, Context } from '@foal/core';
import { getRepository } from 'typeorm';

import { Todo } from '../entities';

export class TodosController {

  @Get()
  @ValidateQuery({
    properties: {
      skip: { type: 'number' },
      take: { type: 'number' },
    },
    type: 'object',
  })
  async readTodos(ctx: Context) {
    const todos = await getRepository(Todo).find({
      skip: ctx.request.query.skip,
      take: ctx.request.query.take
    });
    return new HttpResponseOK(todos);
  }

}

Now, if you send a GET request to http://localhost:3000/todos, the server will respond with an empty array since the database is empty.

You can add todos to your database with a shell script.

foal generate script create-todo

Open the generated file src/scripts/create-todo.ts and complete its content:

import { createConnection } from 'typeorm';
import { Todo } from '../app/entities';

export const schema = {
  properties: {
    text: { type: 'string' }
  },
  required: [ 'text' ],
  type: 'object',
};

export async function main(args) {
  // Create a new connection to the database.
  const connection = await createConnection();

  // Create a new task with the text given in the command line.
  const todo = new Todo();
  todo.text = args.text;

  // Save the task in the database and then display it in the console.
  console.log(
    await connection.manager.save(todo)
  );

  // Close the connection to the database.
  await connection.close();
}

Fill the database with some todos:

npm run build:scripts
foal run create-todo text="Learn TypeScript"
foal run create-todo text="Use FoalTS with MongoDB"
foal run create-todo text="Discover the CLI"
foal run create-todo text="Create a REST API with Foal"
foal run create-todo text="Download VSCode"
foal run create-todo text="Read the docs of TypeORM"

That's it! Now it's time to test the API!

curl http://localhost:3000/todos
curl http://localhost:3000/todos?skip=1
curl http://localhost:3000/todos?take=2
curl "http://localhost:3000/todos?skip=1&take=3"
curl http://localhost:3000/todos?skip=notanumber

Enjoy!

Blog

How to add pagination in FoalTS

Loïc Poullain

Join Our Newsletter. No Spam, Only the good stuff.

Related