Skip to main content

Retool apps tutorial: Connect and query data

Learn how to connect a data source and retrieve customer data using queries.

This guide is part of a multi-page tutorial. If you're starting here, consider reviewing the previous steps and following the Retool apps tutorial in sequence.

A resource is a set of user-configured properties that determine how Retool interacts with a data source, such as an API. You create a resource for each data source you want to use with Retool. You can then select the resource when writing a query so you can interact with the data.

1. Generate a mock API with customer data​

Use the mock API generator below to generate a fully functional temporary REST API with customer data that you can use.

  1. Select the Customers sample data set.
  2. Specify the number of Items that the data set should include.
  3. Click Generate API to generate the API with sample data.
Mock API generator

2. Create a resource query​

First, add a resource query to retrieve customer data. Before the query can do this, you must create the necessary resource. You can do this directly from the resource query.

First, click in the left-side vertical toolbar to open the Code tab. In the Page pane, click and select Resource query.

The Resources dropdown contains a list of resources in your Retool organization for which you have access.

3. Create a REST API resource​

Retool supports most databases and APIs, and you can use built-in integrations to connect to popular data sources with minimal configuration.

The mock API is a basic REST API with no authentication. To create a resource for it:

  1. Click the Resource dropdown and select + Create a new resource.
  2. Select the REST API integration.
  3. Set the resource name to Sample Customers and then paste the copied API URL into the Base URL field.
  4. Click Create resource.

4. Retrieve customer data​

The resource query updates to perform a GET request with the newly created resource. Click Save & Run to save the resource query and run it. The query then retrieves the list of customers from the API.

5. Update the table to display customer data​

The Table component's Data source is currently set to use its own demo data. Select the table and, in the Inspector, change the data source to query1.

Once updated, the table automatically updates to display the query results. It also attempts to configure the column formats for each field, such as email and id.

You can rearrange the columns or update the specified format from the Columns section of the Inspector. For example, the Postal column should be formatted as a string. If it appears to use the Number format, select the column and update its Format setting.

Next steps​

You've now created a resource and can read with data using queries. Move on to the next section and learn how write changes back to the data source.