Proper way to do table update with pagination

[gordonchanhk]

I am new to Remix but with some experience in ReactJS. I understand Remix render pages in SSR way, but I also wonder how to work out page like having a table with order records but paginated. I assume clicking the next page will fire ajax to route for next page records so then update the table.
What I read is that I should use useFetcher, and fetcher will call the route so the loader will get the data.
So far I see examples all use search param to achieve the goal, while for my case, I wanna pass the direction (next/prev) and a graphql resource cursor in form of form post.
What I experience is, since I am doing formPost, I have no issue to get the form data with await request.formData(), but the loader can't. I can get the wanted data from action function, but the loader still run afterward.

Am I thinking in the wrong approach? Is there a way to skip the loader running and only let the action to return data?

[gordonchanhk]

Hi Mike, Thanks for your prompt input. I read the pagination approach (with fews other online tutorial) but not too fit my need. I would go for using fetcher which result in both action and loader being called. For loader, I read there is no form data, any hint for getting the form fields that you mentioned? I’d like to find way to skip the loader doing the hard works upon ajax fetching the sub pages~ Regards, Gordon

…

On Tue, 15 Aug 2023 at 2:27 AM, roblox34 ***@***.***> wrote: Hey there! It sounds like you're off to a good start with Remix and ReactJS. Regarding your question about paginated tables, have you considered using Remix's built-in pagination feature? It allows you to pass page numbers as search parameters, which can trigger a new loader request for the corresponding page of data. If you prefer to use a form post to pass the direction and cursor, one approach could be to modify the loader to check for the presence of these form fields and use them to fetch the appropriate data. Alternatively, you could skip the loader and have your action function return the data directly, then handle the rendering logic in your component. Let me know if that helps or if you have any other questions! Best, Mike On 14 Aug 2023 at 19:24 +0100, Gordon Chan ***@***.***>, wrote: > I am new to Remix but with some experience in ReactJS. I understand Remix render pages in SSR way, but I also wonder how to work out page like having a table with order records but paginated. I assume clicking the next page will fire ajax to route for next page records so then update the table. > What I read is that I should use useFetcher, and fetcher will call the route so the loader will get the data. > So far I see examples all use search param to achieve the goal, while for my case, I wanna pass the direction (next/prev) and a graphql resource cursor in form of form post. > What I experience is, since I am doing formPost, I have no issue to get the form data with await request.formData(), but the loader can't. I can get the wanted data from action function, but the loader still run afterward. > Am I thinking in the wrong approach? Is there a way to skip the loader running and only let the action to return data? > — > Reply to this email directly, view it on GitHub, or unsubscribe. > You are receiving this because you are subscribed to this thread.Message ID: ***@***.***> — Reply to this email directly, view it on GitHub <#7159 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AEELB2NGYDXRCJJIOXFGNLDXVJU27ANCNFSM6AAAAAA3QB2HNM> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[chenxiaoyao6228]

I have the same issue when building a tree component, since the data is fetched by level(when the parent folder expand) and merge into a tree strcture on the client and it's not so simple as the doc described that we can simply derived state from the loader response