how to get data from react-meteor-data container only when it's ready?

Question

I am having trouble getting data from my container since isReady stays false. When looking in MeteorToys the collection does get loaded so I do not understand why.

On the server I define the StaticContents collection which gets loaded with "api" data. (which I typed in myself for now)

export const StaticContents = new Mongo.Collection("staticContents");

if (Meteor.isServer) {
  Meteor.publish("polled-publication", function() {
    const publishedKeys = {};
    const poll = () => {
      // Let's assume the data comes back as an array of JSON documents, with an _id field, for simplicity
      const data = [{ _id: 1, name: "jef" }, { _id: 2, name: "jan" }];
      const COLLECTION_NAME = "staticContents";
      data.forEach(doc => {
        if (publishedKeys[doc._id]) {
          this.changed(COLLECTION_NAME, doc._id, doc);
        } else {
          publishedKeys[doc._id] = true;
          this.added(COLLECTION_NAME, doc._id, doc);
        }
      });
    };
    poll();
    this.ready();
  });
}

On the client I import this StaticContents collection and react-meteor-data and put this in a container which passes these variables to my react component.

import { Meteor } from "meteor/meteor";
import { Mongo } from "meteor/mongo";
import { StaticContents } from "../api/gap.js";
import { createContainer } from "meteor/react-meteor-data";
import React, { Component } from "react";

class Dashboard extends Component {
  componentWillMount() {
    console.log("log the props");
    console.log(this.props);
  }
  render() {
    //const gapData = Session.get("gapData");
    return (
      <div className="container">
        <div className="starter-template">
          <h1>This is the dashboard page.</h1>
          <p className="lead">
            Use this document as a way to quickly start any new project.<br />{" "}
            All you get is this text and a mostly barebones HTML document.
          </p>
          <p>
            {this.props.testprop}
            <br />
            {this.props.isReady && this.props.content.name}
            <br />
          </p>
        </div>
      </div>
    );
  }
}

export default createContainer(props => {
  // Do all your reactive data access in this method.
  // Note that this subscription will get cleaned up when your component is unmounted
  const handle = Meteor.subscribe("polled-publication");

  return {
    isReady: handle.ready(),
    content: StaticContents.find({}).fetch(),
    testprop: "this is a testprop"
  };
}, Dashboard);

When logging the props isReady is false and content is an empty array. How should I solve this and why is it taking so long to load?

I am using the official meteor guide "loading from rest" as a guide. https://guide.meteor.com/data-loading.html#loading-from-rest

Answer 1

Since you are logging this.props in componentWillMount , it will get executed once - before <Dashboard> get mounted and probably before the polled-publication subscription is ready. During which, isReady and contents would be what you are getting. Subsequently, the subscription should get ready and the props would become what you expect.

You can put the console.log within render to check out the values of the props on each render.

Also in

{this.props.isReady && this.props.content.name}

this.props.content is an array, so it doesn't make much sense to reference a name field.