Express JS Dynamic app.local / res.local变量

Question

I'm trying to load some variables into the view render site wide to build dynamic menus. I've got a neo4j database on the back end that keeps all the menu structures and I'm accessing it via APOC (ignore the hackish Cypher queries I'm structuring data in cypher I probably should be doing in .

My first solution was just to assign the a function to app.locals and call it in the view a la:

//app.js
app.locals.catMenuQuery = function(){
  var query = apoc.query(
    'MATCH (c:Category)-[o:CHILD_OF]->(m:Menu {url: "cat-menu"}) \
      OPTIONAL MATCH (c2:Category)-[o2:CHILD_OF]->(c) \
      WITH c, c2, o, o2 \
      ORDER BY o2.order, c2.name \
      WITH \
        { \
          name: c.name, \
          url: c.url, \
          children: collect(c2),\
          order: o.order \
        } AS rows \
      ORDER BY rows.order \
      RETURN collect(rows)'
  );
  query.exec().then(function (qres) {
    var data = qres[0]['data'][0]['row'][0];
    return data;
  }, function (fail) {
    console.log(fail)
  });
}

//view.pug
ul#cat-menu.in
  each cat in catMenuQuery()
    li(class= cat.url)
      h1= cat.name
      ul
        each child in cat.children
          li= child.name

Which did nothing obviously because I'm returning data from the async query.exec().then() chain. I couldn't figure out how to handle calling async from a view. I figured functions stored in app.locals had to be syncronous which APOC isn't friendly too and isn't ideal for data queries anyhow. And so I wound up with the following which works but isn't ideal:

//app.js
app.use(function(req,res,next){
  var query = apoc.query(
    'MATCH (c:Category)-[o:CHILD_OF]->(m:Menu {url: "cat-menu"}) \
      OPTIONAL MATCH (c2:Category)-[o2:CHILD_OF]->(c) \
      WITH c, c2, o, o2 \
      ORDER BY o2.order, c2.name \
      WITH \
        { \
          name: c.name, \
          url: c.url, \
          children: collect(c2),\
          order: o.order \
        } AS rows \
      ORDER BY rows.order \
      RETURN collect(rows)'
  );
  //console.log(query.statements);
  query.exec().then(function (qres) {
    var data = qres[0]['data'][0]['row'][0];
    console.log(util.inspect(data,false,null));
    res.locals.catMenuQuery = data;
    next();
  }, function (fail) {
    //console.log(fail)
    next();
  });
})

//view.pug
ul#cat-menu.in
  each cat in catMenuQuery
    li(class= cat.url)
      h1= cat.name
      ul
        each child in cat.children
          li= child.name

This is going to call every query for every menu on every page, regardless of whether that menu is on the page or not. So my question is this:

Is there a way I can get the first version where I call the function inside the view working, or is there another elegant solution that will make sure only the functions that are needed by the views being rendered will be called?

At the end of the day overhead doesn't matter a great deal because it's just for an in-house prototype job. But I'm sure there's an elegant solution out there, and it would be great if I could restructure it to call a function like getMenu('cat-menu') from the views to save having a bunch of functions sitting in app.locals .

I'm sure there's a simple elegant solution somewhere, but I'm back in node async land for the first time in a while and I'm stumped.

Answer 1

I wound up learning to use React and the Flux Architecture. It's more or less built for what I was trying to accomplish where Express vanilla renderer isn't well equipped for it.