DEV Community

loading...
Cover image for How to add pagination in FoalTS

How to add pagination in FoalTS

loicpoullain profile image Loïc Poullain Updated on ・2 min read

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!

Discussion (0)

pic
Editor guide