Error Handling & Queries - Part 2

💬 Queries and Resources
1
  1. My goal: Update the UI with the error message returned from a query.
  2. Issue: The error property on a query doesn't appear to be populated synchronously.
  3. Steps I've taken to troubleshoot: Started by referencing this thread:
    Error handling and queries
  4. Additional info: (Cloud or Self-hosted, Screenshots) Cloud

I'm trying to do something that feels pretty normal for a UI/UX pattern, but Retool's query has some odd behavior regarding how it handles failures.

  const body = {...}

  const result = await someQuery.trigger({
    additionalScope: {
      body,
    }
  });

  if (!result) {
    console.error('Error: ', someQuery?.error)
    someErrorText.setValue(someQuery?.error);
    return;
  }

  utils.confetti();
  return result;

A query will always return (assuming the syntax of the overall JS is correct and the query exist), but the result won't be populated if there was a failure. In the above code, the if block will execute reliably.

However, the error property of someQuery will not always populate. Typically, on encountering an error from the query on the first attempt, it will never be populated, and UI can't be updated with it in the above way.

The prior thread on this topic suggested to use the checkbox for "Keep variable references inside the query in sync with your app". This doesn't seem to make a difference regarding this behavior, and based on the tooltip, "If this query calls setValue on a component, ensure that future references to the component have the updated value," there's no reason to believe it would impact query in a way to address this.

As the prior poster also noticed, even using something like setTimeout, the property doesn't seem to populate. Oddly, if you hover over the query and use the tooltip it prompts, you can see that the error is populated. The prior thread seemed to indicate that this is all due to replacing the reference under the hood, so error is never populated on what the query sees during its execution.

What is the reliable way to access the error property? This makes UI concerns around displaying errors difficult to do in a predictable fashion.

2

Adding one more piece of context, what's even more confusing is that the UI can end up in an odd state where it displays the prior error for a new error encountered on a subsequent attempt.

This appears to be because the query starts with the updated reference from the first run, with the error property populated from said first run.

As an example, if said query had some type of validation on it, the user could encounter an initial error, but no UI error indication other than possibly not populating the next step (since data would still be empty.) The user might correct the initial validation issue through luck or guessing, only to then be prompted with the same error upon encountering a different error. At this point, they feel stuck because they thought they already corrected the issue and don't understand why it's still occurring. If they submit a third time, they'll get the second error since it was now on the updated reference to the query.

If the above sounds convoluted, I apologize; I'm trying to abstract some of the concerns that have been reported to me from my users. This error reference issue is not terribly intuitive, and I'm unsure of the best way to proceed.