title: Managing data in front-end in a SPA app?
body: <p>Ok so i will try to be more specific:</p>
  
  <p>let say i fetch a list of models, say a Cars:</p>
  
  <pre><code>Car.get();
  </code></pre>
  
  <p>later i need to ge a specific car, that is part or that list but i also need some relations that the car has so i need to make a new request for that like:</p>
  
  <pre><code>Car.get({ id: 1, with: 'car_materials.material' });
  </code></pre>
  
  <p>Here i fetch the car with its materials and we pretend that the relation table also contains some pivot data that i need.</p>
  
  <p>Now, when i edit this "new" car with id of 1 that i fetched, i want the car with the corresponding id, the "old" car, to update in the list that its in after i edit the "new" car since they are infact the same Model but fetched at different occasions.</p>
  
  <p>How do i go about this?</p>
  
  <p>edit: I had a solution to this (explained below) but it started to get ugly when i tried to delete models because then i was left with the deleted model lingering behind in different parts of the app until a new get request was made for that item or list.</p>
  
  <p>You can ignore the text under here if u wish, or read it for more info on my problem.</p>
  
  <hr>
  
  <p><del>I'm sorry if the title will appear misleading after reading the post, I could not figure out anything better.</del></p>
  
  <p><del>I'm working on a SPA project, and I will try to describe my problem as detailed as possible.</del></p>
  
  <p><del>When we are fetching data from our backend we store the data in a data object in our frontend project. Why? Because we want our data in front end to be synced, one instance of a model, lets say a user, might appear on different places on our page in different contexts at the same time. It might for example be listed as a user connected to an account och the user might be listed as a contributor to some project. When the user edits its profile we want all these representations of the model to update together without a pagereload.</p>
  
  <p><del>So when we fetch data from our backend we have our defined models with its relations in frontend and our dataobject is populated with all the models and its relations when we get it.</del></p>
  
  <p><del>this is an effort to illustrate our data (the circles are our models):</del></p>
  
  <p><img src="https://i.stack.imgur.com/dRPAC.png" alt="Our dataobject"></p>
  
  <p><del>Now I know that what I call "data object" is nothing else than a nested unindexed array filled with objects that are no different than the other objects that refer to the same space in the memory.</del></p>
  
  <p><del>The actual problem occurs when we try to delete something like a relation between for example a user and a project (this is also represented as a model in our data object), how do we delete this and still make sure that all references to the same object are deleted?</del></p>
  
  <p><del>We can't just delete the object in the "data object" because then all the other copies of that objects will just remain intact which will lead to problems because the objects might still be visible on the page until we fetch the data again and repopulate the page.</del></p>
  
  <p><del>We could just do for each on the object and delete all the attributes leaving all the objects empty but that would just leave us with an empty row on the page instead.</del></p>
  
  <p><del>How can we solve this? Are we going at this in the wrong way? How should we go about keeping our data "up to date" on the page?</del></p>
  
  <p>thanks!</del></p>