How To Update React Screen With Db Changes

Using MongoDB as a realtime database with change streams

Using MongoDB as a realtime database with change streams, you're going to learn how to stream, in realtime, the changes made to a drove in a MongoDB database to a React app using a Node.js server. Change streams are available since MongoDB 3.6 and they work by reading the oplog, a capped collection where all the changes to the information are written and functions as the database replication log. Y'all'll demand to take noesis of:JavaScript (intermediate level), in detail, Node.JS and React and React.

This article was originally published on Pusher'southward blog .

Pusher, our weekly sponsor, makes communication and collaboration APIs that power apps all over the earth, supported by easy to integrate SDKs for web, mobile, every bit well as most pop backend stacks. Get started.

Getting information changes from a database in realtime is not equally easy as y'all may call back.

In a previous tutorial, I mentioned there are iii main approaches to do this:

Poll the database every X seconds and decide if something has changed using a timestamp, version number or status field.
Use database or application-level triggers to execute a slice of code when something changes.
Utilise the database transaction/replication log, which records every change to the database.

However, in MongoDB, change streams allows yous to listen for changes in collections without any complication.

Change streams are bachelor since MongoDB 3.6 and they work by reading the oplog, a capped collection where all the changes to the data are written and functions as the database replication log.

In this tutorial, you lot're going to acquire how to stream, in realtime, the changes made to a collection in a MongoDB database to a React app using a Node.js server.

The application that you'll be building allows y'all to add together and delete tasks. It looks like this:

Under the hood, it communicates to an API implemented in Node.js that saves the changes to a database. The Node.js script also receives these changes using alter streams, parsing them and publishing them to a Pusher channel and so the React application can consume them.

Here'southward the diagram that describes the higher up procedure:

Of course, a scenario where multiple applications are writing to the same database could be more realistic, but for learning purposes, I'll use a unproblematic awarding.

In improver, you'll run into how a solution similar this one, could be a adept culling to the realtime database capabilities of Firebase.

Prerequisites

Here's what yous demand to take installed to follow this tutorial:

MongoDB (version 3.half-dozen or superior)
Node.js (six or superior)
Optionally, a JavaScript editor.

You'll need to take cognition of:

JavaScript (intermediate level), in particular, Node.js and React.
Basic MongoDB management tasks

For reference, here is a GitHub repository with all the code shown in this tutorial and instructions to run information technology.

Now let's start by creating a Pusher awarding.

Creating a Pusher application

If yous haven't already, create a gratuitous account at Pusher.

So, go to your dashboard and create a Channels app, choosing a name, the cluster closest to your location, and optionally, React as the frontend tech and Node.js as the backend tech:

This volition give y'all some sample lawmaking to become started:

Save your app id, fundamental, secret and cluster values. Nosotros'll need them later.

Configuring MongoDB

Since change streams use MongoDB's operations log, and the oplog is used to support the replication features of this database, you can just utilize modify streams with replica sets or sharded clusters.

Information technology's easier to use replica sets, so let's become that way.

A replica set is a group of mongod processes that maintain the same data set. All the same, you tin can create a replica set with merely ane server, just execute this command:

Remember that if you practice non use the default information directory (/information/db or c:\information\db), specify the path to the data directory using the --dbpath option:

                mongod --dbpath <DATA_PATH> --replSet "rs"

Next, in a separate last window, run mongo, the MongoDB client.

If this is the first fourth dimension you create a replica set, execute rs.initiate():

                [electronic mail protected]:~/Documents/mongodb-linux-x86_64-3.vi.4$ bin/mongo
MongoDB beat out version v3.6.4
connecting to: mongodb://127.0.0.1:27017
MongoDB server version: 3.6.4
...
> rs.initiate()
{
                  "info2" : "no configuration specified. Using a default configuration for the set",
                  "me" : "localhost:27017",
                  "ok" : 1,
                  "operationTime" : Timestamp(1527258648, 1),
                  "$clusterTime" : {
                  "clusterTime" : Timestamp(1527258648, i),
                  "signature" : {
                  "hash" : BinData(0,"AAAAAAAAAAAAAAAAAAAAAAAAAAA="),
                  "keyId" : NumberLong(0)
                  }
                  }
}
rs:OTHER>

The application is going to watch the collection tasks in a database chosen tasksDb.

Usually, the database and the collection are created by the MongoDB driver when the application performs the first operation upon them, but for change streams, they must be before opening the stream.

So while you are at mongo , create the database and the drove with the commands use and db.createCollection, like this:

                rs:OTHER> utilise tasksDb
