Hi, im using app builder, and when i try to make an API request it works well, but when i try to access to the data itself, it displays the data in the editor mode.
But im getting all this errors, even I’m accessing to the object in the correct way
by the way, how can i execute a request on page load?
Hi @jetixsolorzano,
So there’s a couple of things going on here. First, if you load the app builder and the request hasn’t been executed then any components that reference data within the request are going to complain about things not being defined. There’s a fundamental javascript feature that was introduced to JavaScript in the ES2020 standard that I’m trying desperately to teach JS developers both new and old about: optional chaining. If you already know what it is feel free to skip the next paragraph where I explain it.
Back in the day we used to have to inspect down the line of an object to see if things exist. We would need to create an if statement that looks like this: if (dog && dog.food && dog.food.ingredients && dog.food.ingredients.molecules) { dog.food.ingredients.molecules.combine() } just to be able to execute a single line of code. In ES2020 they introduced the ability to use the question mark to do what is called optional chaining, so instead we can say dog?.food?.ingredients?.molecules?.combine() and we can rest assured that the line will not break. Essentially the question mark will stop javascript from executing the line should a null or undefined value exist. It will return null if the optional chaining is used in an assignment.
Back to why we should care here with 8base. The error checker wants to make sure that when you deploy your app it won’t break. So it’s telling you now, during development, if there are potentially issues when data isn’t present (ie. the request wasn’t executed or doesn’t return the expected data). The best practice that we suggest here is to use optional chaining, so in your error at the top you would use getBranchOfficesList.data?.branchOfficesList?. and so on. It’s also good practice when you are doing things like referencing and array in a looper for the data property to finish off your handlebars with || [] so that at the very least an empty array is passed as data.
For executing a request on page load, if you go into the properties of the page (the gear icon next to the page in the pages dialog) there’s a beforeRouteEnter event that you can either select a request to execute or run Custom Code and specify state?.requestName?.run().
