Paginación: todo lo que necesitas saber

Lista de técnicas para implementar la paginación de elementos en tus aplicaciones

Image for post
Image for post
SELECT .... LIMIT limit, offset
Image for post
Image for post
Páginas numeradas

Paginar con limit, offset: quizás una mala idea

SELECT * FROM photo ORDER BY createdAt DESC LIMIT 0, 10
SELECT * FROM photo ORDER BY createdAt DESC LIMIT 10, 10
Image for post
Image for post

Paginación estable

SELECT * FROM photo WHERE createdAt < previousDate LIMIT 10
SELECT * FROM photo WHERE createdAt <= previousDate LIMIT 10

Paginación basada en cursor

Image for post
Image for post
// Front page
https://myapi.com/
// Siguiente...
https://myapi.com/?after=t3_49i88b&first=30
// Siguiente...
https://myapi.com/?after=t3_49kej9&first=30

Implementación de paginación basada en cursor

SELECT * FROM posts
WHERE created_at < $after
ORDER BY created_at LIMIT $page_size;
{
cursors: {
after: 23492834 // cursor que "representa" el último elemento
},
posts: [ ... ]
}

Ejemplo de paginación en Twitter

https://api.twitter.com/1.1/search/tweets.json?q=php&since_id=24012619984051000&max_id=250126199840518145&result_type=recent&count=10
"search_metadata": {
"completed_in": 0.047,
"max_id": 1125490788736032770,
"max_id_str": "1125490788736032770",
"next_results": "?max_id=1124690280777699327&q=from%3Atwitterdev&count=2&include_entities=1&result_type=mixed",
"query": "from%3Atwitterdev",
"refresh_url": "?since_id=1125490788736032770&q=from%3Atwitterdev&result_type=mixed&include_entities=1",
"count": 2,
"since_id": 0,
"since_id_str": "0"
}

Relay cursor connections

{
allNews(first: 3, after: "YXJyYXljb25uZWN0aW9uOjI=") {
pageInfo {
startCursor
endCursor
hasNextPage
}
edges {
node {
id
title
body
}
cursor
}
}
}

Conclusiones

¿Quieres recibir más artículos como este?

Entre paseo y paseo con Simba desarrollo en Symfony y React

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store