Subscribing to Data

Before we can subscribe to a collection, the collection should exist, and it should be published to the client where we can subscribe to it.

The application below describes how we can subscribe to a collection.

Subscription checklist

The following checklist is adhered to when subscribing to data.

• Make sure the collection exists.
• Check that the collection is published to the server.
• Subscribe to the data inside a useTracker function so that the user interface can be refreshed when the data changes.

Make sure the collection exists

The collection is defined under the api folder, which isinside the imports folder. Remember that all our application codes must be inside the imports folder.

Check that the collection is published to the server

Inside the imports folder, there’s a server folder, and inside of that server folder, there’s a publication.js file with the following content:

import {Meteor} from "meteor/meteor";
import { TasksCollection } from "../api/tasks";

Meteor.publish("tasks.allTask", function(){
    return TasksCollection.find();
});

We import the TasksCollection from its file. Next, we publish our collection, which has the name of tasks.allTask. The publication function returns all the TasksCollection in the system as a cursor.

Subscribe to data inside a useTracker function

Note: Open the App.js file inside the ui folder, which is located inside the imports folder. Uncomment the code before running the application.

Variables that our functions depend on are placed inside the array so that they trigger a recomputation if there are any changes. Because we have nothing to depend on, the empty array is passed. We’ll explore this in depth later in the React section of the course.

In line 8, we subscribe to the data by calling Meteor.subscribe("tasks.allTask"). The name “tasks.allTask” is the name of the subscription. It is important that the names of publications are unique.

The function returns an object with a property called loading, which is the state of the subscription and the tasks data.

In line 14, we check if our subscription is ready by checking the loading variable, which has a value that’s retrieved from !handle.ready(). If handle.ready() returns true, adding ! in front negates it. It’ll then return false.

We display a loading message on line 15 if our subscription isn’t ready.

We map over the tasks and, then, return all tasks along with their state of completion as finished or not finished.