CODEWITHSUNDEEP
mongodbreactjsmeteor
Uj Corb
Uj Corb

Reputation: 2189

Fetching all users from mongo returns empty object React Meteor

I want to create a table to display all my users. I use the account-ui package of Meteor to create new users.

However, It simply returns an empty object when I call my users in my React component. Is there something I forgot ? like an import maybe ?

imports/api/users.js is used to Publish: 

import { Meteor } from 'meteor/meteor';

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

then I call my component and make use of withTracker in which I subscribe:

import React from 'react';
import { Mongo } from 'meteor/mongo'
import { withTracker } from 'meteor/react-meteor-data';

class CollectionTable extends React.Component {

  render() {

    return (
      <table className="table table-hover table-responsive">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
          </tr>
        </thead>
        <tbody>
          {this.props.users.map(u => {
          <tr>
            <th scope="row">{u._id}</th>
            <td>{u.profile.firstname}</td>
            <td>{u.profile.lastname}</td>
            <td>{u.profile.phonenumber}</td>
          </tr>
          })}
        </tbody>
      </table>
    );
  }
}

export default withTracker(() => {
  Meteor.subscribe('users');
  return {
    users: Meteor.users.find().fetch()
  };
})(CollectionTable);

Upvotes: 1

Views: 329

Answers (3)

Kieran McWilliams
Kieran McWilliams

Reputation: 101

An easier way to do it that should work is to have a callback function on the subscribe call, which will wait for it to come back with data before continuing, allowing the users to be loaded.

var users = Meteor.subscribe('users', function() {
  return {
    users: Meteor.users.find().fetch()
  };
});

And inside your withTracker (haven't tested but should work):

export default withTracker(() => {
  return Meteor.subscribe('users', function() {
    return {
      users: Meteor.users.find().fetch()
    };
  });
})(CollectionTable);

Read more: https://docs.meteor.com/api/pubsub.html#Meteor-subscribe

Upvotes: 0

KARNAV PARGI
KARNAV PARGI

Reputation: 653

I think this occurs because it's not waiting for getting data.

Try this:

import { Meteor } from 'meteor/meteor';
if (Meteor.isServer) {
    Meteor.publish('users',async function() {
        return await Meteor.users.find({});
    })
}

Upvotes: 1

Uj Corb
Uj Corb

Reputation: 2189

OK so I don't know why this now works but I solved it doing this: 

import React from 'react';
import { Mongo } from 'meteor/mongo'
import { withTracker } from 'meteor/react-meteor-data';

export class CollectionTable extends React.Component {

componentWillReceiveProps(newProps) {
  console.log(newProps); // i get the right data!
  console.log(this.props); // empty array >_<
}

  renderUsers() {
      return this.props.users.map(u => (
          <tr key={u._id}>
            <th scope="row">{u._id}</th>
            <td>{u.profile.firstname}</td>
            <td>{u.profile.lastname}</td>
            <td>{u.profile.phonenumber}</td>
          </tr>
          ));
  }
  render() {

    return (
      <table className="table table-hover table-responsive">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
          </tr>
        </thead>
        <tbody>
          {this.renderUsers()}
        </tbody>
      </table>
    );
  }
}

export default withTracker(() => {
  const sub = Meteor.subscribe('users');
  if (sub.ready()) {
    console.log(Meteor.users.find().fetch());
    return {
      users: Meteor.users.find().fetch()
    };
  }
  return { users: [] };
})(CollectionTable);

I left my console.log for debugging purposes if ever someone can explain why this.propsgives an empty array, because it is still a mystery for me.

It works perfectly though !

Upvotes: 0

Related Questions