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
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();