switched to db tasksDb
rs:OTHER> db.createCollection('tasks')
{
                  "ok" : 1,
                  "operationTime" : Timestamp(1527266976, one),
                  "$clusterTime" : {
                  "clusterTime" : Timestamp(1527266976, 1),
                  "signature" : {
                  "hash" : BinData(0,"AAAAAAAAAAAAAAAAAAAAAAAAAAA="),
                  "keyId" : NumberLong(0)
                  }
                  }
}
rs:OTHER>

At present you're ready to outset building the application.

Let'due south start with the Node.js server.

Building the Node.js server

Create a new directory and in a terminal window, within that directory, initialize a Node.js project with the command:

Side by side, install the dependencies the application is going to use with:

                npm install --save trunk-parser express mongoose pusher

body-parser is a middleware for parsing the body of the request.
express to create the web server for the Balance API that the React app is going to use.
mongoose is a schema-based library for working with MongoDB.
pusher to publish the database changes in realtime.

Now the first affair we're going to practise is create a schema for the chore collection. Create the file models/task.jsand copy the post-obit code:

                const mongoose = require('mongoose');                  
const Schema   = mongoose.Schema;const taskSchema = new Schema({                    
                    task: { blazon: String },
});
                  module.exports = mongoose.model('Task', taskSchema);

Every bit you tin run into, the drove is only going to store the task as text.

Next, create the file routes/api.js and crave the task schema and Limited to create a router:

                const Job  = require('../models/job');
const express = crave('limited');
const router = express.Router();

Create a POST endpoint with the /new path to save task:

                router.post('/new', (req, res) => {
                  Task.create({
                  task: req.body.task,
                  }, (err, task) => {
                  if (err) {
                  console.log('CREATE Fault: ' + err);
                  res.status(500).transport('Fault');
                  } else {
                  res.status(200).json(task);
                  }
                  });
});

And another ane to delete tasks, passing the ID of the job using a DELETE method:

                router.route('/:id')
                  /* DELETE */                  
                  .delete((req, res) => {
                  Task.findById(req.params.id, (err, job) => {
                  if (err) {                  
                  console.log('DELETE Mistake: ' + err);
                  res.condition(500).send('Fault');
                  } else if (job) {
                  task.remove( () => {
                  res.status(200).json(task);
                  });
                  } else {
                  res.status(404).ship('Not constitute');
                  }
                  });
                  });module.exports = router;

Now, in the root directory, create the file server.js and require the following modules:

                const limited = require('express');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');
const api = crave('./routes/api');
const Pusher = require('pusher');

Configure the Pusher object entering your app data:

                const pusher = new Pusher({
                  appId      : '<INSERT_APP_ID>',
                  cardinal        : '<INSERT_APP_KEY>',
                  secret     : '<INSERT_APP_SECRET>',
                  cluster    : '<INSERT_APP_CLUSTER>',
                  encrypted  : true,
});
const channel = 'tasks';

And configure an Express server with CORS headers (considering the React app is going to be published in a dissimilar port), JSON requests, and /api as the path:

                const app = express();app.use((req, res, next) => {
                    res.header("Access-Control-Allow-Origin", "*");
                    res.header("Access-Control-Let-Headers", "Origin, 10-Requested-With, Content-Type, Accept");
                    res.header("Access-Control-Permit-Methods", "Become, POST, PUT, DELETE, OPTIONS");
                    adjacent();
});
                  app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: truthful }));
app.employ('/api', api);

This manner, you lot can connect to the database passing the name of the replica gear up you configured before:

                mongoose.connect('mongodb://localhost/tasksDb?replicaSet=rs');

And set up two callbacks, one for connections errors and some other i if the connection is successful:

                const db = mongoose.connexion;db.on('error', console.error.demark(panel, 'Connection Mistake:'));
                  db.once('open', () => {
                  });

If the connection is successful, permit's start listening for connections on port 9000 and watch for changes on the tasks drove:

                db.once('open', () => {
                  app.listen(9000, () => {
                  console.log('Node server running on port 9000');
                  });                    const taskCollection = db.collection('tasks');
                    const changeStream = taskCollection.watch();
                                      changeStream.on('change', (change) => {
                                      });
});

Hither comes the interesting part.

When at that place'south a change in the drove, a alter outcome is received. In detail, the following changes are supported:

Insert
Update
Supercede
Delete
Invalidate

Here's an instance of an insert upshot:

                {
                  _id:                  
                  {
                  _data: Binary {
                  _bsontype: 'Binary',
                  sub_type: 0,
                  position: 49,
                  buffer: <Buffer 82 5b 08 8a 2a 00 00 00 01 46 64 5f 69 64 00 64 5b 08 8a 2a 99 a1 c5 0d 65 f4 c4 4f 00 5a ten 04 13 79 9a 22 35 5b 45 76 ba 45 6a f0 69 81 lx af 04>                  
                  }
                  },
                  operationType: 'insert',
                  fullDocument: {                  
                  _id: 5b088a2a99a1c50d65f4c44f,                  
                  task: 'my task',                  
                  __v: 0
                  },
                  ns: { db: 'tasksDb', coll: 'tasks' },
                  documentKey: { _id: 5b088a2a99a1c50d65f4c44f }                  
}

