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.
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.
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!
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:
But I’m sure if you post your actual code here our resident React gurus will spot the issue in no time
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.
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.
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.