I get this type error a lot in Retool mobile. On the surface it's very simple: the obj or variable is not defined. Most of them a simple if statement patches the error up.
What I don't quite understand, and hoping some guru can share more insight, is that
why it's happening even before that variable is called?
if any global fix rather than keep patching leaks?
Here's a very simple example.
- SQL delete based on the id of
selectedItem
- The query won't be called unless a button click
- And that button is several layer down UI navigation
Yet I get Cannot read properties of null error on App load!
ok so I have to make an assumptions here to hopefully answer this correctly so I apologize if I've misunderstood the situation. I'm guessing that error only shows on app load and any time it's ran after the app loads it runs correctly without errors. If this is the case, then what you're experiencing is sort of a side-effect of the GUI and React/JS. Javascript itself is an interpreted language (I think you could technically call it a Just-In-Time compiled language but I don't wanna argue nerdy semantics lol). The important thing here is that in a fully Javascript/React project the code you write is interpreted at run-time as opposed to being compiled and then afterwards it's ran. It's this need for 'interpretation' that's kinda causing your issue. Since the GUI is... well, a GUI and not JS when the page loads it needs to take all the info from the query and translate it to JS and only after that can it start interpreting all the code. On page load the first (some where around the first) thing that Retool will do is translate the queries to JS, but this is the first thing it does so at this point it doesn't know selectedItem or selectedItem.id exists because it has just started the translation process. it's basically writing the queries at the top of the file and any components/html is below it meaning it doesn't know that code is there yet. this is why when you run the query it works, because the query has already been translated (on page load) and the rest of the file has been read once afterwards allowing Retool to look-ahead so to speak when the query runs making selectedItem no longer null or unkown.
I think the easiest fix is to write the statement in a very slightly different way using the Optional Chaining operator ?. (javascript is weird lol): {{ project_collection.selectedItem?.id }}. Now, if selectedItem is undefined or null the whole expression short circuits and evaluates to undefined instead of throwing that error. The short circuit is like putting a break statement in a loop, anything after it is ignored, so the second this happens it doesn't even bother to try and read .id skipping the possibility of an error being thrown.
let me know if you're more of a visual person, I think I can draw this up for ya in a way that makes sense (a picture is worth a thousand words?)
2 Likes
Thanks, spot on. And great in depth analysis
1 Like
