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

**URL:** <https://community.weweb.io/t/component-on-mounted-not-executing-completely-data-collection-isnt-being-loaded-into-component-variable-unless/9320>\
**Category:** Ask us anything\
**Tags:** workflows, bug, components\
**Created:** [June 25, 2024, 5:32am UTC](https://community.weweb.io/t/component-on-mounted-not-executing-completely-data-collection-isnt-being-loaded-into-component-variable-unless/9320 "2024-06-25T05:32:24Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![kanepaamauloa](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/kanepaamauloa/32/8944_2.png) [@kanepaamauloa](https://community.weweb.io/u/kanepaamauloa)\
**Post date:** [June 25, 2024, 5:32am UTC](https://community.weweb.io/t/component-on-mounted-not-executing-completely-data-collection-isnt-being-loaded-into-component-variable-unless/9320/1 "2024-06-25T05:32:25Z")

</div>

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… 🤷🏽‍♂️

---

<div class="post-metadata">

**Author:** ![dorilama](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorilama/32/10403_2.png) [@dorilama](https://community.weweb.io/u/dorilama)\
**Post date:** [June 25, 2024, 6:29am UTC](https://community.weweb.io/t/component-on-mounted-not-executing-completely-data-collection-isnt-being-loaded-into-component-variable-unless/9320/2 "2024-06-25T06:29:12Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![kanepaamauloa](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/kanepaamauloa/32/8944_2.png) [@kanepaamauloa](https://community.weweb.io/u/kanepaamauloa)\
**Post date:** [June 25, 2024, 1:12pm UTC](https://community.weweb.io/t/component-on-mounted-not-executing-completely-data-collection-isnt-being-loaded-into-component-variable-unless/9320/3 "2024-06-25T13:12:51Z")

</div>

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?](https://community.weweb.io/t/is-there-such-a-thing-as-a-page-instance-variable/8604)

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.

---

<div class="post-metadata">

**Author:** ![kanepaamauloa](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/kanepaamauloa/32/8944_2.png) [@kanepaamauloa](https://community.weweb.io/u/kanepaamauloa)\
**Post date:** [June 25, 2024, 2:07pm UTC](https://community.weweb.io/t/component-on-mounted-not-executing-completely-data-collection-isnt-being-loaded-into-component-variable-unless/9320/4 "2024-06-25T14:07:37Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![kanepaamauloa](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/kanepaamauloa/32/8944_2.png) [@kanepaamauloa](https://community.weweb.io/u/kanepaamauloa)\
**Post date:** [June 25, 2024, 2:28pm UTC](https://community.weweb.io/t/component-on-mounted-not-executing-completely-data-collection-isnt-being-loaded-into-component-variable-unless/9320/5 "2024-06-25T14:28:39Z")

</div>

Nevermind! Spoke too soon! 😢

---

<div class="post-metadata">

**Author:** ![dorilama](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorilama/32/10403_2.png) [@dorilama](https://community.weweb.io/u/dorilama)\
**Post date:** [June 25, 2024, 2:33pm UTC](https://community.weweb.io/t/component-on-mounted-not-executing-completely-data-collection-isnt-being-loaded-into-component-variable-unless/9320/6 "2024-06-25T14:33:42Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![kanepaamauloa](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/kanepaamauloa/32/8944_2.png) [@kanepaamauloa](https://community.weweb.io/u/kanepaamauloa)\
**Post date:** [June 25, 2024, 2:46pm UTC](https://community.weweb.io/t/component-on-mounted-not-executing-completely-data-collection-isnt-being-loaded-into-component-variable-unless/9320/7 "2024-06-25T14:46:29Z")

</div>

Thanks @dorilama!

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

 ![CleanShot 2024-06-25 at 10.42.17@2x](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/3/3328c225696103c7195d09b648a6057d8bb2bd38.jpeg)

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”?

---

<div class="post-metadata">

**Author:** ![dorilama](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorilama/32/10403_2.png) [@dorilama](https://community.weweb.io/u/dorilama)\
**Post date:** [June 25, 2024, 3:11pm UTC](https://community.weweb.io/t/component-on-mounted-not-executing-completely-data-collection-isnt-being-loaded-into-component-variable-unless/9320/8 "2024-06-25T15:11:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kanepaamauloa](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/kanepaamauloa/32/8944_2.png) [@kanepaamauloa](https://community.weweb.io/u/kanepaamauloa)\
**Post date:** [June 25, 2024, 3:13pm UTC](https://community.weweb.io/t/component-on-mounted-not-executing-completely-data-collection-isnt-being-loaded-into-component-variable-unless/9320/9 "2024-06-25T15:13:11Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![dorilama](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorilama/32/10403_2.png) [@dorilama](https://community.weweb.io/u/dorilama)\
**Post date:** [June 25, 2024, 3:43pm UTC](https://community.weweb.io/t/component-on-mounted-not-executing-completely-data-collection-isnt-being-loaded-into-component-variable-unless/9320/10 "2024-06-25T15:43:18Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kanepaamauloa](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/kanepaamauloa/32/8944_2.png) [@kanepaamauloa](https://community.weweb.io/u/kanepaamauloa)\
**Post date:** [June 26, 2024, 1:55am UTC](https://community.weweb.io/t/component-on-mounted-not-executing-completely-data-collection-isnt-being-loaded-into-component-variable-unless/9320/11 "2024-06-26T01:55:39Z")

</div>

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)?
