React Meteor Data
Fetch Meteor data in React using decorators
Medium Post
- Using decorators to fetch Meteor data in React
- Using Meteor methods on React components to fetch data
Installing
Install the package
meteor add orionsoft:react-meteor-data
Install the babel decorator
npm install --save-dev babel-plugin-transform-decorators-legacy
Create or update the .babelrc file in the root of your app
{
"plugins": [
"babel-plugin-transform-decorators-legacy"
]
}### Example with publication
import React from 'react'
import {Meteor} from 'meteor/meteor'
import {withData} from 'meteor/orionsoft:react-meteor-data'
import MyCollection from './my-collection'
/**
* Prop will be checked also in the container
*/
const propTypes = {
itemId: React.PropTypes.string.isRequired,
isLoading: React.PropTypes.bool,
item: React.PropTypes.string
}
@withData(({itemId}) => {
const handler = Meteor.subscribe('myPublication', itemId)
const isLoading = !handler.ready()
const item = MyCollection.findOne(itemId)
return {isLoading, item}
})
export default class Component extends React.Component {
render () {
if (this.props.isLoading) return <span/>
return (
<div>
{this.props.item.name}
</div>
)
}
}
Component.propTypes = propTypes### Example with method
import React from 'react'
import {Meteor} from 'meteor/meteor'
import {withMethodData} from 'meteor/orionsoft:react-meteor-data'
/**
* Prop will be checked also in the container
*/
const propTypes = {
itemId: React.PropTypes.string.isRequired,
isLoading: React.PropTypes.bool,
item: React.PropTypes.string
}
@withMethodData(({itemId}, ready) => {
Meteor.call('getItem', itemId, ready)
})
export default class Component extends React.Component {
render () {
if (this.props.isLoading) return <span/>
return (
<div>
{this.props.item.name}
</div>
)
}
}
Component.propTypes = propTypes
// On the server
Meteor.methods({
'getItem': function (itemId) {
const item = Items.findOne(itemId)
return {item} // objects returned in the method will be passed as props
}
})