As you aware, SharePoint Framework 1.4.1 supports MSGraphClient.

MSGraphClient is used to perform REST calls against Microsoft Graph. The Microsoft Graph JavaScript client library is a lightweight wrapper around the Microsoft Graph API. This class allows developers to start making REST calls to MSGraph without needing to initialize the the MSGraph client library.

Note: Microsoft Graph API is replacing the previously released GraphHttpClient, which is now considered to be deprecated.

In this post, I am going to show you a SharePoint Framework WebPart to fetch my User Profile details using Microsoft Graph API. I consider that you have a SharePoint Framework HelloWorldWebPart WebPart, if you don’t, take a look at this article.

Note: API Management can be performed only on first release tenant.

  • Import the MSGraphClient in the HelloWorldWebPart.ts file as shown below

importgrpahclient

  • Write the following code snippet inside the render function.

render.png

  • Open the package-solution.json file and update the Graph API permission

graphapipermission

  • Update the CDN cdnBasePath parameter in write-manifests.json file as per your setup
  • Execute the gulp bundle and gulp package-solution with ship attribute to prepare the build
  • Upload the CDN files in the CDN location specified in the write-manifests.json file
  • Upload the SPPKG file in the app catalog site. As shown below, We have to approve the Microsoft Graph API permission requested by the developer in the package-solution.json.

helloworddeploy.png

  • Click Deploy
  • Open the New SharePoint Admin Center and click on API Management
  • Select the permission and approve the request

approvehelloworld.png

  • Install the HelloWorld WebPart in a SharePoint Site and add the same in a page
  • Verify if HelloWorld WebPart is printing the current user display name and mail in browser console.