withTracker and nested component

Hi, could anyone take a look and tell me where is problem in below code.
I expected meteor to rerender ui on Players collection update but there is no UI update. When Players collection is update i have to manually refresh browser to see PlayCard component updated.

class PlayCard extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <Card.Group>
        {this.props.players.map(player => {
          return (
            <Card key={player._id}>
              <Card.Content>
                <Card.Header>Name: {player.name}</Card.Header>
                <Card.Description>
                  <List divided relaxed>
                    <List.Item>
                      <List.Content>
                        <List.Header> Points : {player.points}</List.Header>
                      </List.Content>
                    </List.Item>
                    <List.Item>
                      <List.Content>
                        <List.Header> Turn : {player.turn}</List.Header>
                      </List.Content>
                    </List.Item>
                  </List>
                </Card.Description>
              </Card.Content>
            </Card>
          );
        })}
      </Card.Group>
    );
  }
}

const PlayCardWithTracker = withTracker(props => {
  const play = props.play;
  return {
    players: Players.find({ _id: { $in: play.players } })
  };
})(PlayCard);

class TrainerDashboard extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    if (this.props.ready) {
      return (
        <div>
          {this.props.plays.map(play => (
            <PlayCardWithTracker play={play} key={play._id}/>
          ))}
          <NewGameModal />
        </div>
      );
    } else {
      return <div />;
    }
  }
}

export default withTracker(props => {
  const handle = Meteor.subscribe("trainerCurrentPlays");
  return {
    ready: handle.ready(),
    plays: Plays.find({
      userId: Meteor.userId()
    }).fetch(),
    players: Players.find()
  };
})(TrainerDashboard);

I found solution. To make sure that component will be rerendered you have to fetch the data. If you use the cursor then its not reactive. And no single word in documentation about this. I wonder how many bugs more are there. Did I hear somebody saying meteor is not dying?

1 Like

the examples on https://guide.meteor.com/react.html uses .fetch. But i agree, its not so obvious, that you need to use fetch, in particular, if you come from blaze.

Minimongo-cursor are only supported in blaze nativly, for everything else, you need to call .fetch on a cursor to get the array of documents.

2 Likes

Great catch! I think you’re right, their’s probabbly a lot of bugs out there because of this. The docs were being updated for a while, but maybe much less now.

I’m sure they’d accept a PR for the docs?

Thanks for posting your solution, I’m heading into this world as I migrate my Blaze components over to React, and will be making heavy use of withTracker until I get the GraphQL server fully build out.

Is anyone using Blaze with React still these days?