Massaging Data in Meteor and React

February 27, 2016 0 Comments by

Ways to handle data interactions in your Meteor React application. These are a couple examples of how you may choose to architect your application.

CRUD Operations

Here are a couple ways you may choose to handle communication when creating, reading, updating, or deleting data from your database.

Stateful

When the component loads, define the data and push this down to your render method. Information is represented in React as this.state. When this data changes, use this.setState to update the values and trigger your view to render. The user needs a means to trigger an event, which will then update the data on your server. This is done by defining a function in Meteor.methods which is invoked from the UI via Meteor.call('myMethod', someData). This should make sense to everybody, nothing new here.

Reactive

When your component loads, it may or may not define the data. It defines a subscription handler to a collection of documents. This is passed down from parent to child components with this.props. To update the data on the server, we use this.setProps and a mixin in our component. This will trigger another render, and the data will be represented in your render method as this.data.

Dynamic

At some point the amount of data you're working with may become too large to maintain a full copy on the client and the server. In this case you need to make a small change in what you publish to your minimongo dataset. This higher-order function takes an argument to determine to define a query and constructs a new query. The returned value is published to all subscribers. With this technique we can build real-time applications.

// server
Meteor.publish('myAction', (query) => {  
  return myCollection.update(data, updated)
})

// client
Meteor.call('myAction', query)  

Tag cloud