I’m working on making a SPA dashboard page, where there are multiple isolated components, each being fed by a dedicated endpoint (shown by hollow colored boxes), for example user info, his uploads, and some other meta information. Except that some endpoints have some overlapping data (depicted as solid red boxes), example, last updated field, or something that only backend can know, so front-end can’t keep them synced locally.
The page loads, and each component feeds itself by making a `GET` request to its respective endpoint. However, one of the components has an edit field (shown by solid light blue box), which when saved triggers a `PUT` request, that can, and will change the value of red boxes, i.e the shared information coming from different endpoints.
My goal is to keep the components isolated as they are, without knowing the “relationship” described above. How can I rig my backend or frontend (or both), where the green box and orange box “update” to reflect the changed red?
Context and constraints –
– No full page reload (some of the endpoints are already quite “heavy”)
– No “single-store”, like Redux, we’re using Angular w/ services and rxjs
– No websockets, or polling or anything along those lines (pure `GET`, `PUT` etc.)
– We’d prefer to keep frontend agnostic of this relationship directly
How can this be achieved?