Why findOne() doesn't work in withTracker() section but it does work in render() method?

Question

Meteor and React. I am trying to subscribe two collections of mongo, and use a particular document to pass it to a component. If I try to get the document in the whitTracker () section it seems that it will search for it before synchronizing the document and returns indefinitely. But, if I do it in the render section, after making sure that isLoading is false, then it works. Where is the right place to find data from collections to which I subscribed?

This (making query in withTracker section) doesn't work: laLoca and laLoca1 will be undefined.

    render() {
        if (this.props.isLoading) {
          return <LoaderExampleText />;
        }        

        return (<MyMap laLoca={this.props.laLoca} />);
      }
    }

    export default withTracker(() => {
      const handles = [
        Meteor.subscribe("wells"),
        Meteor.subscribe("locaciones"),
        Meteor.subscribe("Drylocationlast")
      ];
      const isLoading = handles.some(handle => !handle.ready());
      const laLoca1 = Drylocationlast.findOne({ codigo: "dl" });
      const laLoca = Locaciones.findOne(laLoca1.dryLocationId);

      return {
        laLoca:laLoca,
        wells: Wells.find().fetch(),
        isLoading: isLoading
      };
    })(WellHome);

But this ( make the query in render method), does work:

    render() {
        if (this.props.isLoading) {
          return <LoaderExampleText />;
        }
        const laLoca1 = Drylocationlast.findOne({ codigo: "dl" });
        const laLoca = Locaciones.findOne(laLoca1.dryLocationId);

        return (<MyMap laLoca={laLoca} />);
      }
    }

    export default withTracker(() => {
      const handles = [
        Meteor.subscribe("wells"),
        Meteor.subscribe("locaciones"),
        Meteor.subscribe("Drylocationlast")
      ];
      const isLoading = handles.some(handle => !handle.ready());

      return {
        wells: Wells.find().fetch(),
        isLoading: isLoading
      };
    })(WellHome);

Answer 1

If laLoca1 is undefined, laLoca1.dryLocationId will crash (you see an error in the console, right?), and I imagine the tracking will not be setup correctly.

When you put:

const laLoca1 = Drylocationlast.findOne({ codigo: "dl" });
const laLoca = Locaciones.findOne(laLoca1.dryLocationId);

in render() after you have verified that the subscriptions are ready, they will never be undefined, and it will work.

I think optimally, render() should not be responsible for fetching data, only to visualize it. In withTracker() you can do something like this:

const isLoading = handles.some(handle => !handle.ready());

if(isLoading){
  return {
    laLoca: null,
    wells: null,
    isLoading: true
  };
}else{
  const laLoca1 = Drylocationlast.findOne({ codigo: "dl" });
  const laLoca = Locaciones.findOne(laLoca1.dryLocationId);
  return {
    laLoca: laLoca,
    wells: Wells.find().fetch(),
    isLoading: false
  };
}