Table Of Contents
* 🤓INTRODUCTION
* 🔢PAGINATION
* 🙏THANK YOU
🤓INTRODUCTION
Hello, everybody. I hope you are all having a great day coding!🔥
I was just starting my personal project for my web presentation (portfolio/presentation/store) project, and I am using the Dev API to get my articles and reference them on my website. Everything went ok, I was getting articles using this endpoint with my username:
https://dev.to/api/articles?username=username&page=1&per_page=4
🔢PAGINATION
I have a total of 12 articles written on the Dev platform. Of course, the above endpoint gets everything I need, 4 articles per page (current page is 1); I was trying to make a custom pagination. I was looking through the response I got from an API: (Response body structure, taken from Dev API)
[
{
"type_of": "article",
"id": 194541,
"title": "There's a new DEV theme in town for all you 10x hackers out there (plus one actually useful new feature)",
"description": "",
"cover_image": "https://res.cloudinary.com/practicaldev/image/fetch/s--74Bl23tz--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://res.cloudinary.com/practicaldev/image/fetch/s--xU8cbIK4--/c_imagga_scale%2Cf_auto%2Cfl_progressive%2Ch_420%2Cq_auto%2Cw_1000/https://thepracticaldev.s3.amazonaws.com/i/8a39dzf3oovzc2snl7iv.png",
"readable_publish_date": "Oct 24",
"social_image": "https://res.cloudinary.com/practicaldev/image/fetch/s--SeMxdKIa--/c_imagga_scale,f_auto,fl_progressive,h_500,q_auto,w_1000/https://res.cloudinary.com/practicaldev/image/fetch/s--xU8cbIK4--/c_imagga_scale%2Cf_auto%2Cfl_progressive%2Ch_420%2Cq_auto%2Cw_1000/https://thepracticaldev.s3.amazonaws.com/i/8a39dzf3oovzc2snl7iv.png",
"tag_list": [
"meta",
"changelog",
"css",
"ux"
],
"tags": "meta, changelog, css, ux",
"slug": "there-s-a-new-dev-theme-in-town-for-all-you-10x-hackers-out-there-plus-one-actually-useful-new-feature-2kgk",
"path": "/devteam/there-s-a-new-dev-theme-in-town-for-all-you-10x-hackers-out-there-plus-one-actually-useful-new-feature-2kgk",
"url": "https://dev.to/devteam/there-s-a-new-dev-theme-in-town-for-all-you-10x-hackers-out-there-plus-one-actually-useful-new-feature-2kgk",
"canonical_url": "https://dev.to/devteam/there-s-a-new-dev-theme-in-town-for-all-you-10x-hackers-out-there-plus-one-actually-useful-new-feature-2kgk",
"comments_count": 37,
"positive_reactions_count": 12,
"public_reactions_count": 142,
"collection_id": null,
"created_at": "2019-10-24T13:41:29Z",
"edited_at": "2019-10-24T13:56:35Z",
"crossposted_at": null,
"published_at": "2019-10-24T13:52:17Z",
"last_comment_at": "2019-10-25T08:12:43Z",
"published_timestamp": "2019-10-24T13:52:17Z",
"user": {
"name": "Ben Halpern",
"username": "ben",
"twitter_username": "bendhalpern",
"github_username": "benhalpern",
"website_url": "http://benhalpern.com",
"profile_image": "https://res.cloudinary.com/practicaldev/image/fetch/s--Y1sq1tFG--/c_fill,f_auto,fl_progressive,h_640,q_auto,w_640/https://thepracticaldev.s3.amazonaws.com/uploads/user/profile_image/1/f451a206-11c8-4e3d-8936-143d0a7e65bb.png",
"profile_image_90": "https://res.cloudinary.com/practicaldev/image/fetch/s--DcW51A6v--/c_fill,f_auto,fl_progressive,h_90,q_auto,w_90/https://thepracticaldev.s3.amazonaws.com/uploads/user/profile_image/1/f451a206-11c8-4e3d-8936-143d0a7e65bb.png"
},
"organization": {
"name": "The DEV Team",
"username": "devteam",
"slug": "devteam",
"profile_image": "https://res.cloudinary.com/practicaldev/image/fetch/s--0kDBq1Ne--/c_fill,f_auto,fl_progressive,h_640,q_auto,w_640/https://thepracticaldev.s3.amazonaws.com/uploads/organization/profile_image/1/0213bbaa-d5a1-4d25-9e7a-10c30b455af0.png",
"profile_image_90": "https://res.cloudinary.com/practicaldev/image/fetch/s--8tTU-XkZ--/c_fill,f_auto,fl_progressive,h_90,q_auto,w_90/https://thepracticaldev.s3.amazonaws.com/uploads/organization/profile_image/1/0213bbaa-d5a1-4d25-9e7a-10c30b455af0.png"
}
}
]
As you can see there is no data in this response about the pagination and by that I mean, for example:
- first page (1)
- current page (1)
- next page (If page=1 then next page is 2)
- total items (Example: total number of articles is 12)
- last page (if per_page is 4 and total items is 12 then the last page is 3)
This response data will make it possible to implement actual pagination. It will make it clear that in total I have 12 articles, and since my per_page is 4, it is easily calculable that I would have 3 pages (3 pagination buttons) that will contain 4 articles per page. For now, I cannot determine how many articles I have in total If I make a GET request with pagination parameters, and that prevents me from implementing pagination.
🙏 THANK YOU FOR READING!
Thank you for reading. Let me know what you think about this suggestion, or tell me if I am wrong about this and how can I solve this differently. Maybe, it is a work in progress, but I am new to forem.
Have a nice time hacking! 😊
Latest comments (2)
Hi @codespresso , thanks for taking the time to write this. Unfortunately we don't have pagination headers or information in the response or the response headers at the moment.
I understand it's a bit tricky to build a paginator on top of this.
What I could think of is to do a simple paginator with a
CURRENT_PAGE..NEXTtype of navigation and then decide to render theNEXTonly ifCURRENT_PAGE+1returns results.It's not great but it should work...
Thank you for your response @rhymes !
Sorry for my late answer, I was in the middle of moving to another city (remote work season is over). Of course, the idea is valid but not great, I could certainly make FE pagination while GETting all articles for a specific username that I could optimize to work fast.
This is just my suggestion and I have no doubts that in some future API releases we will have a perfect backend paginated response.
Thank you, again, for your answer and suggestion, and happy hacking!