Microsoft Graph Toolkit with SharePoint Framework and React demystified

Context

Recently, I saw a lot of people asking through GitHub or Microsoft tech communities for more documentation about Microsoft Graph Toolkit (MGT) with SharePoint Framework (SPFx) and React. With the latest releases of SPFx, my previous article is no longer up to date so this new article will give you a simple up to date step-by-step guidance on how to setup a SPFx project successfully with MGT and React framework. Let’s go!

Setup your SPFx project

First, you need to deploy the SharePoint Framework library for Microsoft Graph Toolkit in your tenant app catalog. This library will prevent multiple components from registering their own set of Microsoft Graph Toolkit components on the page. This issue has been reported through GitHub in the past and it’s now solved!

Once it’s done, you need to generate a brand new SharePoint Framework project with the Yeoman SharePoint generator.

Then you need to install the mgt-spfx package with the following command:

npm install @microsoft/mgt-spfx

After this, you need to setup the SharePoint provider in your project, import the following classes in your web part file:

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

Initialize the SharePoint provider with the following code:

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

To use the MGT React components, install the mgt-react package with the following command:

npm install @microsoft/mgt-react

Finally, to use the components in your web part you need to import the components in your web part file. In this article, I’m using the Agenda component:

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

// ...

<Agenda groupByDay eventQuery="/me/events?orderby=start/dateTime desc"></Agenda>

I hope this article will help you to start using Microsoft Graph Toolkit with SharePoint Framework and React in your development projects. Let me know if you have any question 🙂

GitHub public repository URL is https://github.com/yhabersaat/spfx-mgt-setup-demo.

Happy coding everyone!