Forem Creators and Builders

Cover image for Pagination response suggestion 🚀
Lazar Stankovic
Lazar Stankovic

Posted on

Pagination response suggestion 🚀

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"
    }
  }
]
Enter fullscreen mode Exit fullscreen mode

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! 😊

Discussion (2)

Collapse
rhymes profile image
rhymes • Edited

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..NEXT type of navigation and then decide to render the NEXT only if CURRENT_PAGE+1 returns results.

It's not great but it should work...

Collapse
codespresso profile image
Lazar Stankovic Author

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!