Skip to main content

Classic apps tutorial: Connect and query data

Classic apps

You're viewing documentation for classic apps, which use Retool's original app editor. The AI app builder is the recommended way to build apps and where Retool focuses new development.

Note

This guide is part of a multi-page tutorial. If you're starting here, consider reviewing the previous steps and following the classic 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 or database. 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. Import customer data into Retool Database​

This tutorial uses sample customer data stored in Retool Database, a PostgreSQL database that is one of Retool's managed services. To import the data:

  1. Download sample_customers.csv.
  2. Navigate to Resources and select Retool Database.
  3. Click Import CSV and select Into a new table.
  4. Upload sample_customers.csv and then click Create table.

2. Create a resource query​

Return to your app. First, add a resource query to retrieve customer data.

Click in the left panel to open the Code tab. In the customersPage section, click and select Resource query.

query1 populates with a list of suggested resources in your Retool organization for which you have access.

3. Query Retool Database​

Retool supports most databases and APIs, and you can use built-in integrations to connect to popular data sources with minimal configuration. Retool Database is available in every cloud-hosted organization, so you don't need to create a resource for it. On self-hosted deployments, configure Retool Database with your own PostgreSQL database first.

To retrieve the customer data:

  1. Click the Resource dropdown and select Retool Database.

  2. Write the following SQL statement:

    SELECT
    *
    FROM
    sample_customers
  3. Click Save & Run to save the resource query and run it. The query then retrieves the list of customers from the database.

4. 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.