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.