Steps to use Microsoft Graph API with SharePoint Framework

Microsoft Graph API is a RESTful web API that provides a single endpoint for accessing data and insights from the Microsoft Cloud, including SharePoint. SharePoint Framework (SPFx) is a platform that allows developers to create custom solutions for SharePoint Online and SharePoint on-premises.

By combining the power of SPFx and Graph API, developers can create custom solutions that meet their specific needs. In this article, we will explore how to use Graph API in the SharePoint Framework, step by step.

Microsoft Graph Explorer is a web-based tool that allows developers to easily test and explore the Microsoft Graph API. It provides a user-friendly interface for sending API requests and viewing the responses. It is a useful tool for developers to learn and experiment with the Microsoft Graph API before building full-fledged applications.

• Go to the Microsoft Graph Explorer website.
• Sign in with a Microsoft account or an Azure Active Directory account.
• Choose the API endpoint you want to explore from the drop-down menu at the top of the screen.
• Use the "Get" button to send a GET request to the API and retrieve data.
• Use the "Send" button to send a POST request and create new data.
• Use the "Update" button to send a PATCH request and update existing data.
• Use the "Delete" button to send a DELETE request and delete data.
• Explore the left navigation and find your use case.
• For a complete list of endpoints or to explore the endpoint schema visit the Microsoft Graph API documentation.
• Copy your endpoint to the query builder text box to construct complex API queries.
• Use the "Run Query" button to test your use case before integrating them into your application.

For this article, we will use the following endpoint:

https://graph.microsoft.com/v1.0/me

With the selected endpoint, let's create the SPFx solution:

• Open Visual Studio Code and run the following command:

yo @microsoft/sharepoint

• Fill in the details as prompted. Choose React as the framework.
• Once the solution is created, go to the config folder and open the package-solution.json file.
• In the package -solution.json file, add the following code:

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

Click here to setup your SharePoint Framework development enviornment.

To connect to Graph API, we need to install the following packages:

• @microsoft/microsoft-graph-client
• @pnp/common
• @pnp/graph

Run the following commands in the terminal:

> npm install @microsoft/microsoft-graph-client @pnp/common @pnp/graph

To display the graph api results we need to define the user and environment properties:

• Create a new interface file for the user properties, webparts/graphApi/components/IGraphApiUserProps.ts.
• Add the following code:

export interface IGraphApiUserProps {
  displayName: string;
  email: string;
  isDarkTheme: boolean;
  environmentMessage: string;
  hasTeamsContext: boolean;
}

• Now go to the src/webparts/graphApi/components/GraphApi.tsx and import the interface created earlier:

import { IGraphApiUserProps } from './IGraphApiUserProps';

• Update the element rendering as per the code below:

With the installed packages, let’s connect to Graph API:        

• Open the src/webparts/graohApi/GraphApiWebPart.tsx file.

• Import the required packages at the top:     

import { MSGraphClient } from "@microsoft/sp-http";
import { graph } from "@pnp/graph";
import { sp } from "@pnp/sp";
import { IGraphApiUserProps } from './components/IGraphApiUserProps';

• Add the following functions:

private async getMsGraphClient() {
    return await this.context.msGraphClientFactory.getClient("3");
  }

  private async getUser() {
    const msGraphClient = await this.getMsGraphClient();
    const apiResponse = await msGraphClient.api('/me').get();
    return await apiResponse;
  }

• Call the getUser method in the render method:
  

this.getUser().then(async (result: any) => {
      this.logInfo(result);
      const element: React.ReactElement = React.createElement(
        GraphApi,
        {
          displayName: result.displayName,
          email: result.mail,
          isDarkTheme: this._isDarkTheme,
          environmentMessage: this._environmentMessage,
          hasTeamsContext: !!this.context.sdks.microsoftTeams,
        }
      );
      ReactDom.render(element, this.domElement);
    }).catch((err:any)=>{
      this.logInfo(err)
    });

Finally, it's time to build and test the solution:

• Go to the /config/serve.json and update the initialPage attribute with your SharePoint site collection url.
• Open the terminal and run the following commands:

> gulp build
> gulp serve

•  Workbench will be opened under your specified SharePoint site, add your webpart and test the results.
• Your webpart is now displaying your name and email from the graph api.

SPFx solution packages are deployed to your tenant application catalogue.

• To create a solution package, run the following command:

> gulp bundle –ship

> gulp package-solution –ship

• This will generate your solution file in \sharepoint\solution\ with .sppkg extension.
• Go to your tenant application catalogue, use the following url:

https://your-tenant.sharepoint.com/sites/apps/_layouts/15/tenantAppCatalog.aspx/manageApps

• Upload your solution file in the tenant application catalogue.
• Now you will see a popup box, similar to the image below

• You can select whether to enable and add this SPFx webpart automatically to all sites in the tenant or you can just enable it and leave it up to the site admins to add this webpart in their sites.
• After making your selection, click on Enable app at the bottom.
• Now, you will see another popup box, asking to approve access to your Graph API. Earlier we requested User.Read Graph API access for this application in the package-solution.json
  

  

  
  
• Click on the Go to API access page to approve the request. If you don't have access to do that then contact your SharePoint Administrator.
• In the API access page, You can find your package under pending requests as shown below.
  
  

  

• Click on Approve to approve the request.
• Now, your webpart is ready to be used on your site's modern pages. 

Click here to read more about the SPFx webpart deployment on the modern pages.

Click here to clone or explore the Graph API and SPFx solution in Github.

In this article, we covered how to use Graph API in the SharePoint Framework. By following these steps, you can retrieve user data using Graph API in your SPFx solution. Graph API is a powerful tool that can help you access a wide range of data and insights from the Microsoft Cloud. By combining the power of SPFx and Graph API, you can create custom solutions for SharePoint that meet your specific needs.

Reach out and book a free consultation with our experts to bring your ideas to life.