How to Implement Real-Time Updates in Retool

The easiest real-time approach is query polling. Open any query and go to its Advanced settings. Find 'Polling interval' (some Retool versions call it 'Auto-run every X seconds'). Set it to 10, 30, or 60 seconds. Retool will automatically re-run the query at that interval and update all bound components. This is suitable for dashboards, status monitors, and alert feeds where sub-second freshness is not required. The downside: every poll hits your database, regardless of whether data changed.

Before writing the WebSocket JS Query, create two Temporary State variables in the State panel (click + near the State section): (1) 'wsMessages' — type Array, default value [] — to hold incoming messages. (2) 'wsStatus' — type String, default value 'disconnected' — to track connection state. These variables will be updated from inside the JS Query's WebSocket callbacks, making their values visible to other components via {{ wsMessages.value }} and {{ wsStatus.value }}.

Create a new JS Query named 'connectWebSocket'. Write the code to open a WebSocket connection. Store the socket object in a module-level variable so it persists across the query's lifecycle. In the onmessage callback, parse the incoming data and call await wsMessages.setValue() to update the UI. The critical gotcha: setValue() is async — after calling it, the updated value is not immediately readable in the same synchronous call. Build the new array from the current state value before updating.

1// JS Query: connectWebSocket
2// Set to 'Run on page load'
3
4const WS_URL = 'wss://your-realtime-endpoint.com/feed';
5
6const socket = new WebSocket(WS_URL);
7
8socket.onopen = async () => {
9  await wsStatus.setValue('connected');
10  // Send auth if needed:
11  // socket.send(JSON.stringify({ type: 'auth', token: 'Bearer xyz' }));
12};
13
14socket.onmessage = async (event) => {
15  let parsed;
16  try {
17    parsed = JSON.parse(event.data);
18  } catch {
19    parsed = { raw: event.data };
20  }
21
22  // Get current messages and prepend new one
23  // Note: do NOT read wsMessages.value immediately after setValue —
24  // setValue is async and the value won't reflect the update yet.
25  const current = wsMessages.value || [];
26  const updated = [parsed, ...current].slice(0, 100); // Keep last 100
27  await wsMessages.setValue(updated);
28};
29
30socket.onerror = async (err) => {
31  await wsStatus.setValue('error');
32  utils.showNotification({
33    title: 'WebSocket error',
34    description: 'Connection failed. Check your endpoint URL.',
35    notificationType: 'error',
36  });
37};
38
39socket.onclose = async () => {
40  await wsStatus.setValue('disconnected');
41};

Bind a Table component's Data source to {{ wsMessages.value }}. The table will update automatically whenever wsMessages.setValue() is called from the WebSocket callback. Add a Text component showing the connection status: 'Status: {{ wsStatus.value }}' with conditional color formatting (green for 'connected', red for 'error'). You can also bind individual fields: {{ wsMessages.value[0].price }} to show the most recent price tick.

WebSocket connections drop due to network issues, server restarts, or idle timeouts. Add reconnection logic to the onclose handler. Use a JS-level timeout to attempt reconnection after a delay. Implement exponential backoff to avoid hammering the server. Track reconnection attempts in a Temporary State variable.

1// Enhanced connectWebSocket with reconnection
2let reconnectAttempts = 0;
3const MAX_RECONNECTS = 5;
4
5const connect = async () => {
6  const socket = new WebSocket('wss://your-endpoint.com/feed');
7
8  socket.onopen = async () => {
9    reconnectAttempts = 0;
10    await wsStatus.setValue('connected');
11  };
12
13  socket.onclose = async () => {
14    await wsStatus.setValue('disconnected');
15    if (reconnectAttempts < MAX_RECONNECTS) {
16      reconnectAttempts++;
17      const delay = Math.min(1000 * Math.pow(2, reconnectAttempts), 30000);
18      await wsStatus.setValue(`reconnecting (${reconnectAttempts}/${MAX_RECONNECTS})...`);
19      setTimeout(connect, delay);
20    }
21  };
22
23  socket.onmessage = async (event) => {
24    const current = wsMessages.value || [];
25    await wsMessages.setValue([JSON.parse(event.data), ...current].slice(0, 100));
26  };
27};
28
29await connect();