Component On Mounted not executing completely, data collection isn't being loaded into component variable unless

There’s something I do not understand about how the On Mounted event workflows work for components.

I created a component with a workflow that is triggered on the event: On Mounted.

It contains several actions to load data (via Data Collections) into local component variables. I’ve also made those local component variables externally so they can be referenced.

When I try to access these component variables after the page has loaded, the variables are empty.

I’ve been trying to figure out why for the last couple of days. It wasn’t really an issue, as I could work around it by executing the workflow manually.

But today, I decided to look at it a bit deeper, so I started off with putting in Execute Javascript actions in between loading data into those variables so I can print them out via console.log().

Sure enough, after inserting those console.log() statements, the data collections in those component variables are loaded and available to access outside of the component… :man_shrugging:t4:

I think that the mounted event can be triggered before collections load. that’s why there is the global trigger for page load after fetching collection.
logging doesn’t help you here because the collection data is stored in an object and you are probably logging the reference to that object. once it’s populated with data you will see that data everywhere you logged its reference. try logging a single value in the collection, like a string.

if you share why you want to save the collection in a component variable maybe someone can help you with a different approach to solve the problem.

1 Like

Yeah, logging didn’t actually fix it. I reloaded the entire app, and it produced the same issue, even with logging statements.

Wil the global trigger work? I’ll look into it.

Why I’m doing this?
It’s related to this post I made several weeks ago: Is there such a thing as a page instance variable?

I’m using a component as a kludgy solution for page instance variables. It seems to hold up for all the things I’ve done so far, but it isn’t doing this one thing.

Thanks to your comment, I tried something I didn’t think of doing.

Instead of using the On Mounted workflow, I just created a Component Action/Workflow to initialize the component variables and call the action/workflow externally from the Trigger page workflows.

Works!

Nevermind! Spoke too soon! :cry:

if you need the collection data, and the collection is set to auto-fetch on page load, you can use the trigger page load after collection. if you are looking for page variables with collection data auto-fetching the collection doesn’t make sense because it will be automatically fetched on every page, so maybe what you want to do is to fetch the collection from a component workflow and assign it to the variable.

Thanks @dorilama!

I tried that… but even this seems not to work…

  1. Fetched a collection - used the “Test” button - block turns green
  2. Checked Inspector Console > Network > Request Response > Looks good!
  3. Accessing the result of the first Action shows up as “undefined”?

collections have global variables by default, after fetching the data will be there

But it isn’t there… or am I missing something?

it’s there, in the global variables, not the returned value

Horray! I think that worked… but I’m not exactly sure I completely understand how collections and global variables work.

What I did is Fetch the collection first in a separate action. Then, I used a Change variable action and picked the same Data Collection.

Is that what you mean by a Data Collection having global variables? That once its called via a Fetch Collection, the result is stored and available via the same Data Collection (and doesn’t have to call again to the database)?