Getting started with graph API in SPFx webpart

Published Jun 03 2021 03:59 AM 1,204 Views
Senior Member

What is Graph API?

 

Microsoft Graph provides a unified programmability model that you can use to build apps for organizations and consumers that interact with the data of millions of users. You can easily access Microsoft Graph also from SharePoint Framework solutions.

 

Microsoft Graph exposes REST APIs and client libraries to access data on the following Microsoft services like  Bookings, Calendar, Delve, Excel, Microsoft 365 compliance eDiscovery, Microsoft Search, OneDrive, OneNote, Outlook/Exchange, People (Outlook contacts), Planner, SharePoint, Teams, To Do, Workplace Analytics. for more details refer to this.

 

How to test API in graph explorer?

 

Before creating an SPFx web part implementation with Graph API we can explore APIs in Graph Explorer. At here To access your own data you have to log in with your O365 Credentials.

 

Whenever you sign in it will ask for Permission so you have to Accept it.

 

In the left panel, you can find multiple sample queries by category so you can check them and run them.

 

If you are testing any API and get an error like this: Forbidden - 403 - You need to consent to the permissions on the Modify permissions (Preview) tab. Then follow the below steps,

 

1. Select Permissions

 

Select Permssion.png

 

 

 

2. Then select the category in which you want to set permission and click on the Consent button.

 

Permssions.png

 

3 After clicking on the Consent it will open a popup so check the checkbox and Accept it.

 

 

AcceptPermsiion.png

 

 

 Then click on the run query and it will retrieve the results. that's it :)

 

 

Now lets' move to the SPFx implementation.

 

Implementation

 

Open a command prompt
Move to the path where you want to create a project
Create a project directory using:

 

md GraphAPIDemo

 

Move to the above-created directory using:

 

cd GraphAPIDemo

 

Now execute the below command to create an SPFx solution:

 

 yo @microsoft/sharepoint

 

It will ask some questions, as shown below,

 

Project Structure.png

 

 

After a successful installation, we can open a project in any source code tool. Here, I am using the VS code, so I will execute the command:

 

code .

 

Now will create a demo to read messages of a user. for more details refer to this.

 

So first of all we have to set permission as per our endpoint in package-solution.json. Now the question is which permission we have to add so there are multiple ways.

 

1. In the graph explorer

 

For eg. we have to use messages endpoint so first, we will test it in graph explorer. so while we running the query there is an permission tab under the run query button so after the response checks the permission tab. It shows all required permissions for the endpoint as below.

 

Modify Permission.png

 

2. Official documentation for endpoint

 

You can also find all the details in the official document for all the endpoints. 

 

Implementation

 

1. In the package-solution.json file we will add permission.

 

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

 

2. Move to the IGraphApiDemoProps.ts and update as below,

 

import { MSGraphClient } from "@microsoft/sp-http";

export interface IGraphApiDemoProps {
  description: string;
  graphClient: MSGraphClient;
}

 

3. Create a file IGraphApiDemoState.ts inside src\webparts\graphApiDemo\components and create a state interface as below

 

export interface IGraphApiDemoState {
    messages: [{
        subject: string;
    }]
}

 

4. Move to the{WebpartName}Webpart.ts

 

Import MSGraphClient module

Create an OnInit() to initialize the Graph Configuration for the current context.

In the render() set the graphClient property

 

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Version } from '@microsoft/sp-core-library';
import {
  IPropertyPaneConfiguration,
  PropertyPaneTextField
} from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';

import * as strings from 'GraphApiDemoWebPartStrings';
import GraphApiDemo from './components/GraphApiDemo';
import { IGraphApiDemoProps } from './components/IGraphApiDemoProps';
import { MSGraphClient } from '@microsoft/sp-http';

export interface IGraphApiDemoWebPartProps {
  description: string;
}

export default class GraphApiDemoWebPart extends BaseClientSideWebPart<IGraphApiDemoWebPartProps> {

