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.
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.