how to handle pagination in an external api?

[cursive nexus]

The api i am using accepts certain parameters that i get from formdata and i use formaction. This part works very well, but when i try to implement pagination into the mix it starts to get janky. The same backend also accepts two more parameters, pageindex and pageSize which filters data on the backend.

I cannot ADD pagination to the formData inside my server action. Is there a way to handle this in nextjs?

[somber flower]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[bronze dust]

@cursive nexus so paginating the api won't work and doing it through nextjs is the best method? Like I have an idea but that's for worst case scenario type deal.

[cursive nexus]

No no, it works. I just dont have any idea how to send pageIndex and pageSize to the backend. In normal react, i just save them in a state and send it.
Here, i have formData, but also pageIndex(the page user clicks and pageSize(thr total amount of data fetched from the backend)

The paginator i am using does not have any name or id propertiry that i can use to utilize in FormData

[bronze dust]

So you don't have any way of sending the pageIndex and page size in the form data? Have you tried hidden fields @cursive nexus

[cursive nexus]

https://primereact.org/paginator/

I am using this basically. I ahve not heard of hidden fields before1

[bronze dust]

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/hidden

You can put in the page index and the page size in there and get them as formdata

[cursive nexus]

Will do this tomorrow morning! thanks!

[cursive nexus]

Does not work, by no mean i cannot send Prime React paginator data as formData. How are we suppose to paginate millions of data without fetching them first?

[bronze dust]

So you can't paginate via the api and need to do it natively right?

Like on nextjs

[cursive nexus]

We have an external api written in .net core. The endpoint accepts parametres such as this, that, pageindex,pagesize.

This and that are form values. pageIndex is the page user clicks on pagination and pageSize is mostly harcoded 10.

i can send this and that form data, but when i handle pagechange i need to send pageSize and pageIndex as well. I am starting to think this is not possible to pull off

[bronze dust]

Where are you saving the page index @cursive nexus

In the url?

[cursive nexus]

nope, i am using Prime React paginator. i am extracting them from the event

not saving it anywhere

but after i extract them, i can send it to the backend and fetch data through a different server action, but this time datatable cannot be updated because i am usinf useFormAction and taking returned state and displaying on the datatable.

This way i end up with two different data states. One from form action, the other from pagination response

[bronze dust]

This looks to be something you have complicated a lot, why do you need an action, it looks like you are already using client components for handling pagination

"form action"