Triggering the refresh of a local table from a global modal

💬 App Building
, ,
1

I have a couple of global modals that are reused across pages, for example an edit contact modal that can be used in various pages that have contacts. After editing the contact I would like the local data to refresh. Both the modal and the query are in global scope so post Contact and modal contact are both global. I have a local table I need to refresh and I’m wondering what the best pattern is to refresh a local table from a global modal / query.

Claude came up with the below, but I thought there might be a more elegant solution that doesn’t involve polling? Is there a way to monitor a variable to that when it changes it triggers an event?
The Automatic watch is greyed out:

image
image773×1224 63.2 KB

**Local Global trigger Pattern

Global setup:**

  • A global variable called varRefreshTrigger with a default value of null

  • A global variable called varPageName that is set to the current page name before the modal is opened

  • In the global query's onSuccess handler, set the trigger like this:

javascript

varRefreshTrigger.setValue({
  page: varPageName.value,
  timestamp: Date.now()
});

Local page setup:

  • Each page has a local JS query named [pageName]Watcher (e.g. tasksWatcher, sequencesWatcher) that acts as a refresh watcher

  • The query runs on a 1000ms polling interval (set via "Run this query periodically" in the Advanced tab) since Retool does not reliably detect global variable dependencies in JS queries automatically

  • The query checks the trigger and fires the local refresh query if the page name matches:

javascript

const trigger = varRefreshTrigger.value;

if (trigger?.page === "[PageName]") {
  varRefreshTrigger.setValue(null);
  localQuery.trigger();
}

When I describe a new page that needs this behavior, generate the watcher query code and remind me to enable periodic polling at 1000ms in the Advanced tab.

4

Hey there @benjaminfortunato,

The cleanest pattern here is Watched inputs. Add your global variable as a watched input on the local query (Advanced tab), and Retool will automatically re-run it whenever the variable changes. You just need to make sure the variable is updated in your global query's onSuccess handler to trigger it. Let me know if this works!

You can watch this video example
How to use 'Watched Inputs' in Retool

1 Like