This lib paginate any data as array of records using id attribute as cursor.
All record must have id attribute or you must provide a custom cursorKey.
Node Install
$ npm install --save ts-paginate
# or
$ yarn add ts-paginate
You also may use on browser from bundle
<script src="https://cdn.jsdelivr.net/npm/ts-paginate@1.2.4/bundle/index.min.js"></script>
Or from skypack
<script type="module">
import { Pager } from 'https://cdn.skypack.dev/ts-paginate';
</script>
Follow link for browser example: Click Here
Default configs
{ cursorKey: 'id', pageSize: 25 }
import { Pager } from 'ts-paginate';
// default config
const paginate = new Pager().paginate;
Or using a custom config
import { Pager } from 'ts-paginate';
// custom config
const paginate = new Pager({ cursorKey: '_id', pageSize: 15 }).paginate;
import { Pager } from 'ts-paginate';
// set pager
const paginate = new Pager().paginate;
// using after cursor
const result = paginate({
data: dbData,
params: {
size: 7,
after: 'cursor_xya'
}
}).toRest();
console.log(result.pageInfo);
`{
hasNextPage: true,
hasPreviousPage: true,
totalCount: 40,
sizePerPage: 7,
currentItem: 1,
page: {
current: 2,
of: 6
},
firstCursor: 'cursor_xyb',
lastCursor: 'cursor_xyh'
}`
// using before cursor
const result = paginate({
data: dbData,
params: {
size: 7,
before: 'cursor_xyz'
}
}).toRest();
Transform data payload to graphQL node
import { Pager } from 'ts-paginate';
// set pager
const paginate = new Pager().paginate;
const result = paginate({
data: usersData,
params: {
size: 50,
after: 'cursor_xyz'
}
}).toGql();
console.log(result.data[0]);
`{
cursor: 'cursor_xyw',
node: {
id: 'cursor_xyw',
name: 'foo',
email: 'foo@mail.com'
}
}`
Transform data payload to graphQL node
import { Pager } from 'ts-paginate';
interface IUser {
id: string;
name: string;
email: string;
}
// set pager
const paginate = new Pager().paginate;
const result = paginate<IUser>({ data: usersData }).toRest();
// or
const result = paginate<IUser>({ data: usersData }).toGql();
If the amount of records to be displayed changes, first request an update of the value, passing only the value and then navigate informing the cursor
import { Pager } from 'ts-paginate';
const { paginate } = new Pager();
// Request first page with 15 items per page.
const page1a = paginate({ data, params:{ size: 15 }});
// Next > Next: I am on page 3
const page3a = paginate({ data, params: { size: 15, after: 'cursor_30' } });
// I want to change size to 5 items per page
const page1b = paginate({ data, params:{ size: 5 }});
// Next > Next: Now you navigate to page 3. Cursor reference is cursor_10
const page3b = paginate({ data, params:{ size: 5, after: 'cursor_10' }});