Bind template to ReactiveVar array in Meteor - rest

Question

I have the following scenario:
I have the following template:
<ul>
{{#each persons}}
{{Name}}
{{/each}}
</ul>
where persons = ReactiveVar([]) in the template .js file.
and I'm updating the persons variable in the callback of a HTTP Rest API:
var instance = Template.instance();
API(url, (error, result) = instance.persons.set(result)) //result is an array
Nothing happens on the UI. How can I fix this? (I am willing to use simple array as well but the condition is to populate the array from an API callback).

Answer 1

Binding external APIs to a template can be solved with a classic Template instance' ReactiveVar / ReactiveDict (let's call them reactive source). Note, that you should not make these calls or updates to a reactive source in a helper but rather inside an event or inside onCreated.
Let's take your template:
<ul>
{{#each persons}}
{{Name}}
{{/each}}
</ul>
We then make the call inside the onCreated function:
Template.myTemplate.onCreated(function () {
const instance = this
instance.state = new ReactiveDict()
instance.state.set('persons', [])
// Template's internal tracker
instance.autorun(() => {
API(url, (error, result) => instance.state.set('persons', result)) //result is an array
})
})
And return the data only by the reactive source in the helper:
Template.myTemplate.helpers({
persons() {
return Template.instance().state.get('persons')
}
})
Now this brings another problem: The external API is usually not reactive, causing the autorun to not trigger again if the data in the external API has changed. If the source would be a Mongo collection, the Template's internal Tracker would automatically re-run and update your persons state.
If you want to get the external data only once, it is fine. However, in order to scan the external api for changes you have some different options:
Easy way: use a timer (setInterval):
let timerId
Template.myTemplate.onCreated(function () {
const instance = this
instance.state = new ReactiveDict()
instance.state.set('persons', [])
timerId = setInterval(() => {
API(url, (error, result) => instance.state.set('persons', result)) //result is an array
}, 5000) // scans each 5 seconds for updates
})
Template.myTemplate.onDestroyed(function () {
if (timerId) {
clearInterval(timerId)
timerId = null
}
})
Pros
simple to implement
fine grained tuning of timing for a fluent experience
Cons
setInterval is a sink
you have to clean it up to prevent memory leaks (in onDestroyed)
Hard way: Let the external API's service call you!
If you have the option to let the external service connect and call your app via ddp you can let the external service decide, when the data has changed and is ready to fire, so your current app can update automatically.
You need a method and a collection for this:
server and client:
export const ExternalData = new Mongo.Collection('externalData')
server:
import ExternalData from 'path/to/externalData'
Meteor.methods({
'myApp.updateExternalData'(args) {
// check permissions...
// check data integrity...
const {url} = args
const {data} = args
ExternalData.update({url}, {$set: data})
}
})
Meteor.publish({
'myApp.externalData'(url) {
return ExternalData.find({url})
}
})
Now on the client you just need to subscribe to the data and update the reactive var automatically:
client:
import ExternalData from 'path/to/externalData'
Template.myTemplate.onCreated(function () {
const instance = this
// subscribe to changes
instance.autorun(() => {
const subscription = this.subscribe('myApp.externalData', url)
if (subscription.ready()) {
console.log('myApp.externalData is ready')
}
})
})
Template.myTemplate.helpers({
persons() {
return ExternalData.find({})
}
})
External Service / APP:
// if the external app is a meteor app you are lucky and can go with:
// https://docs.meteor.com/api/connections.html#DDP-connect
// Otherwise you can use the npm package:
// https://www.npmjs.com/package/ddp
// For authentication you can use:
// https://github.com/reactioncommerce/meteor-ddp-login
// or
// https://www.npmjs.com/package/ddp-login
const connection = // create a ddp connection
function onDataChanged () {
const data = //... get data from the backend of your ext. servie
const url = //... and the url for which the data is relevant
// call the app to update the data:
connection.call('myApp.updateExternalData', {url, data})
}
Pros:
Template automatically updates when the collection updates
No timers = no sinks!
Requires no additional reactive variable
You can use the collection to make external data persistent, cache it or create a revision / history
You can plug / unplug the external services (better scaling, less dependencies)
Cons:
High learning curve (but it's worth the effort)
Works only if you have control over the external service
More code = more potential errors so more tests to write