  private graphClient: MSGraphClient;
  public onInit(): Promise<void> {
    return new Promise<void>((resolve: () => void, reject: (error: any) => void): void => {
      this.context.msGraphClientFactory
        .getClient()
        .then((client: MSGraphClient): void => {
          this.graphClient = client;
          resolve();
        }, err => reject(err));
    });
  }

  public render(): void {
    const element: React.ReactElement<IGraphApiDemoProps> = React.createElement(
      GraphApiDemo,
      {
        description: this.properties.description,
        graphClient: this.graphClient,
      }
    );

    ReactDom.render(element, this.domElement);
  }

  protected onDispose(): void {
    ReactDom.unmountComponentAtNode(this.domElement);
  }

  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField('description', {
                  label: strings.DescriptionFieldLabel
                })
              ]
            }
          ]
        }
      ]
    };
  }
}

 

5. Move to the GraphApiDemo.tsx and call API here and render the data.

 

import * as React from 'react';
import styles from './GraphApiDemo.module.scss';
import { IGraphApiDemoProps } from './IGraphApiDemoProps';
import { IGraphApiDemoState } from './IGraphApiDemoState';
import { escape } from '@microsoft/sp-lodash-subset';

export default class GraphApiDemo extends React.Component<IGraphApiDemoProps, IGraphApiDemoState> {

  constructor(props: IGraphApiDemoProps) {
    super(props);
    this.state = {
      messages: [{
        subject: ''
      }]
    }
  }

  public getDriveItems() {
    let getMessages: string = "me/messages";

    if (!this.props.graphClient) {
      return;
    }

    this.props.graphClient
      .api(getMessages)
      .version("v1.0")
      .select("subject,sentDateTime,webLink")
      .top(5)
      .get((err: any, res: any): void => {
        if (err) {
          console.log("Getting error in retrieving mesages =>", err)
        }
        if (res) {
          console.log("Success");
          if (res && res.value.length) {
            console.log(res.value);
            this.setState({
              messages: res.value
            })
          }
        }
      });
  }

  public componentDidMount() {
    this.getDriveItems();
  }

  public render(): React.ReactElement<IGraphApiDemoProps> {
    return (
      <div className={styles.graphApiDemo}>
        { this.state.messages.map(m => <><span>{m.subject}</span><br /></>)}
      </div>
    );
  }
}

 

Now serve the application using the below command,

 

gulp serve

 

Now test the webpart in SharePoint-SiteURL + /_layouts/15/workbench.aspx.

 

Output

 

Output.png

 

Find the full source code here.

 

Summary

 

In this article, we have seen how to use graph API in SPFx web part and graph explorer.

 

I hope this helps.

 

Sharing is caring!!

 

