Make reactive joins in ReactJS

1

Have been struggling with this for really long; with my Meteor+ReactJS app, I want to have a reactive join between the MainCollection and the SubCollection. And the PublishComposite might just be what I need. However, when the SubCollection is updated, this is not reactive!

does anyone know how to make a reactive server-side join with meteor+react?

server code

import { publishComposite } from 'meteor/reywood:publish-composite';
Meteor.MainCollection('maincollection.pub.all', {
  find: function () {
    return MainCollection.find();
  },
  children: [
    {
      find: function (doc) {
        return SubCollection.find(
          { mainCollectionId: doc._id },
          {
            sort: { createdAt: -1 }, limit: 1,
            fields: {
              completedAt: 1,
              mainCollectionId: 1,
            }
          })
      }
    }
  ]
});

client container

export default createContainer(() => {
  let mainCollectionSub = Meteor.subscribe('maincollection.pub.all');
  options = {
    transform: function (doc) {
      doc.subcollection = SubCollection.findOne({
        mainCollectionId: doc._id }, ).fetch();
      return doc;
    }
  }
    var maincollection = MainCollection.find({}, options).fetch();
  return {
    maincollection: MainCollection.find({}, options).fetch(),
  }
}, MainCollectionView);
2

This library here should do what you want without having to mess with the aggregation pipeline:

3

this looks promising, but will break down my existing implementation for asyncstorage on react-native

Isn’t there a simple but straight forward method?

4

You could also try this:

https://atmospherejs.com/jcbernack/reactive-aggregate

And then use MongoDB’s aggregate pipeline to do a LEFT JOIN.

5

I think the right way to do this on the client is to use a collection helper - I’m not sure that transform is actually reactive in that way.

6

using helpers is not typical for meteor+react

@rhywden - is it possible to give a practical example how this pipeline is used with react-aggregate?

7

Interesting that it’s not typical - that’s how we do stuff internally and seems to work well, but to each their own!

8

@jwdobken how will it break it ?

9

I’m just wondering how would you solve the missing data issue on ReactNative? We’ve tried it by transforming our collection object with an additional helper that links to the sub collection, f.e. like this:

Meteor.collection('user_files',{transform:(doc) => 
{doc.fileDoc = Meteor.collection('files').findOne({_id: doc.fileId}); 
return doc;}}).

This works most of the time, but makes problems if the data of the files collection was received after the user_files data (we are also using publishComposite). My only solution would be to change the fileDoc to a function which returns the reactive query and put it into a container like this:

createContainer((props) => {
return {
  userFile: props.userFile,
  fileDoc: props.userFile.fileDoc()
};
},FileList)

I’ve also to note that adding a lot of containers in react-native-meteor could lead to performance issues, because they don’t use the common Meteor Tracker/Minimongo packages.

10

Hi, visit this GitHub link to solve your iisue, its clearly explained: https://github.com/facebookarchive/react-meteor/issues/109

Regards,
Best ReactJS Online Training in India