As you aware, SharePoint Framework 1.4.1 supports MSGraphClient.
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
- Write the following code snippet inside the render function.
- Open the package-solution.json file and update the Graph API permission
- 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.
- Click Deploy
- Open the New SharePoint Admin Center and click on API Management
- Select the permission and approve the request
- 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.