Meteor.user().profile is undefined

[vojta]

Hello guys,

I’m trying to figure out how to display Meteor.user().profile data in my client the whole day and even though many google searches, I’m not able to access and display my user profile from the database.

I tried to allow it, publish, but it’s just not working at all. Which is strange because in the browser I’m able to get data when I write Meteor.user().profile even when I go deeper Meteor.user().profile.firstName. I’m also logged in.

I’m totally helpless.
Thank you for your help!

[vooteles]

Hey,

welcome to the forums.

The most likely cause of your issue is that you are trying to display the user’s data as soon as your components or template loads and at that point the client has not yet received the data from the server. I am assuming you are using a publication/subscription to access the data. If this is indeed the case, then how to solve this depends on what view layer (Blaze, React, Vue) you are using. So you might want to share that.

[vojta]

Hey,
thank you for your answer!
I’m using React. Would be the solution to use a delay for example setTimeout()?
I swear if you help me to solve this, I’m kissing your knees haha!

[vooteles]

Haha. React is the only one of these which I have not used. In general, setTimeout should work just as a test, but an actual solution would be to set up reactivity as such that React knows when the variable changes. The withTracker should probably be your friend here to allow for this:

React | Meteor Guide

But I’m sure if you post your actual code here our resident React gurus will spot the issue in no time

[pmogollon]

Can you share the code of the component you are using?

[copleykj]

You’ll want to use a withTracker HOC to facilitate reactivity. If you are using a subscription, you can use the ready state of the subscription to only render certain information once it’s been sent to the client. In the case where you are displaying information about the currently logged in user which is automatically published, you’ll need to guard against accessing null an undefined properties.

let SomeComponent = ({ currentUser, otherUsers}) => (
  <>
    {currentUser ? <UserProfile profileData={currentUser.profile} /> : <Loader />}
    {usersReady ? <UsersList users={otherUsers} /> : <Loader />}
  </>
);

let SomeComponentContainer = withTracker(() => {
  const usersReady = Meteor.subscribe('usersList').ready();
  const usersList = Meteor.users.find().fetch();
  const currentUser = Meteor.user();
  return {
    usersReady,
    usersList,
    currentUser,
  }
})(SomeComponent);

export default SomeComponentContainer;

[vojta]

So here is my code:

import React, { useState} from ‘react’
import { Meteor } from ‘meteor/meteor’;

Tracker.autorun(() => {

const userId = Meteor.userId()

// ProfileForm is a profile page where the user can update his account settings
// User can also see his saved settings
// All should be editable by the user - so I use Meteor.user().profile

const ProfileForm = () => {

const [userInfo, setUserInfo] = useState({
    // Shows user his saved data in form input - results in ( Meteor.user(...) is undefined )
    firstName: Meteor.user().profile.firstName,
    lastName: Meteor.user().profile.lastName
});

const updateUserInfo = e => {
    // Updates userInfo ( firstName & lastName )
    setUserInfo({
        ...userInfo,
        [e.target.name]: e.target.value
    })
    if (userInfo) {
        // Update user profile in database
        Meteor.users.update(userId, {
            $set: {
                "profile": userInfo
            }
        })
    }
    e.preventDefault()
}

const { firstName, lastName } = userInfo;

return(
    <form onSubmit={updateUserInfo}>
        <input
            value={firstName}
            onChange={e => updateUserInfo(e)}
            placeholder={userInfo.firstName}
            type="text"
            name="firstName"
            required
        />

        <input
            value={lastName}
            onChange={e => updateUserInfo(e)}
            placeholder={userInfo.lastName}
            type="text"
            name="lastName"
            required
        />

        <button type="submit">Submit</button>
    </form>
)

}

I also tried to use withTracker, but the documentation is quite confusing for me.

[vojta]

I finally solved it. I used withTracker as copleykj described and it started to work. The only problem is the loading time. It usualy takes about 3s to load the user profile information.

Do you have any idea how could I make it faster?

Anyways, really thank you guys!

[copleykj]

It usualy takes about 3s to load the user profile information.

This is very strange… do you have a repo I could clone and examine?

[vojta]

Actually, I solved it with restarting the server.
I guess it slows down with a few thousands reloads haha.