SQL Query Data not Accessible to Components

Hi All,

I'm running into a very perplexing issue that's been stumping me all day. There are actually a few problems that have cropped up, I'll list them down below. But the main issue is that SQL query results are not accessible to components on the form. Running the SQL in the query views returns data, but when I try to set the same query as a data source for a select widget, a blank error is shown in whichever fields I try to access the row data. This query in particular I had set to run on page load, but nothing changed when I unchecked that setting.

image
image

As for the other issues that popped up in conjunction to this:

  1. Some new components that are dragged onto the form are immediately invisible, even with the Hidden property set to false (as it is by default).
  2. Reloading the page (the whole browser tab) in edit mode or preview mode results in the whole form being blank. This problem is intermittent for me. I just continue to refresh until the components appear again.
  3. JS queries running for way longer than they should and basically seem to get hung up before they even run anything. One such query had newb-style console.log() as the first line, with a few other basic/inconsequential statements. I ran it, went to lunch, and came back to find it had been live for the whole hour... with no output to the console.

If anyone wants screenshots of these other issues, or more from main problem above, just let me know and I'll compile more. Otherwise, thanks in advance for any input/insight/suggestions!!

Note: My company does not self-host an instance of ReTool.

Hey @Nathan!

Can you try using {{ item.Id }} as the value for your select items instead of referencing the PublisherId? It looks from the query as though the latter is only being used as a filter and not actually getting returned by the query.

As to the other issues you described, it'd be really helpful to see more screenshots! It'd also be helpful to know if you have any custom JavaScript or CSS in your org.

1. Which components are you seeing this behavior with? Are they not showing up at all or showing up as hidden on the canvas? e.g.:

2. By "whole form" do you mean your entire Retool app? Or a specific form component within your app? When you reload like this do any errors appear in your browser's debugging console?

3. Are you seeing this delayed behavior across apps, or in a single app? This can show up if there's a background JS process causing a disruption that has been triggered by some other query or component. It might be that that same process is also causing trouble elsewhere in your app (i.e. 2.) Doing a comparison with a blank app is particularly helpful here. If you wouldn't mind us stepping into your org we can also take a look around :slightly_smiling_face:

Hi Kabirdas! I wasn't expecting such a quick response, so sorry for getting back to you just now.

I took a few more screenshots to help create a better picture of what I'm seeing (at least with the invisible components and query errors).
If I enter the app in Edit Mode, I'm met with the following screen. The canvas is blank and the Component Explorer pane is stuck on loading. Any new components that are dragged on cannot be seen, and I cannot click in the exact spot that I released to select it again.

Now if I reload the page, then everything appears again as normal:

Then when I proceed to Preview Mode, all of the widgets are invisible again. I noticed this time that there's a message in the bottom-left corner of the screen that constantly says "Waiting for .retool.com".

If I reload again in Preview Mode, then all of the widgets appear as normal:

So for the time being, refreshing isn't so much of a big deal lol. However, I'm still having issues linking components to queries. (This is typically not a problem, and I've loaded select widgets like this with several of our other apps.) I mistakenly used the wrong screenshot in my initial post, but here are the correct views. On first load, of course the SQL query is empty, so the select component won't have any data to use as a source.

However, after running the SQL query, both the Value and the Label field are having some issue recognizing the columns. Both show that short "Error" with no other explanation, which is unusual, within a green-highlighted border.

So to answer you questions!

  1. I do not have any custom JavaScript/CSS loaded. I'm not at that level with ReTool just yet, but I've gotten by with ReTool's robust components!
  2. Pretty much any component that I drop onto the canvas (on first load in Edit Mode) disappears into the abyss. The new components only appear if I reload the page (sometimes 2 or 3 times)... Actually, it seems the problem is exacerbated whenever I have at least two tabs open (regardless of whether either is in Edit or Preview Mode).
  3. Basically the same issue as described with screenshots above and in #2 directly above.
  4. I have created several new test apps (and since deleted them) to see if I can reproduce these issues. The long-running queries in particular definitely still occur. In one test app, I even created a single JS query that assigned a number to a variable and attempted it console.log() it. Nothing appeared in ReTool's Inspector console and the query definitely ran for over 5 minutes.

And finally, I would love to get you access so you or another engineer might dive in and observe/investigate! Just let me know what you would need me to set up.

Another scenario from a test app I just created to see if there were any changes. I created a brand new test app with only a SQL query with the same code as the Get_Publishers query in the screenshots above. The ReTool Inspector shows one line for the query being run on page load (the query was set to "run when inputs change" by default). There is a second line showing when I manually ran the query once. On the third run, I had tried to drag a text widget onto the form, which instantly disappeared as before. However, immediately after, the unresponsive page alert appeared as shown below. Even when I select Wait on the alert, the page is still unresponsive.

Hey! Just want to circle back on this thread in case anybody stumbles across it. It turns out there was an infinite while loop running in a JS query which was causing things to slow down!

1 Like