You can use the _id property to resume a alter stream, in other words, to start receiving events from the operation represented by that property.

Hither's an example of a delete event:

                {                  
                  _id:                  
                  {                  
                  _data: Binary {
                  _bsontype: 'Binary',
                  sub_type: 0,
                  position: 49,
                  buffer: <Buffer 82 5b 08 8b f6 00 00 00 01 46 64 5f 69 64 00 64 5b 08 8a 2a 99 a1 c5 0d 65 f4 c4 4f 00 5a 10 04 13 79 9a 22 35 5b 45 76 ba 45 6a f0 69 81 60 af 04>                  
                  }
                  },
                  operationType: 'delete',
                  ns: { db: 'tasksDb', coll: 'tasks' },
                  documentKey: { _id: 5b088a2a99a1c50d65f4c44f }
}

Find that in this instance, the deleted object is not returned, just its ID in the documentKey property.

You can learn more about these alter events here.

With this data, back to server.js, yous tin extract the relevant data from the object and publish it to Pusher in the following way:

                changeStream.on('alter', (change) => {
                  console.log(change);

                                  if(change.operationType === 'insert') {
                  const job = change.fullDocument;
                  pusher.trigger(
                  channel,
                  'inserted',                  
                  {
                  id: chore._id,
                  task: task.task,
                  }
                  );                  
                  } else if(change.operationType === 'delete') {
                  pusher.trigger(
                  channel,
                  'deleted',                  
                  change.documentKey._id
                  );
                  }
});

And that's the lawmaking for the server. At present let'south build the React app.

Building the React app

Let's apply create-react-app to bootstrap a React app.

In another directory, execute the following command in a final window to create a new app:

                npx create-react-app my-app

Now go into the app directory and install all the Pusher dependency with npm:

                cd my-app
npm install --save pusher-js

Open the file src/App.css and replace its content with the post-obit CSS styles:

                *{
                  box-sizing: border-box;
}

                body {
                  font-size: 15px;
                  font-family: 'Open Sans', sans-serif;
                  colour: #444;
                  background-color: #300d4f;
                  padding: 50px 20px;
                  margin: 0;
                  min-superlative: 100vh;
                  position: relative;
}

                .todo-wrapper {
                  width: 400px;
                  max-width: 100%;
                  min-superlative: 500px;
                  margin: 20px auto 40px;
                  border: 1px solid #eee;
                  border-radius: 4px;
                  padding: 40px 20px;
                  -webkit-box-shadow: 0 0 15px 0 rgba(0,0,0,0.05);
                  box-shadow: 0 0 15px 0 rgba(0,0,0,0.05);
                  background-colour: #e9edf6;
                  overflow: hidden;
                  position: relative;
}

                form {
                  overflow: overlay;
}

                .btn, input {
                  line-elevation: 2em;
                  border-radius: 3px;
                  border: 0;
                  display: inline-block;
                  margin: 15px 0;
                  padding: 0.2em 1em;
                  font-size: 1em;
}

                input[type='text'] {
                  border: 1px solid #ddd;                  
                  min-width: eighty%;
}

                input:focus {
                  outline: none;
                  border: 1px solid #a3b1ff;
}

                .btn {
                  text-marshal: center;
                  font-weight: bold;                  
                  cursor: pointer;
                  border-width: 1px;
                  border-manner: solid;
}

                .btn-add {
                  background: #00de72;
                  color: #fefefe;
                  min-width: 17%;
                  font-size: two.2em;
                  line-superlative: 0.5em;
                  padding: 0.3em 0.3em;
                  float: right;
}

                ul {
                  listing-fashion: none;
                  padding: 0;
}

                li {
                  brandish: flex;
                  justify-content: space-between;
                  align-items: center;
                  margin-bottom: 5px;
                  background-color: #dee2eb;
}

                .delete {
                  padding: 0.3em 0.7em;
                  min-width: 17%;
                  background: #f56468;
                  colour: white;
                  font-weight: bold;
                  cursor: pointer;
                  font-size: ii.2em;
                  line-height: 0.5em;
}

Next, open the file src/App.js and at the top, import the Pusher library:

                import Pusher from 'pusher-js';

Define a abiding for the API URL:

                const API_URL = 'http://localhost:9000/api/';

