Using @pnp/graph, how to get user information


I am working in a web part for sharepoint that should fetch data from users.
In a list I am rendering the users display name with help of UI fabric component DetailList.
I have created a onMouseOver event that pass the user id to a function when the user make a mouser over the name in the list.

The function gets called and recieve the user id. In side the function I call graph.users.getById(UserId) to fetch the user information, but there is one problem. I am not passing the UserId, I get undefined inside the function and since I don’t have any UserId I am getting all the users in the sharepoint tenant and theirs information.

This is how I am calling the function:

onRender: (item: IAllUser) => {
  return <span onMouseOver={(e) => this._hover(item.UserId)}>{item.Title}</span>;

This is the code for the function:

private _hover(UserId) {
    console.log(UserId); /* ===> Here is undefined */
    graph.users.getById(UserId).get().then(data => {
      console.log(data); /* ===> Here I get all user of the tenant  */
    }).catch((error) => {
      console.log('dataprovider graph error: ', error);

So if I make a resume: There are two problems:

  • The userId is not getting passed to the function
  • I am getting all the users because there is no userID to scope the search.

I think that if I can solve the first point the second will solve by itself.

Do you have any idea why I am getting undefined?

Best regards