SPFx Webpart and MSGraphClient

Frequent Contributor


I need to write a webpart, which shows data from the MS Graph.

I wrote this example code


import { Version } from '@microsoft/sp-core-library';
import {
} from '@microsoft/sp-webpart-base';
import { escape } from '@microsoft/sp-lodash-subset';

import styles from './HelloWorldWebPart.module.scss';
import * as strings from 'HelloWorldWebPartStrings';

export interface IHelloWorldWebPartProps {
description: string;

export default class HelloWorldWebPart extends BaseClientSideWebPart<IHelloWorldWebPartProps> {

public render(): void {

const client: MSGraphClient = this.context.serviceScope.consume(MSGraphClient.serviceKey);
// get information about the current user from the Microsoft Graph
.get((error, user: MicrosoftGraph.User, rawResponse?: any) => {
// Resulat like
// {
// "department": "Finance",
// "displayName": "Megan Bowen"
// }

this.domElement.innerHTML = `
<div class="${ styles.helloWorld }"
<span class="${ styles.title }">Welcome to SharePoint!</span>
<span> Name</span>
<span> Deartment</span>


protected get dataVersion(): Version {
return Version.parse('1.0');

protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
return {
pages: [
header: {
description: strings.PropertyPaneDescription
groups: [
groupName: strings.BasicGroupName,
groupFields: [
PropertyPaneTextField('description', {
label: strings.DescriptionFieldLabel

But wow I can bring the Department and Name (result form the MS Graph) into the HTML rendering?

When I really understand the MSGraphClient works asynchron. How can I get save, that first the MSGraphClient gets the result and the build the HTLM rendering part?

Thanks for your help

Related Conversations
Tabs and Dark Mode
cjc2112 in Discussions on
35 Replies
Extentions Synchronization
Deleted in Discussions on
3 Replies
flashing a white screen while open new tab
Deleted in Discussions on
14 Replies
Security Community Webinars
Valon_Kolica in Security, Privacy & Compliance on
9 Replies