%3CLINGO-SUB%20id%3D%22lingo-sub-2401064%22%20slang%3D%22en-US%22%3EGetting%20started%20with%20graph%20API%20in%20SPFx%20webpart%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2401064%22%20slang%3D%22en-US%22%3E%3CH2%20id%3D%22toc-hId--442091895%22%20id%3D%22toc-hId--443045269%22%3EWhat%20is%20Graph%20API%3F%3C%2FH2%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EMicrosoft%20Graph%20provides%20a%20unified%20programmability%20model%20that%20you%20can%20use%20to%20build%20apps%20for%20organizations%20and%20consumers%20that%20interact%20with%20the%20data%20of%20millions%20of%20users.%20You%20can%20easily%20access%20Microsoft%20Graph%20also%20from%20SharePoint%20Framework%20solutions.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EMicrosoft%20Graph%20exposes%20REST%20APIs%20and%20client%20libraries%20to%20access%20data%20on%20the%20following%20Microsoft%20services%20like%26nbsp%3B%20Bookings%2C%20Calendar%2C%20Delve%2C%20Excel%2C%20Microsoft%20365%20compliance%20eDiscovery%2C%20Microsoft%20Search%2C%20OneDrive%2C%20OneNote%2C%20Outlook%2FExchange%2C%20People%20(Outlook%20contacts)%2C%20Planner%2C%20SharePoint%2C%20Teams%2C%20To%20Do%2C%20Workplace%20Analytics.%20for%20more%20details%20refer%20to%20%3CA%20title%3D%22Graph%20API%22%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fgraph%2Foverview%3Fview%3Dgraph-rest-1.0%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ethis%3C%2FA%3E.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CH2%20id%3D%22toc-hId-2045420938%22%20id%3D%22toc-hId-2044467564%22%3EHow%20to%20test%20API%20in%20graph%20explorer%3F%3C%2FH2%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EBefore%20creating%20an%20SPFx%20web%20part%20implementation%20with%20Graph%20API%20we%20can%20explore%20APIs%20in%20%3CA%20title%3D%22Graph%20Explorer%22%20href%3D%22https%3A%2F%2Fdeveloper.microsoft.com%2Fen-us%2Fgraph%2Fgraph-explorer%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3EGraph%20Explorer%3C%2FA%3E.%20At%20here%20To%20access%20your%20own%20data%20you%20have%20to%20log%20in%20with%20your%20O365%20Credentials.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EWhenever%20you%20sign%20in%20it%20will%20ask%20for%20Permission%20so%20you%20have%20to%20Accept%20it.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EIn%20the%20left%20panel%2C%20you%20can%20find%20multiple%20sample%20queries%20by%20category%20so%20you%20can%20check%20them%20and%20run%20them.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EIf%20you%20are%20testing%20any%20API%20and%20get%20an%20%3CSTRONG%3Eerror%20%3C%2FSTRONG%3Elike%20this%3A%26nbsp%3B%3CSTRONG%3EForbidden%20-%20403%20-%20You%20need%20to%20consent%20to%20the%20permissions%20on%20the%20Modify%20permissions%20(Preview)%20tab.%26nbsp%3B%3C%2FSTRONG%3EThen%20follow%20the%26nbsp%3Bbelow%20steps%2C%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E1.%20Select%20Permissions%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%22Select%20Permssion.png%22%20style%3D%22width%3A%20511px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F285114iE1B9609F084EC223%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22Select%20Permssion.png%22%20alt%3D%22Select%20Permssion.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E2.%20Then%20select%20the%20category%20in%20which%20you%20want%20to%20set%20permission%20and%20click%20on%20the%26nbsp%3B%3CSTRONG%3EConsent%3C%2FSTRONG%3E%20button.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%22Permssions.png%22%20style%3D%22width%3A%20580px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F285115i17F20B295CAD56EC%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22Permssions.png%22%20alt%3D%22Permssions.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E3%20After%20clicking%20on%20the%20Consent%20it%20will%20open%20a%20popup%20so%20check%20the%20checkbox%20and%20Accept%20it.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%22AcceptPermsiion.png%22%20style%3D%22width%3A%20383px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F285118i266B689B13F653D8%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22AcceptPermsiion.png%22%20alt%3D%22AcceptPermsiion.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3BThen%20click%20on%20the%20run%20query%20and%20it%20will%20retrieve%20the%20results.%20that's%20it%20%3A)%3C%2Fimg%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3ENow%20lets'%20move%20to%20the%20SPFx%20implementation.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CH2%20id%3D%22toc-hId-237966475%22%20id%3D%22toc-hId-237013101%22%3EImplementation%3C%2FH2%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EOpen%20a%20command%20prompt%3CBR%20%2F%3EMove%20to%20the%20path%20where%20you%20want%20to%20create%20a%20project%3CBR%20%2F%3ECreate%20a%20project%20directory%20using%3A%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%3Emd%20GraphAPIDemo%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EMove%20to%20the%20above-created%20directory%20using%3A%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%3Ecd%20GraphAPIDemo%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3ENow%20execute%20the%20below%20command%20to%20create%20an%20SPFx%20solution%3A%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%3E%26nbsp%3Byo%20%40microsoft%2Fsharepoint%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EIt%20will%20ask%20some%20questions%2C%20as%20shown%20below%2C%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%22Project%20Structure.png%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F285240i946F59348FEB36AE%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22Project%20Structure.png%22%20alt%3D%22Project%20Structure.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EAfter%20a%20successful%20installation%2C%20we%20can%20open%20a%20project%20in%20any%20source%20code%20tool.%20Here%2C%20I%20am%20using%20the%20VS%20code%2C%20so%20I%20will%20execute%20the%20command%3A%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%3Ecode%20.%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3ENow%20will%20create%20a%20demo%20to%20read%20messages%20of%20a%20user.%20for%20more%20details%20refer%20to%20%3CA%20title%3D%22this%22%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fgraph%2Fapi%2Fmessage-get%3Fview%3Dgraph-rest-1.0%26amp%3Btabs%3Dhttp%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ethis%3C%2FA%3E.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3ESo%20first%20of%20all%20we%20have%20to%20set%20permission%20as%20per%20our%20endpoint%20in%20%3CSTRONG%3Epackage-solution.json%3C%2FSTRONG%3E.%20Now%20the%20question%20is%20which%20permission%20we%20have%20to%20add%20so%20there%20are%20multiple%20ways.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSTRONG%3E1.%20In%20the%20graph%20explorer%3C%2FSTRONG%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%20class%3D%22lia-indent-padding-left-30px%22%3EFor%20eg.%20we%20have%20to%20use%20messages%20endpoint%20so%20first%2C%20we%20will%20test%20it%20in%20graph%20explorer.%20so%20while%20we%20running%20the%20query%20there%20is%20an%20%3CSTRONG%3Epermission%3C%2FSTRONG%3E%20tab%20under%20the%20%3CSTRONG%3Erun%20query%20%3C%2FSTRONG%3Ebutton%20so%20after%20the%20response%20checks%20the%20permission%20tab.%20It%20shows%20all%20required%20permissions%20for%20the%20endpoint%20as%20below.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%20class%3D%22lia-indent-padding-left-30px%22%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%22Modify%20Permission.png%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F285517iC8C26E510944C0BD%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22Modify%20Permission.png%22%20alt%3D%22Modify%20Permission.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSTRONG%3E2.%20Official%20documentation%20for%20endpoint%3C%2FSTRONG%3E%3C%2FP%3E%0A%3CP%20class%3D%22lia-indent-padding-left-30px%22%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%20class%3D%22lia-indent-padding-left-30px%22%3EYou%20can%20also%20find%20all%20the%20details%20in%20the%20official%20document%20for%20all%20the%20endpoints.%26nbsp%3B%3C%2FP%3E%0A%3CP%20class%3D%22lia-indent-padding-left-30px%22%3E%26nbsp%3B%3C%2FP%3E%0A%3CH2%20id%3D%22toc-hId--1569487988%22%20id%3D%22toc-hId--1570441362%22%3EImplementation%3C%2FH2%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSTRONG%3E1%3C%2FSTRONG%3E.%20In%20the%20%3CSTRONG%3Epackage-solution.json%3C%2FSTRONG%3E%20file%20we%20will%20add%20permission.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%20class%3D%22lia-code-sample%20language-json%22%3E%3CCODE%3E%22webApiPermissionRequests%22%3A%20%5B%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%22resource%22%3A%20%22Microsoft%20Graph%22%2C%0A%20%20%20%20%20%20%20%20%22scope%22%3A%20%22Mail.Read%22%0A%20%20%20%20%20%20%7D%0A%5D%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E2.%20Move%20to%20the%20%3CSTRONG%3EIGraphApiDemoProps.ts%20%3C%2FSTRONG%3Eand%20update%20as%20below%2C%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%20class%3D%22lia-code-sample%20language-javascript%22%3E%3CCODE%3Eimport%20%7B%20MSGraphClient%20%7D%20from%20%22%40microsoft%2Fsp-http%22%3B%0A%0Aexport%20interface%20IGraphApiDemoProps%20%7B%0A%20%20description%3A%20string%3B%0A%20%20graphClient%3A%20MSGraphClient%3B%0A%7D%0A%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E3.%20Create%20a%20file%26nbsp%3BIGraphApiDemoState.ts%20inside%20%3CSTRONG%3Esrc%5Cwebparts%5CgraphApiDemo%5Ccomponents%3C%2FSTRONG%3E%20and%20create%20a%20state%20interface%20as%20below%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%20class%3D%22lia-code-sample%20language-javascript%22%3E%3CCODE%3Eexport%20interface%20IGraphApiDemoState%20%7B%0A%20%20%20%20messages%3A%20%5B%7B%0A%20%20%20%20%20%20%20%20subject%3A%20string%3B%0A%20%20%20%20%7D%5D%0A%7D%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E4.%20Move%20to%20the%3CSTRONG%3E%7BWebpartName%7DWebpart.ts%3C%2FSTRONG%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%20class%3D%22lia-indent-padding-left-30px%22%3EImport%20MSGraphClient%20module%3C%2FP%3E%0A%3CP%20class%3D%22lia-indent-padding-left-30px%22%3ECreate%20an%20OnInit()%20to%20initialize%20the%20Graph%20Configuration%20for%20the%20current%20context.%3C%2FP%3E%0A%3CP%20class%3D%22lia-indent-padding-left-30px%22%3EIn%20the%20render()%20set%20the%26nbsp%3BgraphClient%20property%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%20class%3D%22lia-code-sample%20language-javascript%22%3E%3CCODE%3Eimport%20*%20as%20React%20from%20'react'%3B%0Aimport%20*%20as%20ReactDom%20from%20'react-dom'%3B%0Aimport%20%7B%20Version%20%7D%20from%20'%40microsoft%2Fsp-core-library'%3B%0Aimport%20%7B%0A%20%20IPropertyPaneConfiguration%2C%0A%20%20PropertyPaneTextField%0A%7D%20from%20'%40microsoft%2Fsp-property-pane'%3B%0Aimport%20%7B%20BaseClientSideWebPart%20%7D%20from%20'%40microsoft%2Fsp-webpart-base'%3B%0A%0Aimport%20*%20as%20strings%20from%20'GraphApiDemoWebPartStrings'%3B%0Aimport%20GraphApiDemo%20from%20'.%2Fcomponents%2FGraphApiDemo'%3B%0Aimport%20%7B%20IGraphApiDemoProps%20%7D%20from%20'.%2Fcomponents%2FIGraphApiDemoProps'%3B%0Aimport%20%7B%20MSGraphClient%20%7D%20from%20'%40microsoft%2Fsp-http'%3B%0A%0Aexport%20interface%20IGraphApiDemoWebPartProps%20%7B%0A%20%20description%3A%20string%3B%0A%7D%0A%0Aexport%20default%20class%20GraphApiDemoWebPart%20extends%20BaseClientSideWebPart%3CIGRAPHAPIDEMOWEBPARTPROPS%3E%20%7B%0A%0A%20%20private%20graphClient%3A%20MSGraphClient%3B%0A%20%20public%20onInit()%3A%20Promise%3CVOID%3E%20%7B%0A%20%20%20%20return%20new%20Promise%3CVOID%3E((resolve%3A%20()%20%3D%26gt%3B%20void%2C%20reject%3A%20(error%3A%20any)%20%3D%26gt%3B%20void)%3A%20void%20%3D%26gt%3B%20%7B%0A%20%20%20%20%20%20this.context.msGraphClientFactory%0A%20%20%20%20%20%20%20%20.getClient()%0A%20%20%20%20%20%20%20%20.then((client%3A%20MSGraphClient)%3A%20void%20%3D%26gt%3B%20%7B%0A%20%20%20%20%20%20%20%20%20%20this.graphClient%20%3D%20client%3B%0A%20%20%20%20%20%20%20%20%20%20resolve()%3B%0A%20%20%20%20%20%20%20%20%7D%2C%20err%20%3D%26gt%3B%20reject(err))%3B%0A%20%20%20%20%7D)%3B%0A%20%20%7D%0A%0A%20%20public%20render()%3A%20void%20%7B%0A%20%20%20%20const%20element%3A%20React.ReactElement%3CIGRAPHAPIDEMOPROPS%3E%20%3D%20React.createElement(%0A%20%20%20%20%20%20GraphApiDemo%2C%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20description%3A%20this.properties.description%2C%0A%20%20%20%20%20%20%20%20graphClient%3A%20this.graphClient%2C%0A%20%20%20%20%20%20%7D%0A%20%20%20%20)%3B%0A%0A%20%20%20%20ReactDom.render(element%2C%20this.domElement)%3B%0A%20%20%7D%0A%0A%20%20protected%20onDispose()%3A%20void%20%7B%0A%20%20%20%20ReactDom.unmountComponentAtNode(this.domElement)%3B%0A%20%20%7D%0A%0A%20%20protected%20get%20dataVersion()%3A%20Version%20%7B%0A%20%20%20%20return%20Version.parse('1.0')%3B%0A%20%20%7D%0A%0A%20%20protected%20getPropertyPaneConfiguration()%3A%20IPropertyPaneConfiguration%20%7B%0A%20%20%20%20return%20%7B%0A%20%20%20%20%20%20pages%3A%20%5B%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20header%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20description%3A%20strings.PropertyPaneDescription%0A%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20groups%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20groupName%3A%20strings.BasicGroupName%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20groupFields%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20PropertyPaneTextField('description'%2C%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20label%3A%20strings.DescriptionFieldLabel%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D)%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%5D%0A%20%20%20%20%7D%3B%0A%20%20%7D%0A%7D%0A%3C%2FIGRAPHAPIDEMOPROPS%3E%3C%2FVOID%3E%3C%2FVOID%3E%3C%2FIGRAPHAPIDEMOWEBPARTPROPS%3E%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E5.%20Move%20to%20the%26nbsp%3B%3CSTRONG%3EGraphApiDemo.tsx%3C%2FSTRONG%3E%20and%20call%20API%20here%20and%20render%20the%20data.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%20class%3D%22lia-code-sample%20language-javascript%22%3E%3CCODE%3Eimport%20*%20as%20React%20from%20'react'%3B%0Aimport%20styles%20from%20'.%2FGraphApiDemo.module.scss'%3B%0Aimport%20%7B%20IGraphApiDemoProps%20%7D%20from%20'.%2FIGraphApiDemoProps'%3B%0Aimport%20%7B%20IGraphApiDemoState%20%7D%20from%20'.%2FIGraphApiDemoState'%3B%0Aimport%20%7B%20escape%20%7D%20from%20'%40microsoft%2Fsp-lodash-subset'%3B%0A%0Aexport%20default%20class%20GraphApiDemo%20extends%20React.Component%3CIGRAPHAPIDEMOPROPS%3E%20%7B%0A%0A%20%20constructor(props%3A%20IGraphApiDemoProps)%20%7B%0A%20%20%20%20super(props)%3B%0A%20%20%20%20this.state%20%3D%20%7B%0A%20%20%20%20%20%20messages%3A%20%5B%7B%0A%20%20%20%20%20%20%20%20subject%3A%20''%0A%20%20%20%20%20%20%7D%5D%0A%20%20%20%20%7D%0A%20%20%7D%0A%0A%20%20public%20getDriveItems()%20%7B%0A%20%20%20%20let%20getMessages%3A%20string%20%3D%20%22me%2Fmessages%22%3B%0A%0A%20%20%20%20if%20(!this.props.graphClient)%20%7B%0A%20%20%20%20%20%20return%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20this.props.graphClient%0A%20%20%20%20%20%20.api(getMessages)%0A%20%20%20%20%20%20.version(%22v1.0%22)%0A%20%20%20%20%20%20.select(%22subject%2CsentDateTime%2CwebLink%22)%0A%20%20%20%20%20%20.top(5)%0A%20%20%20%20%20%20.get((err%3A%20any%2C%20res%3A%20any)%3A%20void%20%3D%26gt%3B%20%7B%0A%20%20%20%20%20%20%20%20if%20(err)%20%7B%0A%20%20%20%20%20%20%20%20%20%20console.log(%22Getting%20error%20in%20retrieving%20mesages%20%3D%26gt%3B%22%2C%20err)%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20if%20(res)%20%7B%0A%20%20%20%20%20%20%20%20%20%20console.log(%22Success%22)%3B%0A%20%20%20%20%20%20%20%20%20%20if%20(res%20%26amp%3B%26amp%3B%20res.value.length)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20console.log(res.value)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20this.setState(%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20messages%3A%20res.value%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D)%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D)%3B%0A%20%20%7D%0A%0A%20%20public%20componentDidMount()%20%7B%0A%20%20%20%20this.getDriveItems()%3B%0A%20%20%7D%0A%0A%20%20public%20render()%3A%20React.ReactElement%3CIGRAPHAPIDEMOPROPS%3E%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CDIV%20classname%3D%22%7Bstyles.graphApiDemo%7D%22%3E%0A%20%20%20%20%20%20%20%20%7B%20this.state.messages.map(m%20%3D%26gt%3B%20%26lt%3B%26gt%3B%3CSPAN%3E%7Bm.subject%7D%3C%2FSPAN%3E%3CBR%20%2F%3E)%7D%0A%20%20%20%20%20%20%3C%2FDIV%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%3C%2FIGRAPHAPIDEMOPROPS%3E%3C%2FIGRAPHAPIDEMOPROPS%3E%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3ENow%20serve%20the%20application%20using%20the%20below%20command%2C%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%3Egulp%20serve%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3ENow%20test%20the%20webpart%20in%20SharePoint-SiteURL%20%2B%20%2F_layouts%2F15%2Fworkbench.aspx.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CH2%20id%3D%22toc-hId-918024845%22%20id%3D%22toc-hId-917071471%22%3EOutput%3C%2FH2%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%22Output.png%22%20style%3D%22width%3A%20675px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F285520iD83B85C50B7D02F7%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22Output.png%22%20alt%3D%22Output.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EFind%20the%20full%20source%20code%20%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2Fchandaniprajapati%2FGraphAPIDemo%22%20target%3D%22_self%22%20rel%3D%22noopener%20noreferrer%22%3Ehere%3C%2FA%3E.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CH2%20id%3D%22toc-hId--889429618%22%20id%3D%22toc-hId--890382992%22%3ESummary%3C%2FH2%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EIn%20this%20article%2C%20we%20have%20seen%20how%20to%20use%20graph%20API%20in%20SPFx%20web%20part%20and%20graph%20explorer.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EI%20hope%20this%20helps.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3ESharing%20is%20caring!!%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-TEASER%20id%3D%22lingo-teaser-2401064%22%20slang%3D%22en-US%22%3E%3CP%3EIn%20this%20article%2C%20we%20will%20see%20step%20by%20step%20implementation%20of%20graph%20API%20in%20the%20SPFx%20web%20part%20and%20how%20to%20use%20graph%20explorer%20to%20test%20APIs.%3C%2FP%3E%3C%2FLINGO-TEASER%3E%3CLINGO-LABS%20id%3D%22lingo-labs-2401064%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EGetting%20started%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EGraph%20API%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ESPFx%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E
Co-Authors
Version history
Last update:
‎Jun 01 2021 10:08 PM
Updated by:
www.000webhost.com