Collection find return nothing with Meteor 1.3 and ReactHighchart

react
1

hello, im new to Meteor 1.3 , i am trying to put my collection data to dataseries in ReactHighchart from https://github.com/kirjs/react-highcharts , but when i call Collection.find().fetch() function it’s return nothing. When i call Collection.find().fetch() with react-komposer it return the Data. Is it new way to call my data collection in Meteor 1.3?

here is my code,

import React from 'react';
var ReactHighcharts = require('react-highcharts');
var Highlight = require('react-highlight');
var ReactDOM = require('react-dom');
var Highcharts = require('highcharts');

export default class Test extends React.Component {

  componentDidMount() {
  	const handle = Meteor.subscribe("data");
  	console.log(handle);
  	if (handle.ready()) {
  		const dataseries = Data.find().fetch();
  		console.log(dataseries);
  		let chart = this.refs.chart.getChart();
  	}

  }

  render() {
    return (
    	<ReactHighcharts config={config} ref="chart"></ReactHighcharts>
    	);
  }
}
2

A few questions:

  • Where are you defining your Data collection?
  • What does your console.log(handle); show? Have you verified that handle.ready() returns true at some point?
  • Have you verified your publication is setup and being initialized properly (via Meteor.publish - I’m assuming you aren’t using autopublish)?
3

yes, when i’m log the handle it shows the subscription ID, when i write the Data.find().fetch() in javascript console in Chrome i was able to see the return Data, but not when i write the Data.find().fetch() in my JS file. I assume the subscribe and publish is work because when i use it with react-komposer it returns the Data.

4

Okay - you should look into changing your test component around a bit then, since componentDidMount is invoked only once and is not reactive. So you’ll never get past your handle.ready() check. If you just want to test things out you could wrap your componentDidMount contents in a Tracker.autorun:

componentDidMount() {
  Tracker.autorun(() => {
    ...
  });
}
5

Check out the meteor guide: http://guide.meteor.com/react.html#data

This is the recommended way of combining reactive data sources from meteor with react

6

That’s definitely the recommended way, but for a quick test there’s nothing wrong with leveraging Tracker.autorun inside (some of) React’s lifecycle methods. Actually, that’s what the react-meteor-data package ultimately does.

7

thanks, it works. So, the Collection.find() function will work on Tracker function right?

8

thanks, i have try that :grinning: