How to Refresh Data Automatically in Retool

1// Query settings configuration (Inspector/Settings tab):
2// Query schedule: Enabled
3// Interval: 30000  (30 seconds in milliseconds)
4
5// Common intervals:
6// 5000   → 5 seconds (high-frequency, use carefully — DB load)
7// 10000  → 10 seconds
8// 30000  → 30 seconds (good default for dashboards)
9// 60000  → 1 minute (low-frequency, good for non-critical data)
10// 300000 → 5 minutes (very low frequency)
11
12// The query continues running at the interval while the browser tab is open
13// It stops when the user closes or navigates away from the app

1-- SQL Query: searchCustomers
2-- Trigger: Run when inputs change (enabled)
3SELECT id, name, email, status
4FROM customers
5WHERE 
6  ({{ !searchInput.value }}
7   OR name ILIKE {{ '%' + searchInput.value + '%' }}
8   OR email ILIKE {{ '%' + searchInput.value + '%' }})
9  AND ({{ !statusFilter.value }}
10       OR status = {{ statusFilter.value }})
11ORDER BY name ASC
12LIMIT 100;
13
14-- This query re-runs automatically whenever:
15-- searchInput.value changes (user types)
16-- statusFilter.value changes (user selects)
17-- No event handler needed

1// Option 1: Success event handler on the mutation query
2// updateRecord → Success handler: Trigger query → getRecords
3
4// Option 2: JS Query chaining (more control)
5// JS Query: updateAndRefresh
6try {
7  await updateRecord.trigger({
8    additionalScope: {
9      id: table1.selectedRow.data.id,
10      status: statusSelect.value
11    }
12  });
13  
14  // Refresh the table AFTER update completes
15  await getRecords.trigger();
16  
17  utils.showNotification({ title: 'Record updated', notificationType: 'success' });
18  await modal1.close();
19  
20} catch (err) {
21  utils.showNotification({
22    title: 'Update failed',
23    description: err.message,
24    notificationType: 'error'
25  });
26}

1// Button 'Refresh' — Inspector settings:
2// Label: {{ getRecords.isFetching ? 'Refreshing...' : 'Refresh' }}
3// Icon: refresh-cw (or similar refresh icon)
4// Disabled: {{ getRecords.isFetching }}
5
6// onClick event handler → JS Query: manualRefresh
7// JS Query: manualRefresh
8await isRefreshing.setValue(true);
9
10try {
11  await getRecords.trigger();
12  utils.showNotification({
13    title: 'Data refreshed',
14    notificationType: 'success',
15    duration: 2000
16  });
17} catch (err) {
18  utils.showNotification({
19    title: 'Refresh failed',
20    description: err.message,
21    notificationType: 'error'
22  });
23} finally {
24  await isRefreshing.setValue(false);
25}

1// JS Query: refreshAll — triggered by Refresh All button
2await isRefreshing.setValue(true);
3
4try {
5  // Refresh all related queries in parallel
6  await Promise.all([
7    getOrders.trigger(),
8    getOrderStats.trigger(),
9    getPendingAlerts.trigger()
10  ]);
11  
12  utils.showNotification({
13    title: 'Dashboard refreshed',
14    notificationType: 'success',
15    duration: 2000
16  });
17  
18} catch (err) {
19  utils.showNotification({
20    title: 'Refresh failed',
21    description: 'Some data could not be refreshed.',
22    notificationType: 'warning'
23  });
24} finally {
25  await isRefreshing.setValue(false);
26}
27
28// In Button Inspector:
29// Disabled: {{ getOrders.isFetching || getOrderStats.isFetching }}

1// POLLING (this tutorial — suitable for most use cases)
2// Pro: works with any database/API, simple to configure
3// Con: adds DB load, up to N seconds stale
4// Use for: dashboards, status pages, non-critical monitoring
5
6// REAL-TIME (WebSocket — see separate tutorial)
7// Pro: instant updates, efficient (no repeated queries)
8// Con: requires WebSocket support on the API/DB
9// Use for: live collaboration, real-time alerts, financial data
10
11// Decision guide:
12// 'Does delay of 30 seconds matter?'
13//   No → polling (30s interval)
14//   Yes → 'Does the backend support WebSockets?'
15//     Yes → WebSockets / Supabase Realtime
16//     No → polling with shorter interval (5-10s)