Meteor Reactive Grapher

Hi,

I apologise in advance if I have missed something obvious here but I’m struggling to get Meteor Grapher to be reactive.

I have made these links:

SectionCollection.addLinks({
  menu: {
    type: 'one',
    field: 'menuId',
    collection: MenuCollection
  }
});

MenuCollection.addLinks({
  sections: {
    collection: SectionCollection,
    inversedBy: 'menu'
  }
});

This is my React component:

export const MenuList = () => {
  const [menuData, setMenuData] = useState([]);

  // Wait for subscriptions data
  const isLoading = useTracker(() => {
    const sub = Meteor.subscribe('menus');

    Meteor.call('menus.grapher', (err, res) => {
      if(err) console.log(err);
      console.log(res);
      setMenuData(res);
    });

    return !sub.ready();
  }, []);

  return (
    <>
      {isLoading ? 'Loading...' : (
        menuData.map(menu => {
          return <li key={menu._id}>{menu.name}</li>
        })
      )}
    </>
  );
};

My publication:

Meteor.publish('menus', function publishMenus() {
  return MenuCollection.find({ userId: this.userId });
});

My Method:

"menus.grapher": function() {
    let menus = MenuCollection.createQuery({
        name: 1,
        sections: {
          name: 1
        }
    });

    return menus.fetch();
  }

I feel like I’m doing something wrong the way I have subscribed and am then using Meteor.call(…). However, I can’t figure out what it is. I have tried various different things and nothing has worked.

I tried to install grapher-react as I thought that would be easier to use but I got this error:

Potentially incompatible change required to top-level dependency: react-meteor-data 0.2.16, was 2.1.2”.

Changing my version of react-meteor-data to 0.2.16 from 2.1.2 does not seem sensible?

I have tried to include the Method code within a publication but I receive an error that states:

Error: Publish function can only return a Cursor or an array of Cursors

This is the 'Method code within publication":

Meteor.publish('menusGrapher', function publishMenusGrapher() {
  let menus = MenuCollection.createQuery({
    name: 1,
    sections: {
      name: 1
    }
  });

  return menus.fetch();
});

My current code works in the sense that there are no errors and it prints my list of menu’s, but I can’t seem to get to be reactive.

Using grapher seems to be the best way of handling related collections (rather than nesting collections) so I would like to stick with it.

Any advice would be really appreciated. If you need anymore of the code, I can provide it.

Tha easiest way is to use grapher-react, im using it and dont see that warning, but that should not be a problem. Just try it with it and check if you are able to get it working.

You wont get reactive “joins” the way you are doing it, methods are not reactive, and you will need to subscribe to the publication generated by an exposed query to get the reactive data.

Did you implement Exposure / Firewall in Grapher to get your data to the client reactively?
Just check the repo for publication: true to see the contexts in which you can publish your data and subscribe from the client.

@pmogollon I have tried to use it but it does not work. The only way to install it via meteor is to allow Meteor to downgrade react-meteor-data to 0.2.15/16. I tried to follow the instructionx here but had no luck.

@paulishca I have attempted the implement the Exposure / Firewall but I had errors - notably " ‘exposure_menus’ is already defined. " Where do I call the exposure function? Within a Meteor.publish(…) function? Or external to it? Do you have an example project I could follow from?