Get linked reactive collections on the client side

[wdda]

Hi! Thank you for developing Grapher!

I use Meteor + Grapher + VUE and the structure that is described on meteor-tuts.com I’m trying to get reactive linked data on the client side.

Now everything looks and works more openly for me, but I still can’t get the linked reactive data on the client side.

imports/db/groups/links.js

import Groups from './collection'
import Lists from '../lists/collection'

Groups.addLinks({
  'lists': {
    collection: Lists,
    inversedBy: 'group'
  }
})

imports/db/lists/links.js

import Groups from '../groups/collection'
import Lists from './collection'

Lists.addLinks({
  'group': {
    collection: Groups,
    field: 'groupId'
  }
})

imports/db/groups/queries/getGroupsWithLists.js

import Groups from '../collection'

export default Groups.createQuery('getGroupsWithLists', {
  name: 1,
  lists: {
    name: 1
  }
})

imports/db/groups/queries/getGroupsWithLists.expose.js

import { getGroupWithLists } from '/imports/db/queries'

getGroupWithLists.expose()

Test in VUE

<script>
import { Tracker } from 'meteor/tracker'
import getGroupsWithListsQuery from '../db/groups/queries/getGroupsWithLists.js'

export default {
  mounted () {
    const query = getGroupsWithListsQuery.clone()
    const subscriptionHandle = query.subscribe()

    Tracker.autorun(() => {
      if (subscriptionHandle.ready()) {
        console.log(query.fetch())
        //query.unsubscribe()
      }
    })
  },
}
</script>

Result (there are no lists, only groups)

0: {name: "test", _id: "osXpLpgDvqWfYkHag"}
1: {name: "test2", _id: "DXZGvheZJiXDdBYKK"}
2: {name: "test3", _id: "N2YrPRz7dWcWuCr4b"}

But if I declare a method (for an experiment) imports/api/methods.js

import getGroupsWithLists from '../db/groups/queries/getGroupsWithLists'

Meteor.methods({
  'groups.withLists'() {
    return getGroupsWithLists.clone().fetch()
  }
})

And I call new method on the client side

export default {
  mounted () {
    Meteor.call('groups.withLists', (err, result) => {
      console.log(result)
    })
  },
}

Result: groups with lists! But it is not reactive:(

0: {_id: "osXpLpgDvqWfYkHag", name: "test", lists: Array(1)}
1: {_id: "DXZGvheZJiXDdBYKK", name: "test2", lists: Array(2)}
2: {_id: "N2YrPRz7dWcWuCr4b", name: "test3", lists: Array(1)}

I've read the entire meteor forum on the Grapher topic, viewed all the issues here, but still can't solve this problem.

Should I publish / allow lists somewhere before adding them to query, or is addLinks enough? Please help me. What am I doing wrong?

[theodorDiaconu]

This is a common problem and many people opened tickets for this. The problem is you didn't add the linking info on the client. Add links should also run on the client-side.