SPFx-MSGraph Toolkit using @microsoft/mgt-spfx & @microsoft/mgt-react

Introduction

Hi friends, let us see how we can use MSGraph Toolkit (MGT) in SharePoint Framework. This article is the update to my pervious post SPFx – Using MSGraph Toolkit, where I had explained and showed you the step by step instructions on the setup. Actually, those steps are not required and the same can be achieved very easy with just the 2 packages @microsoft/mgt-spfx & @microsoft/mgt-react. You can go through the full documentation on Microsoft Graph Toolkit: UI Components and Authentication Providers for Microsoft Graph – Microsoft Graph | Microsoft Docs

Focus on the Code

Let us start by creating a new web part project using yeoman SharePoint generator, before that create a folder where you want to create the web part. Navigate to that folder and run the below command.

yo @microsoft/sharepoint

The generator will asks you couple of questions,

Enter the webpart name as your solution name, and then select Enter.
Select Create a subfolder with solution name for where to place the files.
Select N to allow the solution to be deployed to all sites immediately.
Select N on the question if solution contains unique permissions.
Enter the webpart name
Enter the webpart description
Choose the framework as ‘React‘

Note: I have used @microsoft/generator-sharepoint version 1.12.1

Once the project is created, make sure the web part is running without any issue. Its better to actually run the vanilla web part once it is created. Once the verification is done, install the below packages

Once the above packages are installed, you should have the package.json file like the below

{
  "name": "graph-toolkit-demo",
  "version": "0.0.1",
  "private": true,
  "main": "lib/index.js",
  "scripts": {
    "build": "gulp bundle",
    "clean": "gulp clean",
    "test": "gulp test"
  },
  "dependencies": {
    "@microsoft/mgt-react": "^2.3.0",
    "@microsoft/mgt-spfx": "^2.3.0",
    "@microsoft/sp-core-library": "1.12.1",
    "@microsoft/sp-lodash-subset": "1.12.1",
    "@microsoft/sp-office-ui-fabric-core": "1.12.1",
    "@microsoft/sp-property-pane": "1.12.1",
    "@microsoft/sp-webpart-base": "1.12.1",
    "office-ui-fabric-react": "7.156.0",
    "react": "16.9.0",
    "react-dom": "16.9.0"
  },
  "devDependencies": {
    "@types/react": "16.9.36",
    "@types/react-dom": "16.9.8",
    "@microsoft/sp-build-web": "1.12.1",
    "@microsoft/sp-tslint-rules": "1.12.1",
    "@microsoft/sp-module-interfaces": "1.12.1",
    "@microsoft/sp-webpart-workbench": "1.12.1",
    "@microsoft/rush-stack-compiler-3.7": "0.2.3",
    "gulp": "~4.0.2",
    "ajv": "~5.2.2",
    "@types/webpack-env": "1.13.1"
  }
}

Here I had named my web part as graph-toolkit-demo.

Now we have to update our code to authenticate to Microsoft Identity to access the Microsoft Graph API. There is no complication and nothing to worry on the authentication or setup, all are taken care by the providers which comes with the package that we installed above. We just need to use the right providers. Since we are using SPFx, we need to use the SharePoint Provider. This can be achieved with just a single line of code which is shown below. Update your <webpart>.ts file with the below code.

import { Providers, SharePointProvider } from '@microsoft/mgt-spfx';

protected async onInit() {
    if (!Providers.globalProvider) {
        Providers.globalProvider = new SharePointProvider(this.context);
    }
}

So with the above code, the authentication is set. Now we can see how we can use the components in our <webpart>.tsx file. Update the file with the below changes.

import { Person } from '@microsoft/mgt-react/dist/es6/spfx';

Make sure you import the Toolkit component from the mgt-react and under spfx folder, else you will experience lot of issues due to conflicts while building or running the code.

<Person 
    personQuery="adelev" 
    view={ViewType.threelines} 
    fetchImage={true}
    avatarType={avatarType.photo} 
    personCardInteraction={PersonCardInteraction.hover} />

Paste the above code under the render method.

Final step is to update the package-solution.json file with the permission scopes that are required for MSGraph access. The scopes differ based on the toolkit components, since we are using only Person component, below are the scopes that has to be included in the package-solution.json file.

"webApiPermissionRequests": [
    {
        "resource": "Microsoft Graph",
        "scope": "User.Read"
    }
]

Thats it, we are done with the code. Now you can run the package and you should see the output something like the below.

What Next ???

Now you can use all the MS Graph Toolkit Components in your SPFx code without any complex configurations or changes to the files. We should appreciate the Graph team for making as the components easy for us to leverage and there are lots of customization capability which we can use it to fit our design or company theme. I recommend all of you to try it out and leave a comment.

Reference Links

Happy Coding…