Search code examples
reactjsuser-interfaceapache-kafkafrontendcqrs

Question on CQRS and updating UI when data is updated


I'm mostly focused on backend, although technically full stack with react/angular experience but not an expert at frontend.

Let's say we are designing a simple system involving a checkout system using pub/sub messaging system. for my example, I'm thinking Kafka.

User places an order -> goes to inventory check (pub a msg to inventory Q) -> inventory all checks out places the order (pub a msg to order Q)

Pretty familiar with this kind of workflow from the backend. But here is where I struggle.

What's the most standard practice updating the UI when the Data is updated in the DB? Using Kafka, mostly you don't get a response back from consumer, just the fact that you were able to successfully publish the message.

Some answers I found are polling APIs until you get the result you want, in this case when the user places the order, would be polling inventory data, once that's good poll order placed data. Using something like React.

Was wondering if there are more elegant solution.

Thank you all.


Solution

  • Establish a socket connection between your front-end and your back-end there is a useful library that can help you, it is called Socket IO it has server-side and client-side versions and supports many programming languages(support react as well). Even you can set an update trigger on your database and use a socket connection to update your front-end