Meteor Subscribe with useTracker()

Sample code that uses useTracker in order to subscribe and read the pointers of a published colletion on Meteor.

Meteor React

Check out the Meteor React tutorial.

Publishing the collection

Meteor.publish('users', function() {
    return Users.find();
});

In order to access a collection on the client side, you need to publish it on the server side. This is done by adding a publication to the server/main.js file. In this case, we are publishing the Users collection.

Reading the collection

import React from 'react';
import { useTracker } from 'meteor/react-meteor-data';

export const UsersComponent = () => {
  const { users, isLoading } = useTracker(() => {
    const noDataAvailable = { users: [] };

    const handler = Meteor.subscribe('users');

    if (!handler.ready()) {
      return { ...noDataAvailable, isLoading: true };
    }

    const users = Users.find().fetch();

    return { users };
  });

  return (
    <div>
      {isLoading ? (
        <p>Loading...</p>
      ) : (
        <ul>
          {users.map((user, index) => (
            <li key={user._id}>{user.name}</li>
          ))}
        </ul>
      )}
    </div>
  );
};