Force "run JS code" to rerun when variable changes

[sarah_ergatta]

I have a resource of type "Run JS code" that I need to run when some variable x changes. I am currently referencing x in my "Run JS code" resource, but a change in x is not resulting in a reload of the resource because I cannot select "automatically" as the run behavior.

What is a good workaround? I do NOT want to trigger the JS code to rerun on button push or any "event" like that. Simply when the x variable changes!

Thanks so much for your time!

[WidleStudioLLP]

Hey @sarah_ergatta ,

In Retool, not possible to directly configure a "Run JS code" resource to automatically trigger when a variable changes, without an event.

[sarah_ergatta]

Okay, so I will take my "Run JS Code" snippet and move it to a transformer, since those DO get run automatically when inputs change.

But in my code, I am using promises in a case like this (this is simplified):

var allResults = [];
var userId = {{user_id.value}}

async function runWorkoutHistoryQuery() {
  try {
    const data = await new Promise((resolve, reject) => {
      
      get_workout_history.trigger({
        additionalScope: { 
          user_id: userId
        },
        onSuccess: function (data) {
          resolve(data);
        },
        onFailure: function (error) {
          reject(error);
        },
      });
    });
    allResults.push(...data.data);
}

// Async function to run the query and return allWorkoutHistory
async function fetchWorkoutHistory() {
  await runWorkoutHistoryQuery(0);
  return allResults;
}

// Call the async function to fetch and return workout history
return fetchWorkoutHistory();

While this code works in the "Run JS Code" snippet, in the transformer, it outputs this error: "Error:Evaluation result should be awaited"

Can you tell me what I'm doing wrong? Can you not use promises in transformers? If not, how do you recommend I reorganize my code?

Thanks so much!!

[WidleStudioLLP]

Hello @sarah_ergatta ,

Retool transformers are synchronous and can't handle async logic. Move async tasks like get_workout_history.trigger to a JavaScript query using async/await. Store the results in a temporary variable, then use transformers for synchronous operations like filtering or formatting.

Thank You.

[mitchmess]

Hi @sarah_ergatta!

One workaround I've found for this specific use case is with the Query JSON with SQL resource.

Basically, you'd set it up with Run behavior set to Automatic, create a very basic SQL query to select the variables you want to watch, and then configure the Event handlers of this query to run your JS Code query on success.

Example SQL query:

SELECT
  {{ user_id.value }}

Putting it all together:

Hope this helps!