React + Reactivity when using collection helpers?

react
1

I am using the old method (mixin) for reactivity with react.
I’ve got this:

mixins: [ReactMeteorData],

  getMeteorData() {
    return {
      _portfolio: Portfolios.findOne({ _id: Meteor.user().selectedPortfolio })
    }
  }

I heavily use collection helpers on that Portfolio object. However I am finding that the updates are not reactive. I think I can hack up a solution where I simply include an element in that component which is being updated by some other reactive data, and that would mean the collection helper would fire again… but maybe there is a better way?

2

Is there a reason you’re forced to use the mixin instead of the container?

3

No reason at all, I built the app before they had the newer way to do things.
I looked at Komposer or whatever the new way is, but didn’t see a need.
Would that solve my issue here?

4

I would get off of collection helpers, make an importable module that does all of the collection helper stuff, and then implement it inside the container, feeding it to the component you want to use it in as a property.

5

I have a huge amount of collection helpers. I use the collection helpers to interpret the data structures stored within that collection. I’ve built the whole app using collection helpers everywhere, its not really feasible to change. There are only a few components where this is an issue.

What you’re saying does make sense though, I could just have my own library which I import and feed the collection into.

I think the issue with my reactivity is that a certain few collection helpers load data from other collections. The component doesn’t know when that other collection has been updated… so its not updating my component.

6

I was able to hack around it by just having some reactive data as an input into one of the collection helpers, even though the collection helper fetched that data itself already.

1 Like
7

Hi there. I also had the problem with collection helper + React. When switching routes to a new page, then back, the helper would return empty array. Did move Subscriber from Container Comp. to the root App Container Comp. and it worked, but after adding the query join condition, did fail again, so after more reading, found an answer.

React might display UI DOM before Meteor would load all data from Server Database. + React does re-render a component on props or state change. => That’s why it is important to have a “loading” property in Container Component for Child Component, which is going to change value from – loading – true (data did not load), to – false (data did load). On value change the Child Component will re-render, so when the data will be loaded, the component will re-render.