Server component shared between action and client component

[Bistaff]

Hi all,

Im my component there is a form. When this form is submitted the action method is called.
In the action method I have to execute 3 api calls, and after every api I need to update the Stepper (Mantine) in the client component. So, the action method starts, executes 3 api calls and returns:

action() {
   ....
   apiOne()
   setData("one")
   apiTwo()
   setData("two")
   apiThree()
   setData("three")
   return ...
}

I tried with a Singleton instance in a server component with the help of rxjs, but it's not working, because I can't create a subscription to the server component Subject from the client component.

Anyone can help me?

[alexanderson1993]

Looks like you'll want to implement some kind of realtime connection to the server, either with Server-Sent Events, or Websockets. Before submitting the action, make sure the client is connected to it and instead of setData, trigger the SSE or WS with the data using some kind of event emitter. Then have the client listener grab the data that was sent and call setData.

Remix-utils might come in handy if you go with Server-Sent Events https://github.com/sergiodxa/remix-utils#server-sent-events