Reactive Data Source in [email protected] and React

Question

I am building a Chat app in Meteor 1.3, ES6 and React.

I have 3 collections: 1. People: Who has an array of conversations that the person are involved. 2. Conversations: That also have the people that are involved. 3. Messages: That has a conversation_id field to relate to second collection.

So I am using reywood:publish-composite package, to manage the reactive joins:

1. => Get Conversations for this People (user)
2. => Get the Messages of all the Conversations of this user
3. => Filter messages according to the conversation selected (a react state)

I am also using the package React-Komposer from Kadira.

This is my code:

  // publications.js


    Meteor.publishComposite('compositeChat', function (people_id) {
      return {
        find() {
          return Collections.People.find({_id: people_id});
        },

        children: [
          {
            find(people) {
              return Collections.Conversations.find(
                {_id: {$in: people.conversations }},
                {sort: {'lastMessage.date': -1}}
              );
            }
          },
          {
            find(people) {
              return Collections.Messages.find(
                {conversation_id: {$in: people.conversations }},
                {sort: {date: 1}}
              );
            }
          },
          {
            find(people) {
              return Collections.People.find(
                {_id: {$in: people.contacts }}
              );
            }
          }
        ]
      };
    });

// AppContainer.js

import {composeAll, composeWithTracker} from 'react-komposer';
import AppWrapper from '../AppWrapper.jsx';
import * as Collections from '../../../../lib/collections/collections.js';

function composeChat(props, onData) {

  let user;
  if (!Meteor.userId()) {
    user = 'qXSWv64qKaEPAu5yp';
  } else {
    user = Meteor.userId();
    //console.log('Meteor.userId()', Meteor.userId());
  }

  const
    chatSub = Meteor.subscribe('compositeChat', user);

  if (chatSub.ready()) {

    const chatData = {

      chatLoading:
        !chatSub.ready(),

      myUserData:
        Collections.People.findOne({_id: user}),

      myContacts:
        Collections.People.find(
          {_id: { $ne: user}}, { sort: { name: 1 } }
        ).fetch(),

      myConversations:
        Collections.Conversations.find(
          {}, { sort: { date: -1 } }
        ).fetch(),

      noConversationContacts:
        (function () {
          return myFunctions.chat.noConversationContacts(
            Collections.People.find(
                {_id: { $ne: user}}
              ).fetch(),
            Collections.Conversations.find().fetch()
          );
        }()),

      myMessages:
        Collections.Messages.find(
          {}, {sort: {'lastMessage.date': -1}}
        ).fetch(),

      myOtherPeople:
        (function () {
          return myFunctions.chat.getTheOtherPeople(
            Collections.Conversations.find().fetch(),
            user
          );
        }()),

      unreaded:
        (function () {
          return myFunctions.chat.countUnreadedMessages(
            user,
            Collections.Conversations.find().fetch(),
            Collections.Messages.find().fetch()
          );
        }())
    };

    console.log('chatData', chatData);
    onData(null, {chatData});
  }

}

export default composeWithTracker(composeChat)(AppWrapper);

The problem is: When new message is added, I am not getting the update in the UI, but the data is there (in Mongo), so if I refresh the page, I get the new messages...

In my previous version of the app (Meteor 1.2) this reactive joins worked perfectly.

What could be wrong?

1. Does publish-composite package not work with Meteor 1.3?
2. Does publish-composite can't be used with React-Komposer?
3. Do I have to mix them in other way?
4. Is there another option (with or without this packages) to manage reactive joins in Meteor 1.3?

Thanks