Understanding reactivity (or lack thereof) when an object retrieved by repo.find() is updated elsewhere using repo.save()

[chris-reeves]

Hi,

I'm considering switching to pinia-orm for one of my projects in order to take advantage of the where clauses that it supports for querying data, however I can't seem to persuade it to behave as I would like.

Take, for example, a repository containing objects (lets call them users). The users in the repository are listed using a v-for, with each list entry being represented by a component instance. The list item components each load their own copy of their user object from the repository and display the name property. Each list item also has an associated user edit component. The edit component should allow the client to update the user's properties (i.e. name) - it should have a 'save' button to persist the user to the store and produce a corresponding update to the name displayed in the list item, and a 'cancel' button to cancel editing and leave both the store and the list item untouched. There's also an 'add' button in the main list component which opens an edit component instance and adds a new user to the repository on save.

There are many ways to skin this cat, and the example I am giving is somewhat contrived in order to illustrate some of the things I am trying to understand. So I'm happy to hear of alternative ways of doing this, however what I really want is to understand why this example behaves as it does.

In my real project code (which does not yet use pinia-orm and is not shared here) I prevent reactive updates to the underlying objects during editing by making a (non-reactive) copy of the object (using Object.assign()). This object can then be edited and persisted to the pinia repository on save. To maintain reactivity of the list items, the edited object isn't assigned directly to the relevant object key in the underlying store - instead its properties are assigned to the existing object value for the relevant key using Object.assign() (again).

I mention this because my first attempt to switch over to using pinia-orm followed the same pattern of making my "editable" object a shallow clone of the object retrieved from the repository (see the commented out assignments to editableUser in my example code). However when this object is persisted (using userRepo.save()) the name displayed in the list item does not update (i.e. reactivity is lost). I can understand why this might be the case (having worked around this in my non-pinia-orm code), but I was kind of hoping/expecting pinia-orm to handle this situation. By "this situation" I mean having a reactive component that is looking at an object retrieved using userRepo.find(), and that reactive component reacting/updating when the underlying object is updated using userRepo.save(). So here are my first couple of questions: should this work? And if not, why not, and what is the recommended way of achieving this? You can see this in action by uncommenting one of the alternate editableUser assignments in src/components/UserEditModal.vue.

I've also tried not cloning the object and simply assigning the result of userRepo.find() directly to editableUser. In this case, the list object is reactive and updates when the updated user is persisted to the repository. Unfortunately it also updates the reactive object when the edit is cancelled (although the underlying repo is not updated). This behaviour was unexpected - if the object returned by userRepo.find() was so closely coupled to the reactive object then I might expect it to update the reactive object even as I type in the text edit box, but we seem to have some weird half-way house where it's not really closely coupled, but coupled enough to result in reactive updates even when the object is not updated in the underlying repository. Could someone explain this behaviour? Again, is there something that I can do differently to make this behave as I expect?

I'd be grateful for any insights to aid my understanding. I'd like to make use of pinia-orm if I can, but this issue is a blocker for me at the moment. If I can't figure this out I'll just have to implement filtering in my existing code. That's not a problem, but I'd rather not re-invent the wheel if I can just use pinia-orm, where the heavy lifting has already been done for me (and the resulting code will look much nicer than my existing code!).

Thanks in advance for any insights!

[chris-reeves]

Attaching example code as a zip, as GitHub doesn't seem to be liking my tarball :-(

1790-example.zip