In the constructor of the class, define an assortment for the tasks and a property for the text of a task equally the state, and bind the methods to update the text and add and delete tasks:

                class App extends Component {
                  constructor(props) {
                  super(props);
                  this.state = {
                  tasks: [],
                  task: ''
                  };
                  this.updateText = this.updateText.demark(this);
                  this.postTask = this.postTask.bind(this);
                  this.deleteTask = this.deleteTask.bind(this);
                  this.addTask = this.addTask.bind(this);
                  this.removeTask = this.removeTask.bind(this);
                  }
                  ...
}

Allow's review each method. Add them after the constructor, before the render() method.

The updateText method will update the state every time the input text for the task changes:

                updateText(e) {
                  this.setState({ task: e.target.value });
}

The postTask method volition post to task entered by the user to the API:

                postTask(e) {
                  eastward.preventDefault();
                  if (!this.state.task.length) {
                  return;
                  }
                  const newTask = {
                  task: this.country.task
                  };
                  fetch(API_URL + 'new', {
                  method: 'post',
                  headers: {
                  'Content-Type': 'awarding/json'
                  },
                  body: JSON.stringify(newTask)
                  }).then(console.log);
}

And the method deleteTask will call the API to delete a task using its ID:

                deleteTask(id) {
                  fetch(API_URL + id, {
                  method: 'delete'
                  }).then(console.log);
}

On the other hand, you lot'll also need methods to add and delete a task from the state so the changes tin be reflected in the UI. That'due south the job of the methods addTask and removeTask:

                addTask(newTask) {
                  this.setState(prevState => ({
                  tasks: prevState.tasks.concat(newTask),
                  chore: ''
                  }));
}

                removeTask(id) {
                  this.setState(prevState => ({
                  tasks: prevState.tasks.filter(el => el.id !== id)
                  }));
}

The app will call these methods when the corresponding issue from Pusher is received.

You can ready up Pusher and bind these methods to the inserted and deleted events in the method componentDidMount, inbound your Pusher app key and cluster:

                componentDidMount() {
                  this.pusher = new Pusher('<INSERT_APP_KEY>', {
                  cluster: '<INSERT_APP_CLUSTER>',
                  encrypted: true,
                  });
                  this.aqueduct = this.pusher.subscribe('tasks');

                                  this.channel.bind('inserted', this.addTask);
                  this.channel.bind('deleted', this.removeTask);
}

This way, the render method but renders the tasks from the state using a Job component and a class to enter new tasks.

Supervene upon the render() method with the following:

                render() {
                  let tasks = this.country.tasks.map(item =>
                  <Chore key={item.id} chore={item} onTaskClick={this.deleteTask} />
                  );

                                  return (
                  <div className="todo-wrapper">
                  <class>
                  <input type="text" className="input-todo" placeholder="New task" onChange={this.updateText} value={this.state.chore} />
                  <div className="btn btn-add" onClick={this.postTask}>+</div>
                  </form>

And the code of the Task component (which you can place after the App class):

                class Task extends Component {
                  constructor(props) {
                  super(props);
                  this._onClick = this._onClick.demark(this);
                  }
                  _onClick() {
                  this.props.onTaskClick(this.props.chore.id);
                  }
                  return() {
                  return (
                  <li key={this.props.task.id}>
                  <div className="text">{this.props.chore.chore}</div>
                  <div className="delete" onClick={this._onClick}>-</div>
                  </li>
                  );
                  }
}

And that's it. Allow's test the complete awarding.

Testing the application

Make sure the MongoDB database is running with the replica gear up configured on the server:

                mongod --dbpath <DATA_PATH> --replSet "rs"

In a terminal window, go to the directory where the Node.js server resides and execute:

For the React app, inside the app directory, execute:

A browser window will open http://localhost:3000/, and from there, y'all can starting time inbound and deleting tasks:

Yous can likewise run into in the output of the Node.js server how alter events are received from MongoDB:

Or on Pusher's dashboard, select your app, and in the Debug department, you'll see how the letters are received:

Conclusion

In this tutorial, you have learned how to persist data in MongoDB and propagate the changes in realtime using change streams and Pusher channels

This is equivalent to the functionality provided past Firebase and its realtime database. The advantage is that a solution similar the one presented in this tutorial is more flexible and gives you more control.

From here, the application tin be extended in many ways, for example:

Support for more collections
Implement an update functionality for the tasks (for example, the condition) and replicate this event.
Use the resume token to receiving the events from the terminal ane registered, after a connectedness failure.

Call up that in this GitHub repository yous can find the code of the Node.js server and the React app.

For more information nigh change streams, here are some practiced resources:

Using Change Streams to Keep Up with Your Data
An Introduction to Change Streams
MongoDB 3.6 change streams case with Node.js
MongoDB Information Change
MongoDB manual: Change Streams

Pusher, our weekly sponsor, makes communication and collaboration APIs that power apps all over the world, supported by like shooting fish in a barrel to integrate SDKs for web, mobile, as well equally most popular backend stacks. Get started.