A quick way to check for null | undefined | empty string

Since day one of using retool it bugged me that I had to manually make sure some component or query variable is not empty.

I recently started adding some preloaded JS, and thought I'd share my most used snippet.

Add the following code to your preloaded JS (found at [orgName].retool.com/settings/advanced):

window.cUN = (value) => {
  if ( typeof value == 'undefined' || value === '' || value === null || value !== value ) return true;
  else return false;
}

When done, whenever you need you can quickly check if value is empty like this:

{{  cUN('')  }}  // True 
{{  cUN(NaN)  }} // True 
{{  cUN(null)  }} // True 
{{  cUN(undefined)  }} // True
3 Likes

Personally, I usually do something like this when I'm working with query results to avoid unnecessary errors

// If an array is expected as result, default to empty array
const data = {{myComponent.data || []}}

// If an object is expected as result, default to default value or empty object
const obj = {{myTransformer.value || {field: 'default value', ...}}}

Same apply when I'm using .map or .filter within components so it does not throw error if the source query is not yet executed

{{myComponent.data || []}}.map(...)

It's not the same as your explicit requirements but I thought it could help some other folks here :sun_with_face:

3 Likes