Why Is My Retool App Not Loading Data from API?

1// Common Debug Panel error patterns and their categories:
2
3// Status: 401 Unauthorized
4// → Authentication failure: wrong API key, expired token, missing header
5
6// Status: 403 Forbidden
7// → Authorization failure: correct credentials but insufficient permissions
8// → OR: IP address not whitelisted
9
10// Status: 0 + "CORS" in error message
11// → Browser blocked the request due to CORS policy
12// → Only appears when querying APIs directly from the browser (REST API resource)
13
14// Status: 408 or ETIMEDOUT
15// → Request timed out: API is slow or Retool timeout threshold too low
16
17// Status: 404 Not Found
18// → Wrong endpoint URL, wrong resource base URL, or path typo
19
20// Status: 500 Internal Server Error
21// → API-side error, not a Retool configuration issue

1// Verify your credentials independently with curl:
2curl -X GET 'https://api.example.com/data' \
3  -H 'Authorization: Bearer YOUR_API_KEY'
4
5// If this returns 401, the key itself is wrong or expired
6// If this returns 200, the key works — check Retool resource configuration
7
8// Common Retool resource auth mistakes:
9// Mistake: Auth type = 'Bearer Token' but API expects 'Authorization: ApiKey ...'
10// Fix: Switch to 'Header' auth type, set header name 'Authorization', value 'ApiKey YOUR_KEY'
11
12// Mistake: API key stored as 'value' but resource sends it as URL parameter
13// Fix: Use 'URL parameter' auth type or add the key to the Base URL as ?apiKey=...

1// CORS error in Debug Panel:
2// 'Access to fetch at https://api.example.com blocked by CORS policy:
3// No Access-Control-Allow-Origin header is present'
4
5// Option 1: If you control the API backend, add CORS header:
6// Access-Control-Allow-Origin: https://app.retool.com
7// (or * for all origins — less secure)
8
9// Option 2: Proxy the request through a Retool Workflow
10// Workflows run server-side and are not subject to browser CORS restrictions
11
12// Option 3: Use Retool's built-in proxy
13// In the REST API resource, check 'Proxy requests through Retool' if available
14// This routes requests through Retool's servers, bypassing browser CORS
15
16// Option 4: Check if the API has a server-side SDK or Retool integration
17// Some APIs like Stripe have Retool-specific resources that handle CORS automatically

1// Retool Cloud outbound IP ranges (as of 2026):
2// Check current IPs at: docs.retool.com/docs/ip-allowlist
3// Retool Cloud uses AWS infrastructure — IPs are region-specific
4
5// For self-hosted Retool, the outbound IP is your server's public IP
6// Find it with: curl https://api.ipify.org on your Retool server
7
8// Diagnosing 403 vs IP block:
9// Test with Postman from a different IP (e.g., your local machine):
10// If Postman gets 200 but Retool gets 403 → IP whitelist issue
11// If both get 403 → permissions/scope issue with the API key itself
12
13// For database resources (Postgres, MySQL) behind a firewall:
14// Whitelist Retool's IP in your database firewall/security group
15// For AWS RDS: EC2 Security Groups → Inbound rules → add Retool IPs

1// Diagnose timeout vs API error:
2// Test the API directly with curl --max-time 60 to see actual response time:
3curl -w '\n\nTotal time: %{time_total}s' \
4  -X GET 'https://api.example.com/large-dataset' \
5  -H 'Authorization: Bearer YOUR_KEY'
6
7// If the API takes 15 seconds but Retool's timeout is 10s → increase timeout
8// If the API itself takes 60+ seconds → paginate the response
9
10// In Retool query settings, add pagination:
11// Use query parameters like ?page=1&limit=100 instead of fetching all records
12// Use table1.pageIndex and table1.pageSize for server-side pagination
13
14// For polling patterns that appear to 'not load':
15// Check if the query is set to 'Run on page load' → ensure this is enabled
16// Check 'Run query automatically when inputs change' for dynamic queries

1// Checklist for resource configuration:
2// [ ] Base URL: matches API documentation exactly (check for trailing slash)
3// [ ] Auth type: matches what the API expects (Bearer, API Key header, Basic, etc.)
4// [ ] Required headers: does the API require Content-Type: application/json?
5// [ ] API version: is the version in the base URL or as a header?
6
7// Common base URL mistakes:
8// Wrong: https://api.example.com/v1  (no trailing slash)
9// Wrong: https://api.example.com     (missing /v1 version path)
10// Right: check exact format in API docs
11
12// Check query URL construction:
13// In the query editor, look at the URL field
14// The final URL = Base URL + URL path in query
15// Example: Base URL 'https://api.example.com/v1' + path '/users/{{ userId.value }}'
16// Final URL: https://api.example.com/v1/users/123
17
18// For GraphQL resources:
19// Base URL must be the exact GraphQL endpoint (not the API root)
20// Auth goes in the 'Headers' section, not a separate auth field in some cases

1// In the Debug Panel Queries tab, click your query to see:
2// 'Request' tab → URL and parameters that were actually sent
3// 'Response' tab → exact JSON returned by the API
4
5// Check for null parameters in the request:
6// If URL shows /users/undefined → userId.value is null when query runs
7// Fix: add 'Only run when {{ userId.value != null }}' condition to the query
8
9// Check data path binding:
10// API returns: { data: { users: [...] } }
11// Wrong component binding: {{ getUsersQuery.data }} → shows the whole object
12// Correct binding: {{ getUsersQuery.data.users }} → shows the array
13
14// For Transformer-processed data:
15// If query has a Transformer, the query's .data is the TRANSFORMED output
16// Debug: temporarily disable the Transformer to see the raw API response
17
18// Check 'Run on page load' setting:
19// If disabled, the query only runs when manually triggered or when inputs change
20// Enable it for queries that should load data when the app opens