Hello SharePointers,

You can consume Microsoft graph API in sharepoint framework using AADhttpclient. Here is the source code to achieve the same.

private getUserDetailsGraphAPI(): void {
const aadClient: AadHttpClient = new AadHttpClient(
this.props.context.serviceScope,
“https://graph.microsoft.com”
);

// Get users with givenName, surname, or displayName
aadClient
.get(
‘https://graph.microsoft.com/v1.0/users?$select=displayName,mail,userPrincipalName’
AadHttpClient.configurations.v1
)
.then(response => {
return response.json();
})
.then(json => {

var users: Array<IUserItem> = new Array<IUserItem>();
console.log(json);
json.value.map((item: any) => {
users.push( {
displayName: item.displayName,
mail: item.mail,
userPrincipalName: item.userPrincipalName,
});
});

// Update the component state accordingly to the result
this.setState(
{
users: users,
}
);
})
.catch(error => {
console.error(error);
});
}

Happy SharePointing Folks:-)