Meteor React 2 Level down collection stopped being reactive

Question

I have 1 project with one or more taskTrees.

For each taskTree, I have multiple tasks.

The problem is whenever I add new task, I don't see the task being added until I refresh the page.

I am using Meteor React 1.2.1 with following packages

react
kadira:flow-router
meteortoys:allthings
kadira:react-layout

I also have 3 collections.

Projects = new Mongo.Collection("projects")
TaskTrees = new Mongo.Collection("task-trees")
Tasks = new Mongo.Collection("tasks")

My collection structure looks like this:

**Projects**
_id
taskTrees: [taskTreeId]

**TaskTrees**
_id
tasks: [taskId]

**Tasks**
_id
title

I use FlowRouter to render ProjectPage

FlowRouter.route('/project-page', {
    action(params, queryParams) {
        ReactLayout.render(ProjectPage)
    }
})

This is my 3 react classes

ProjectPage = React.createClass({
    mixins: [ReactMeteorData],

    getMeteorData() {
        Meteor.subscribe('project-page')
        return {
            taskTrees: TaskTrees.find().fetch()
        }
    },

    renderTaskTrees() {
        if(this.data.taskTrees) {
            return this.data.taskTrees.map( (taskTree) => {
                return <TaskTree
                    key={taskTree._id}
                    taskTreeId={taskTree._id} />
            })
        }
    },

    render() {
        return(
            <div>
                RenderingTaskTree
                {this.renderTaskTrees()}
            </div>
        )
    }
})

TaskTree = React.createClass({
    mixins: [ReactMeteorData],

    getMeteorData() {
        Meteor.subscribe('task-tree', this.props.taskTreeId)
        return {
            tasks: Tasks.find().fetch()
        }
    },

    renderTasks() {
        if(this.data.tasks) {
            return this.data.tasks.map( (task) => {
                return <Task
                    key={task._id}
                    title={task.title} />
            })
        }
    },

    render() {
        return(
            <div>{this.renderTasks()}</div>
        )
    }
})

Task = React.createClass({
    render() {
        return(
            <div>
                <div>Title: {this.props.title}</div>
            </div>
        )
    }
})

This is my publish method in server folder

Meteor.publish('project-page', () => {
    const project = Projects.findOne()
    if(project.taskTrees) {
        const taskTrees = TaskTrees.find({_id: {$in: project.taskTrees}})
        return taskTrees
    }
    this.ready()
})

Meteor.publish('task-tree', (taskTreeId) => {
    const taskTree = TaskTrees.findOne({_id: taskTreeId})
    if(taskTree.tasks) {
        const tasks = Tasks.find({_id: {$in: taskTree.tasks}})
        return tasks
    }
    this.ready()
})

etmarch · Answer 1 · 2015-12-04T00:26:29.660

I think it makes more sense for you to put the subscribes you need from [ReactMeteorData] all inside the ProjectPagecomponent, and then pass the reactive data as props to its children.

Also, you should return the cursors directly in your publish functions, as mentioned here.

So your first publish function would now look like this:

if(project.taskTrees) {
    return TaskTrees.find({_id: {$in: project.taskTrees}});
}

Meteor React 2 Level down collection stopped being reactive

1 Answers1