APIs within Retool
This example demonstrates generating a mock API and leveraging an API with Retool to populate a table.
Steps
In order to try out an API within Retool, we will leverage Retool utilities including the Generate API from Mock Data. This provides a simple way to upload a CSV representing sample data and then convert it into a REST API that you can then call and use to populate tables for example. The following steps will show you how to perform this.
- Go to the Generate API from Mock Data page.
- Under Data Source specify inventory.csv
- The Edit Data section will display the contents of inventory.csv on the screen.
- Select Next
- Specify inventory_data for the API name
- Select Generate API. This provides details on the API and how to invoke it.
For the example, two display sections are provided, note this is for example purposes only and the endpoint URL will be unique to your setup:
- Endpoint URL: https://retoolapi.dev/pzWO0a/inventory_data
- A table of different methods (e.g. VERBS) that can be employed is displayed below the endpoint as shown below:
| Method / Verb | Example |
|---|---|
| GET | /pzWO0a/inventory_data |
| GET filter | /pzWO0a/inventory_data?sku=value |
| GET by id | /pzWO0a/inventory_data/1 |
| GET paginate | /pzWO0a/inventory_data?_page=2&_limit=10 |
| POST | /pzWO0a/inventory_data |
| PUT | /pzWO0a/inventory_data/1 |
| PATCH | /pzWO0a/inventory_data/1 |
| DELETE | /pzWO0a/inventory_data/1 |
With the information above, you can now use Retool to invoke the endpoint and see mock data return.
-
Create a new app within Retool and call it inventory api.
-
Create a new Resource Type and select REST API
-
Within the Configure REST API dialog, enter the following information
- Name:
inventory api - Description:
Simple Inventory API - Base URL:
URL generated in previous section (e.g. https://retoolapi.dev) - URL Parameters: None for this example
- Name:
-
Select Create Resource when complete.
Within Retool query editor, the following dialog is populated with the remainder of the endpoint, with the GET method being used to retrieve the full data set:
When this result is applied to a Table component in the application, it appears as the following:
