Has anyone achieved optimistic updates when creating, editing and deleting dynamic data in a Plasmic app?
Any pointers?
I’m OK to work in a codebase if necessary.
(More info inside this thread)
For example,
On a page, If I have a table of records obtained from my database.
Each row has an edit link which opens a modal popup and has a form to edit the record.
Submitting the edit form needs to
- Update the data in the table instantly (without waiting for data to save or refresh)
- Update the data in the database
- Refresh the original query from the database
I’ve achieved this in a simplistic way storing the result of a data query to a state variable on the page, then using the contents of that state variable as the data for my table (instead of the underlying $query variable)
My form runs an action that dierctly updates that state variable so that changes are reflected in the table instantly, while also kicking off a 2nd action to save data to the database & refresh.
This mostly works, good, but doing optimistic updates well requires a bit more thought:
• The update of data in the database might fail & we need to handle the error if this occurs
• A user might make a whole series of updates quickly. This can lead to confusing flashes of data due to race conditions of multiple instances of save + refresh, meaning the user sees confusing flashes of different data
Thanks in advance
An idea - in the state variable that feeds your table, for each piece/row of data, you could introduce another field that would represent the status of that row.
When your first action updates the state variable for the table, you update the status of that row to something like “Saving…”.
If the second action save is successful, you update the status to something like “Saved”.
If the save action is not successful, you update the status to something like “Save error”.
Those statuses can be represented in the table in various ways, like icons, text, etc. (similarly, they can also be represented in the state variable in various ways - numbers (0 - saving, 1-saved, 2- error, or codes - SAVE_PEND, SAVE_OK, SAVE_ERR).
I believe with this approach you can skip refreshing the data from the db after each save and the issue of flashes due to updates may no longer be an issue.
Interesting idea thankyou! I will give it a try.
You mention representing the state as an icon in the table. I couldn’t see a way to add anything but text to table cells. How would I go about adding an icon to a table cell or row?
Maybe I was being optimistic 
. Are you using an actual table component?
Haha! Yes the standard table component
(the one available by default in plasmic studio)
Do you need a table to give user control of columns display or sorting?
Possibly, but I’m not tied to it. Is there another way to create a table? What did you have in mind?
You could just build out one row as you need, using elements and stacks and Repeat that row for as many records in your data and even add pagination.
I’ve actually just done that today
Oh nice! Thankyou! I’ll give that a try.
Really appreciate the help, thankyou so much
Sure, let me know if it works out
Thanks!
Is there any way for you to share the table you built (if you’re willing)? It’s a key concept I’m struggling with.
All good if not, I’m sure I’ll figure it out haha!
I can’t seem to be able to duplicate a project right now, but I put together one to show the concept. See attached.
Basically, it’s just a horizontal stack with some text fields and a button, that gets repeated based on some data.
Amazing!! Thanks for all your help