How to Use Asynchronous Queries in Retool

1// WITHOUT await — race condition
2updateRecord.trigger(); // Fires and forgets
3const refreshed = await getRecords.trigger(); // May run BEFORE update finishes!
4console.log(getRecords.data); // May return stale data
5
6// WITH await — correct order guaranteed
7await updateRecord.trigger(); // Wait for update to complete
8await getRecords.trigger();   // Then refresh — always stale-free
9console.log(getRecords.data); // Fresh data from the completed query
10
11// Access result directly from the trigger() return value
12const result = await createRecord.trigger();
13console.log('Created record:', result); // The query's result data

1// SEQUENTIAL — slow (3 queries × ~500ms each = ~1500ms)
2await getCustomers.trigger();
3await getOrders.trigger();
4await getProducts.trigger();
5
6// PARALLEL — fast (~500ms total if all take ~500ms)
7await Promise.all([
8  getCustomers.trigger(),
9  getOrders.trigger(),
10  getProducts.trigger()
11]);
12
13// All data is now available:
14console.log('Customers:', getCustomers.data?.length);
15console.log('Orders:', getOrders.data?.length);
16console.log('Products:', getProducts.data?.length);
17
18// With Promise.allSettled() — never rejects, even if one fails
19const results = await Promise.allSettled([
20  getCustomers.trigger(),
21  getOrders.trigger(),
22  getProducts.trigger()
23]);
24
25results.forEach((result, i) => {
26  if (result.status === 'rejected') {
27    console.error(`Query ${i} failed:`, result.reason);
28  }
29});

1// SQL Query: 'updateOrderStatus'
2// SQL: UPDATE orders SET status = {{ newStatus }}, updated_at = NOW()
3//       WHERE id = {{ orderId }}
4
5// JS Query: batchUpdateOrders
6const selectedRows = table1.selectedRows;
7const targetStatus = newStatusSelect.value;
8
9for (const row of selectedRows) {
10  // additionalScope injects runtime values into the SQL query's {{ }} bindings
11  await updateOrderStatus.trigger({
12    additionalScope: {
13      orderId: row.id,         // Overrides {{ orderId }}
14      newStatus: targetStatus  // Overrides {{ newStatus }}
15    }
16  });
17}
18
19// Refresh the table after all updates
20await getOrders.trigger();
21
22utils.showNotification({
23  title: `${selectedRows.length} orders updated to ${targetStatus}`,
24  notificationType: 'success'
25});

1// THE GOTCHA — reads old value
2isLoading.setValue(true);         // Does NOT wait
3console.log(isLoading.value);     // Still false!
4
5// CORRECT — with await
6await isLoading.setValue(true);   // Waits for update
7console.log(isLoading.value);     // true ✓
8
9// Practical example: loading indicator
10await isLoading.setValue(true);
11try {
12  await fetchData.trigger();
13  await processResult.trigger();
14} finally {
15  await isLoading.setValue(false); // Always clears loading
16}
17
18// Another gotcha: setIn() is also async
19await formData.setIn(['email'], emailInput.value);
20await formData.setIn(['name'], nameInput.value);
21console.log(formData.value.email); // Correct — after await

1// Option 1: Read query.data after await
2await getCustomer.trigger({
3  additionalScope: { id: table1.selectedRow.data.id }
4});
5const customer = getCustomer.data[0]; // Read from query.data
6console.log('Customer:', customer.name);
7
8// Option 2: Capture return value
9const result = await getCustomer.trigger({
10  additionalScope: { id: table1.selectedRow.data.id }
11});
12const customer2 = result[0]; // Same data, captured directly
13
14// Option 3: Parallel with named results
15const [customerResult, ordersResult] = await Promise.all([
16  getCustomer.trigger({ additionalScope: { id: selectedId } }),
17  getCustomerOrders.trigger({ additionalScope: { customerId: selectedId } })
18]);
19
20const customerName = customerResult?.[0]?.name;
21const orderCount = ordersResult?.length;
22return { customerName, orderCount };