How do I refresh table after adding new data using an API/Query?

[vihar]

This question was asked on our Discord by one of our users; following is the use-case:

How can we refresh the table data after a new row is inserted via a query or an API?

---

This can be done in two ways. First, we could either run the GET/SELECT query onto the table after running the POST/INSERT INTO query; the following is a JS snippet that’s set to the button’s widget onClick property that’s linked with a form.

{{addqQery.run(() => {
    getQuery.run();
}, () => {})}}

Second, we could use the setInterval function on Appsmith to automatically update the table based on a certain time interval. More details here:

How do I automatically update data on Tables using setInterval

Interval events (Timing functions in JavaScript) allow the user to run APIs and DB queries periodically. You can configure these using the setInterval and clearInterval functions. Say you want to update data on Table without re-running the API / or using a refresh button, you can use the setInterval function. In this example, we’ll be using the switch widget (Switch1) to control this function and a table widget that uses the getData query. Now on Switch1 widget’s onChange property, we use the…