Server Actions - useFormStatus
Unanswered
White Ibis posted this in #help-forum
White IbisOP
I have an application that has a form currently on client-side.
How it works: When user submits the form --> loading bar pops up --> client side fetch and based on response, moves loading bar 50% or display failed message --> another client side fetch and based on response, moves loading bar to 100% or display failed message.
Would this be possible to do using Server Actions? I know there's a useFormStatus hook but I think I can only get whether it's pending or not. Is there a way to like set a custom form status in between lines of the server action? I don't think there is a 'setFormStatus', so kind of lost here. Could I like somehow 'stream' a custom form status?
Displaying the 50% loading bar status is very important to my application.
How it works: When user submits the form --> loading bar pops up --> client side fetch and based on response, moves loading bar 50% or display failed message --> another client side fetch and based on response, moves loading bar to 100% or display failed message.
Would this be possible to do using Server Actions? I know there's a useFormStatus hook but I think I can only get whether it's pending or not. Is there a way to like set a custom form status in between lines of the server action? I don't think there is a 'setFormStatus', so kind of lost here. Could I like somehow 'stream' a custom form status?
Displaying the 50% loading bar status is very important to my application.
17 Replies
@White Ibis Check out this example in nextjs docs
https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions#custom-invocation-without-starttransition
Here they have made a function increment and called it with await inside a client function, similarly you can make two functions as server actions and call them in a client function. When one await call is complete, set the loading state to 50% in client component, when the second resolves set it to 100%
https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions#custom-invocation-without-starttransition
Here they have made a function increment and called it with await inside a client function, similarly you can make two functions as server actions and call them in a client function. When one await call is complete, set the loading state to 50% in client component, when the second resolves set it to 100%
White IbisOP
Interesting. The issue with this would be that, I would have to show a specific message based on response from the fetch made by server action. And as far as I understand, I don't think you can pass fetch results from server action to client?
I guess you can maybe store fetch results in your database from the server action. And then use revalidate on the page to show the response, but I feel like that could become complicated
I guess you can maybe store fetch results in your database from the server action. And then use revalidate on the page to show the response, but I feel like that could become complicated
@White Ibis Interesting. The issue with this would be that, I would have to show a specific message based on response from the fetch made by server action. And as far as I understand, I don't think you can pass fetch results from server action to client?
I guess you can maybe store fetch results in your database from the server action. And then use revalidate on the page to show the response, but I feel like that could become complicated
Yeah, thats the part i find myself struggling over too, how to get response from server actions to the client component
White IbisOP
yeah, I was reading this article just now:
https://zainmughalkpk.medium.com/new-nextjs-hook-useformstatus-4069258cd7da
https://zainmughalkpk.medium.com/new-nextjs-hook-useformstatus-4069258cd7da
this guy uses some setFormStatus hook
but I don't think it even exists lol
@White Ibis but I don't think it even exists lol
Lmao I was reading about it right now, its on the same page but down below
https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions#experimental-useformstatus
Its still experimental tho
https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions#experimental-useformstatus
Its still experimental tho
@discodian Lmao I was reading about it right now, its on the same page but down below
https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions#experimental-useformstatus
Its still experimental tho
White IbisOP
yeah i read this too, but it only had pending status look slike
there's not reference to 'setFormStatus' that this guy in the article is using
would be super cool if we could have a setFormStatus('custom message) within the server action
I guess I'll just keep my current client side method
also, do you know if the server action will continue to run if it's not finished even if the client refreshes page or closes page
@White Ibis also, do you know if the server action will continue to run if it's not finished even if the client refreshes page or closes page
It should continue running, but I'll try doing this
@discodian It should continue running, but I'll try doing this
White IbisOP
hmm, in that case I think client side is better for my use case. Because I have a form submit function that will call an api every 5 seconds to check if a request is processed. If it's a particularly large request, could take up to 5 mins. After 5 requests, I'll tell the user to come back to the page after a few mins. Since they won't be on the page, the fetch (serverless function) won't keep running every 5 seconds, and I'd save on compute.
But if server actions will continue to run, that's a bit of a dealbreaker for me
But if server actions will continue to run, that's a bit of a dealbreaker for me
@White Ibis hmm, in that case I think client side is better for my use case. Because I have a form submit function that will call an api every 5 seconds to check if a request is processed. If it's a particularly large request, could take up to 5 mins. After 5 requests, I'll tell the user to come back to the page after a few mins. Since they won't be on the page, the fetch (serverless function) won't keep running every 5 seconds, and I'd save on compute.
But if server actions will continue to run, that's a bit of a dealbreaker for me
I think youre right, only the first request is important, if user leaves the page after that it doesnt affect the computation in backend in any way. Still the perfectionist inside me want to make this work with server actions somehow
People have raised the same query before, wish they introduce something in the next release
https://github.com/vercel/next.js/issues/49232#issuecomment-1549836185/
https://github.com/vercel/next.js/issues/49232#issuecomment-1549836185/
@White Ibis Interesting. The issue with this would be that, I would have to show a specific message based on response from the fetch made by server action. And as far as I understand, I don't think you can pass fetch results from server action to client?
I guess you can maybe store fetch results in your database from the server action. And then use revalidate on the page to show the response, but I feel like that could become complicated
White IbisOP
I think this is the only way atm tbh