How to add pagination in FoalTS
Tags: javascript, node, typescript, opensource
Published: 2019-01-16 09:50:54

---
title: How to add pagination in FoalTS
published: true
description: How to add pagination in FoalTS
cover_image: https://thepracticaldev.s3.amazonaws.com/i/zsn1w6bzs5bwsqhau51r.png
tags: javascript, node, typescript, opensource
---

*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:

```typescript
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:

```typescript
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:

```typescript
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!