Next.js & Zustand & SignalR concurrent update issue

Question

Hi I have admin website with list of services in the next.js. When the user updates the service using user web, it triggers the backend and the backend sends a signalR message to the admin website. Then the web receives the message and updates the service card status.

The key here is multiple users can update the service at the same time, and the frontend should received multiple signalR request at the same time. It should process all of the requests and correctly update each service view. For example, if 10 users concurrently pinged that the service has been completed, it the admin web should receive 10 hub request and update 10 matching services.

When I the user sends requests at the same time, the signalR received the message, sends to Zustand where I call below function.

handleCall: (update, id) => {
  set((state) => ({
    calls: state.calls.map((call) => (call.id === id ? update : call)),
  }));
}

However, I only get the first request updated, and the rest are not showing updated in the website. I get the console log for all requests on the hub. However, Zustand messes up when it is trying to update concurrently.

hubConnection.on(TRIPSTART, (stage, trip) => {
  console.log(TRIPSTART, stage, trip);
  const updateTrip = tripConvert(trip);
  if (trip.price == null) {
    toast.error(`Call with ID ${trip.id} doesn't have a price.`, { autoClose: false });
  }
  handleCall(updateTrip, trip.tripID);
});

I can see all concurrently updated services with the console.log. However, I can't get it all updated with Zustand.

I was thinking of making a messageQueue to handle them in order. However, it would be easier if I can make Zustand concurrently update multiple calls at the same time.

Any solutions?

Next.js & Zustand & SignalR concurrent update issue

0 Answers0