Connecting to data

Be it a database table or an external API, Toolpad Studio offers mechanisms to read to – and write from – server-side data.

Queries

Queries allow you to bring backend data to your Toolpad Studio page. They are called automatically on page load, so that data is available as state on the page as soon as the user interacts with it. Toolpad Studio will cache and regularly refresh the data. This means that your backend function will be called more than once. Queries are not suitable for backend functions that modify data. You can modify the following settings for queries:

• Mode

  You can turn a query into an action through this setting.

• Refetch interval

  You can configure the query to run on an interval, for example every 30s.

• Enabled

  You can use this option to enable or disable the query from running

Queries may be programatically re-fetched via the refetch function available on these query objects. For example, for a query named getOrders, you can add

getOrders.refetch();

in the onClick binding of a Button component.

Actions

Actions allow performing updates to remote data sources (edit, update, delete) on a user interaction. Actions are not automatically called, they must be programtically called a JavaScript expression in a binding. For example, for a query named createCustomer, we can add

createCustomer.call();

in the onClick binding of a Button component.