Hi. About 8 months ago I created a fairly large custom component to render a piece of an admin page, since at the time there didn't appear to be support for what I required. I see there's since been several Retool upgrades that would probably provide a more elegant framework to accomplish this, but I'm happy to stick with my script-generated solution since it was working fine.
However, a few days ago the component broke and I'm perplexed as to why. When i view the page the component completely doesn't render, and the browser console logs imply the component is undefined. But if I go into the editor and make a single edit inside the script window (like just adding a random space), it will auto-refresh the page as I type (as it normally does) and then the component suddenly renders and works. It looks like the script is not executing when the page loads. The only way to get it working is by modifying the script in the editor and thus forcing a component refresh.
Thanks for writing in. This might be a situation where writing into chat and having us look at the app in question would be the best way forward. Just a thought! For now, could you share with me the actual browser console message as a jumping-off point?
Ok, yeah you're right, I can take this into the chat. If it turns out to be a noteworthy bug/solution that others could benefit from, I'll make another post here.
hi Budder, no my page is still broken and the support haven't suggested any solutions yet. But I guess I'm not the only one seeing this error, which will hopefully bump the priority a bit.
Ok bug is fixed, thanks to helpful support. The issue was that the custom component was trying to render before it was ready, and the solution was to add an extra line of code at the top of the component to check for this. It checks if the model variable is null, or if the result of the first necessary query is null.... and if so, returns a null value for the component.
e.g.
if (!model || !model.getInitialDataQuery.value ) { return null };
I'm still not sure why it decided to suddenly break since the component was fine for about 6 months prior.
Hi, I have another similar issue but this time round is related to transformer.
I have a custom component which takes in a model using output of a transformer. When input changes, the affected query ran but since there are some other queries running together, the affected query was in back of the queue causing the transformer value not to be updated yet.
However, the custom component renders the UI first causing it to show the old transformer value (the display is tied to the transformer values) since the new values are still pending for the query to run
Is there any way we can check for transformer value to be updated first before rendering the UI?
So, this will depend on how you're writing your custom component. If you are using Vanilla JS, then you will have to subscribe to the model and your code will look similar to this below:
