I have a component where on render I initate an eventsource to get the data. If I go to the previous page using the back button in the browser and then come back on the component then it is fine for the first few times but after that the event source does not fetch the data it is meant to and just shows pending in the network tab. Then to fix this issue I have to refresh the tab again. Ideally, I'd like for it to always restart when the component rerenders and fetch the data everytime. The requests are sent to a spring boot webflux back end but I dont think the issue is on the backend as the controller method doesnt get called? Unless I am wrong? Any help will be appreciated...
import { useEffect,} from "react";
export default function CurrentShifts() {
useEffect(() => {
setTableTypeFunc();
const eventSource = new EventSource(baseUrl + "/shifts/getAllShifts", {
withCredentials: true,
});
// eventSource.addEventListener("message", (event) => {});
eventSource.onopen = (event: any) => console.log("open", event);
eventSource.onmessage = (event: any) => {
const profile = JSON.parse(event.data).source;
};
eventSource.onerror = (event: any) => {
console.log(event);
eventSource.close();
};
}, []);
Below is the back end controller code
@GetMapping(value = "/getAllShifts", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
private Flux<List<Shift>>getAllShifts(@AuthenticationPrincipal User user) {
System.out.println("gets called");
return shiftService.getAllShifts();
}
Below is the network tab
