How to Integrate Retool with RapidAPI

Log in to rapidapi.com and use the search bar or category browser to find the API you want to connect to Retool. Click on the API listing to open its documentation page. On the right side of the page, you will see an endpoint explorer and a pricing panel. Select a pricing plan — most APIs offer a free Basic plan with limited monthly calls, which is sufficient for testing and low-volume internal tools. Click Subscribe to Plan and confirm. Once subscribed, look at the code examples panel on the right side of the API page. Select the Shell or JavaScript tab. You will see two important values that appear in every RapidAPI call: the X-RapidAPI-Key header (your personal API key, shared across all subscriptions) and the X-RapidAPI-Host header (the unique identifier for this specific API). Copy both values. Your X-RapidAPI-Key is the same for every API you subscribe to — it is your account-level credential. The X-RapidAPI-Host changes per API (for example, it might be realtor.p.rapidapi.com for the Realtor.com API or air-quality-by-api-ninjas.p.rapidapi.com for an air quality API). Note both values and also identify the base URL for the API — this is typically api.rapidapi.com or the API-specific host URL shown in the endpoint paths. You can manage all your subscriptions and view your API key at any time in the RapidAPI Developer Dashboard under Apps.

In Retool, navigate to the Resources tab in the left sidebar and click Add Resource. Select REST API from the resource type list. In the Name field, give it a descriptive name that includes the specific API — for example, RapidAPI - Realtor.com or RapidAPI - Email Validation. This makes it easy to distinguish between multiple RapidAPI-connected resources later. In the Base URL field, enter the API's host URL — this is the X-RapidAPI-Host value you copied, formatted as https://{host}. For example, if the host header is realtor.p.rapidapi.com, the base URL is https://realtor.p.rapidapi.com. Now configure the authentication headers that RapidAPI requires for every request. In the Headers section, click Add Header twice. First header: name is X-RapidAPI-Key and value is {{ config.RAPIDAPI_KEY }} (referencing your configuration variable). Second header: name is X-RapidAPI-Host and value is the exact host string you copied from RapidAPI (for example, realtor.p.rapidapi.com — without the https:// prefix). These two headers must be present in every request to RapidAPI. Click Test Connection if available, or proceed to click Save. The resource is now configured and ready for query creation. If you need to connect to a second RapidAPI-hosted API, repeat this process, keeping the same X-RapidAPI-Key value but changing the Base URL and X-RapidAPI-Host to match the new API's values.

With the Resource configured, create your first query. In a Retool app, open the Code panel and click Create new query. Select the RapidAPI Resource you just created. Set the Method to GET (or POST depending on the specific endpoint). In the Path field, enter the endpoint path as shown in the RapidAPI playground — for example /for-sale for property listings, or /search for a search endpoint. The base URL is already set in the resource, so the path is just the portion after the host. In the URL Parameters section, add the query parameters that the API requires. Check the RapidAPI playground for the specific API to see which parameters are mandatory versus optional. For example, a property search API might require city and state_code as parameters. Use Retool's {{ }} syntax to make parameters dynamic: {{ cityInput.value }} references a text input component named cityInput, allowing users to search from the Retool UI. Set Run this query on page load to off for search-triggered queries, and add a Button component with an event handler to trigger the query on click. For APIs that return paginated results, look for offset or page parameters in the RapidAPI documentation and wire them to a Retool pagination component. Run the query and examine the raw response in the query result panel — this helps you understand the data structure before building your transformer.

1// JavaScript transformer to reshape a typical RapidAPI response
2// Adjust property paths based on the actual API's response structure
3const results = data.data || data.results || data.properties || [];
4
5return results.map(item => ({
6  id: item.property_id || item.id || '',
7  title: item.address?.line || item.title || item.name || 'N/A',
8  subtitle: item.address ? `${item.address.city}, ${item.address.state_code}` : '',
9  price: item.price
10    ? `$${Number(item.price).toLocaleString()}`
11    : item.list_price
12    ? `$${Number(item.list_price).toLocaleString()}`
13    : 'N/A',
14  status: item.status || item.listing_status || '',
15  details: item.description?.beds
16    ? `${item.description.beds}bd / ${item.description.baths}ba`
17    : '',
18  updated: item.last_update_date || item.updated_at || ''
19}));

With your query returning data, build the dashboard UI. Drag a Table component onto the Retool canvas and bind its Data property to {{ yourQuery.data }} — using the transformed data. Configure column types for the data you are displaying: use the Currency column type for price fields, the Date column type for timestamp fields, and set appropriate widths for each column. If your API returns paginated data, add a Pagination component and wire the page offset parameter in your query to {{ pagination.offset }} or similar. For search-driven dashboards, add a Text Input component at the top (name it cityInput or similar) and a Button labeled Search. Set the Button's click event handler to Trigger query → yourQuery. Add a Filter component or additional input fields for other search parameters (price range, number of bedrooms, etc.) and reference them in your query's URL parameters. For detail views, add a Container or Drawer on the right side of the canvas that displays when a table row is selected. Bind fields in the container to {{ yourTable.selectedRow.fieldName }}. If the selected row needs additional API data (for example, fetching full property details when a listing is clicked), create a second query that uses {{ yourTable.selectedRow.id }} in its path and set it to trigger automatically when the table selection changes using an event handler on the table's Row click event.

For dashboards that need data from multiple APIs, create additional REST API Resources following the same pattern — one Resource per API with the matching X-RapidAPI-Host header. For example, a real estate dashboard might have Resources for a property listings API, a mortgage calculator API, and a neighborhood demographics API. In your Retool app, create a query for each resource. To combine their data in a single view, create a JavaScript query that references all three queries' data properties. This JavaScript query runs client-side in Retool and can join datasets using shared keys such as zip code or property ID. Wire the JavaScript query to trigger automatically when all three underlying queries complete using event handlers — on success of query one, trigger query two; on success of query two, trigger the JavaScript merge query. Alternatively, use the Run triggers in sequence pattern in Retool's query settings. For the RapidAPI free tier, be mindful of monthly call limits. Create a Stat component showing a calculated API call count based on the number of times search queries have run, and consider adding Retool query caching (60-second cache) for queries that do not need real-time data. This prevents excessive API calls when multiple team members use the dashboard simultaneously. For complex integrations combining many RapidAPI sources with internal databases and custom transformers, RapidDev's team can help architect the full Retool solution.

1// JavaScript query to merge data from two RapidAPI sources
2// Assumes listingsQuery and enrichmentQuery are both resolved
3const listings = listingsQuery.data || [];
4const enrichmentData = enrichmentQuery.data || [];
5
6// Build a lookup map from the enrichment data
7const enrichmentMap = enrichmentData.reduce((map, item) => {
8  map[item.zip_code || item.zipcode] = item;
9  return map;
10}, {});
11
12// Merge enrichment data into listings by zip code
13return listings.map(listing => {
14  const zip = listing.zip_code || listing.zipcode || '';
15  const enrichment = enrichmentMap[zip] || {};
16  return {
17    ...listing,
18    median_income: enrichment.median_income || 'N/A',
19    walk_score: enrichment.walk_score || 'N/A',
20    school_rating: enrichment.school_rating || 'N/A',
21    neighborhood: enrichment.neighborhood_name || ''
22  };
23});