Preventing Table from Auto Refreshing on Failed Save

App Building
1

Hi All,

I currently have a table with about 8 columns, of which 3 columns are editable. When these three columns are edited for various records in the table, I want to hit a GraphQL endpoint and write to the endpoint.

Currently, I have it structured as follows:

  • Table is generated and the columns are marked editable
  • On hitting Save, it calls a JS query which transforms the data to an array (extracting id from the table, etc..). (tableSaveChangesHandler). This in turns calls the next query.
  • A GraphQL query gets fired with the updates. The output from tableSaveChangesHandler is passed as an input here.

So far so good, this works correctly in the happy case. However, in case the API fails, it rolls back the transactions. This means that the table should not get refreshed and reloaded with the new data (as nothing has changed upstream).

However, every time I hit save, the API seems to reload, causing the table to refresh, and our users to lose whatever work they have done. How can I get around this?

Ideally, "Save Changes" button should ensure that the chain is successful before refreshing the table.

Tejas

1 Like
2

On further digging, it looks like this is because table.changeSet is reset to an empty map when the save button is hit. Is there any way to prevent this from happening until it's confirmed that the updates were successfully persisted?

3

Thanks to retool support via intercom for helping me solve this. Here is what I did:

  • Disable the "Save Changes" button in the table
  • Hid the disabled Save Changes button
#retool-widget-<table_name> .-left button[disabled] { visibility: hidden; }
  • Added a separate button on top of the table, which does my update query and retriggers the table query on success.

Would still love to see this as part of the product, but this is a workaround for anyone trying something similar.

2 Likes