I have an API (custom) for loading a profile for a user, and a screen that contains a form. The api returns an array of objects but in this case will always return either zero or 1 object in the array.

I want to be able to both support filling the fields if the record already exists as well as support saving / updating a record.

I am currently using the API call that parses as datatype.

I have an app state variable that is a list of that data type.

Then I have an on page load action that calls the api, and sets the resultant response to the app state.

The fields are bound to the first list item as well as having default values for each.

On first load, I get a bad state, no element, Widget was scalfold.

If I navigate away from the screen and back, everything loads correctly. I was going down the on page load action as I wanted to store in a variable if an ID exists or not so I know if it’s an update or insert, also required for delete call. What am I doing wrong here?

I’m presuming the issue is the fields are attempting to bind before the api is complete. Also, if I have zero records it will error like this every time.

I need to obviously acomadate for zero or 1 records as well as failures of the API call itself. Would it be more proper to bind the query to the page and if so, what’s the best path to handle the save/update/delete requirement of getting the id of the record? Would that be a subsequent API call (seems redundant to call twice).

I was expecting to have the page load without error regardless if there were zero records and if record exists, fill the page and allow me to then branch on if an ID is present so I can do delete calls when requested as well as new/update calls.