Search code examples
reactjsmeteormeteor-react

"Chaining" Meteor subscriptions


I'm using React and createContainer. I'm looking for a way which I can chain together two calls.

For example, if I had this data:

// Category
{
   _id: 'ABC',
   name: 'Cat 1'
}

// Item
{
   catId: 'ABC',
   slug: 'slug'
}

In my createContainer, I want to get the Item by it's slug (Items.find({ slug })). I then want to turn around and get the category by the item.catId.

I tried something like this, but it didn't work:

 createContainer(({ slug }) => {
     const itemHandler = Meteor.subscribe('Item.bySlug', slug);
     const item = Items.findOne();

     const categoryHandler = Meteor.subscribe('Category.byId', (item.id || {}).id); // also tried just item.id and got undefined for item
     const category = Categories.findOne();

     return { item, category };
 }, Component);

I can get item just fine, but no dice on category, it remains undefined. I'm sure I'm not triggering something reactively, but I'm not quite sure what the correct pattern would be in this case, or if there is a more streamline way.


Solution

  • It turns out, the code I posted does work, I just had a data issue where Items.categoryId wasn't being populated properly.

    In this particular instance, I did want to do a client-side join, and what I did does work. The item bit is react, and once it loads, it'll actually rerun and then properly populate that field.

    createContainer(({ slug }) => {
         const itemHandler = Meteor.subscribe('Item.bySlug', slug);
         const item = Items.findOne();
    
         const categoryHandler = Meteor.subscribe('Category.byId', (item.id || {}).id); // also tried just item.id and got undefined for item
         const category = Categories.findOne();
    
         return { item, category };
     }, Component);
    

    The first run through, item will be defined and category will be null. The next go through (as soon as item is ready) will then populate category. Takes two hops, but works just fine.