Meteor.js Tracker.autorun / Tracker.depend on exported variable from server-side with set interval

Question

I'm trying to get my head around Meteor's Tracker.autorun and Tracker.dependancy features.

I'm trying to do something that seems simple in my mind but I'm struggling to execute.

I have a server-side function, that I register as a method:

let count = 0

setInterval(()=>{
    count ++
    return count
}, 1000)

export default count

Register as a method:

import count from './setIntervarl'

Meteor.methods({
    getData:function() {
      return count
    }
  });

And then call up on the client side:

import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
import { Tracker } from 'meteor/tracker'

import './main.html';

// Setup reactive variable
rv1 = new ReactiveVar(9)

Meteor.call('getData', function(error, results) {
  if(error){
          console.log("error:"+error);
      } else {
      rv1.set(results)
      }
});

// Display the output from reactiveVar
Template.someData.helpers({
  someData: function() {
    return rv1.get();
  }
})

Can someone please show me how to use Tracker.autorun or Tracker.dependancy so that my UI updates with interval that is set in my server-side function

I'm having really trouble getting this working.

Many thanks

Answer 1

There will be no reactivity out of the box here. Meteor methods are not reactive but just a wrapped ddp call to a server (rpc-) endpoint that returns something.

In order to gain reactive data from the server, you need to subscribe to a publication. If you want only this counter being published, you may create a collection with a single document and publish it.

imports/CountCollection.js (both)

export const CountCollection = new Mongo.Collection('myCounter')

server/counter.js (server)

import { CountCollection } from '../imports/CountCollection'


let counterDocId

Meteor.startup(() => {
  // optional: clear the collection on a new startup
  // this is up to your use case
  // CountCollection.remove({})

  // create a new counter document
  counterDocId = CountCollection.insert({ count: 0 })

  // use the Meteor.setInterval method in order to
  // keep the Meteor environment bound to the execution context
  // then update the counter doc each second
  Meteor.setInterval(function () {
    CountCollection.update(counterDocId, { $inc: { count: 1 } })
  }, 1000)
})

// Now we need a publication for the counter doc. 
// You can use the `limit` projection to restrict this to a single document:
Meteor.publish('counterDoc', function () {
  if (!counterDocId) this.ready()
  return CountCollection.find({ _id: counterDocId }, { limit: 1 })
})

Now you can subscribe to this publication and get reactive updates to the document:

client/someData.js (client)

import { CountCollection } from '../imports/CountCollection'


import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
import { Tracker } from 'meteor/tracker'

import './main.html';

// Setup reactive variable
const reactiveCounter = new ReactiveVar(0)
const counterSubscription = Meteor.subscribe('counterDoc')

Template.someData.onCreated(() => {
  const instance = this

  instance.autorun(() => {
    // counterSubscription.ready() will re-called
    // when the publication released a new cursor
    // which causes the autorun to re-run = reactivity
    if (counterSubscription.ready()) {
      // there is only 1 doc published, so no query require
      const counterDoc = CountCollection.findOne() 
      reactiveCounter.set(counterDoc && counterDoc.count)
    }
  })
})

// Display the output from reactiveVar
Template.someData.helpers({
  someData: function() {
    return reactiveCounter.get()
  }
})

Sidenote:

don't forget to get the paths and imports correct

Readings:

https://docs.mongodb.com/manual/reference/operator/update/inc/

https://docs.meteor.com/api/timers.html#Meteor-setInterval