#Server action not resolving on page navigation

3 messages · Page 1 of 1 (latest)

alpine nimbus
#

I ran into a sticky little issue with actions recently and I am hoping I might get some clarity in here. I am using server actions to get data from my db directly and then using the action client side in React Query hooks. It works great, but if a user navigates away from a page while the action is still fetching it never resolves.

For example, let's say I'm fetching the most recent action for a bunch of users in parallel and displaying the most recent action on a user card on the users page. The first half of them have loaded/resolved and the user clicks on a profile card to navigate to the profile page. When they come back to the users page the actions that hadn't resolved are stuck in an endless fetching state.

It feels like the action ID used to identify the action might be changing from page to page or the action is linked to the component render lifecycle.

I've played with setting timeouts and been able to put together a hacky fix where I cancel the query if it takes longer than x seconds to resolve and then refetch, but it doesn't feel like I should need to do this.

I don't run into the same issues if I just create an API endpoint and ping that thing instead of using an action.

I realize I am probably pushing actions to the limit by following this pattern, and maybe that's why there are no examples like this in the docs, but I was super hyped on actions and thought this was a killer way to use them since React Query accepts anything that returns a promise. At the end of the day these actions are essentially just that, a promise, and they would let me bypass creating an API layer for a single client (my front end) and maybe even be slightly more performant.

Has anyone else run into anything like this? Any feedback? Am I just using the actions incorrectly even though it technically works for fetching data and not just mutations? Or is this an unexpected bug? Perhaps an issue in the implememtation details for actions with Next?

mellow talonBOT
#

🔎 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)

alpine nimbus
#

For anyone that stumbles on this here is the update. I did a little digging in the next repo and found that actions are queued and won't run in parallel, at least when fired from client components. Furthermore, currently running/queued actions are discarded if a user navigates to a new page before the promise has either resolved or rejected. This is a problem when using external async management tools like React Query because it's waiting for the promise to resolve or be rejected and causing React Query to end up in an endless fetching state.

I've put together a simple PR that would resolve or reject the promises on navigation. By guaranteeing the resolution of promises, server actions become more compatible with external asynchronous management tools, broadening their applicability and reliability in complex applications.