Component state and JavaScript state out of sync

Context:

  • I have a Retool table connected to a SQL SELECT query.
  • I'm triggering an INSERT query, then subsequently triggering a SELECT.
  • In the video below you can see the corresponding Retool Table and the console.

What happens:

  • The table updates to reflect the newly added row.
  • [bug] The query object, the table object, and a transform all fail to reflect the newly inserted row despite that newly inserted row visually appearing in the table component.

In other words, the JavaScript state interfaces are out of sync with the actual component, and as a result, I can't access the newly created row.

I'm including a video and my sample code.

Update 1:

  • selectJobs.servedFromCache is false
  • But selectJobs.lastReceivedFromResourceAt is not including the most recently run SELECT.

Update 2:

  • Using reset doesn't help. It's still using the earlier query.
  • Moving the SELECT into an onSuccess script doesn't help either.
1672001560256 - selecting jobs 
1672001561291 - jobs selected 
1672001561292 - from cache?  false
1672001561292 - last received from resource at:  1672001496422

Supporting Materials

Failing to update

let jobData = {};
let pipeline = {};

createJobModal.close();

// Insert an empty "new" job
console.log(new Date().getTime(), " - inserting job");
const { id: ids } = await insertJob.trigger({
  additionalScope: {
    data: jobData,
    pipeline,
  },
});
jobData.id = ids[0];
console.log(new Date().getTime(), " - job inserted with id ", jobData.id);

// Select the newly created job.
console.log(new Date().getTime(), " - waiting 1.5s");
await new Promise(r => setTimeout(r, 1500));
console.log(new Date().getTime(), " - done waiting");

console.log(new Date().getTime(), " - selecting jobs");
await selectJobs.trigger();
console.log(new Date().getTime(), " - jobs selected");

console.log(new Date().getTime(), " - waiting 1.5s");
await new Promise(r => setTimeout(r, 1500));
console.log(new Date().getTime(), " - done waiting");

console.log(new Date().getTime(), " - selectJobs.data.id:");
console.log(selectJobs.data.id);
console.log(new Date().getTime(), " - jobsListTable.data.id:");
console.log(jobsListTable.data.id);
console.log(new Date().getTime(), " - jobListIds.value");
console.log(jobsListIds.value);
console.log(new Date().getTime(), " - checking for index ", jobData.id);
const newJobIndex = selectJobs.data.id.findIndex((id) => id == jobData.id);
console.log(new Date().getTime(), " - index is ", newJobIndex);

// jobsListTable.selectRow(newJobIndex);
// onEditJob.trigger();

For anyone who stumbles into this in the future, @JayL helped me solve this via chat:

Does toggling Keep variable references inside the query in sync with you app in the Advanced tab of the JS change anything for you here?

That did the trick for me!