How to get user outlook messages using Microsoft graph api in SPFx with React JS

In this SPFx tutorial, we will discuss how to get user outlook messages using Microsoft Graph API in SPFx (SharePoint Framework) and React JS.

Get user email message using Graph API in SPFx

Now, we will see how to get user email message using Graph API in SharePoint Framework (SPFx) with React JS.

First we will create the SPFx client side web part.

If you are new to SPFx, you can check out the below tutorials:

Step 1: Open Node.js command prompt and create a new project as same as the below screenshot.

get user outlook message using microsoft graph api spfx

Step 2: Here I have created a Web part called GetEmailMessageFromOutlook and I used React JS as a framework.

So after the execution of the above command, our new web part got created successfully in the solution folder.

Now you type code . in the command prompt to open this project in Visual Studio code.

Now you can see the below screenshot where the new web part has been created successfully and the solution looks like below.

How to get user outlook message using Microsoft graph api in SPFx with React JS

Step 3: Now we have to follow a few steps to achieve this task.

Open IGetEmailMessageFromOutlookProps.ts and add the below code.

import { MSGraphClient } from '@microsoft/sp-http';  
import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';
export interface IGetEmailMessageFromOutlookProps {
  graphClient: MSGraphClient;
}

The Exact code should be looks like as below screenshot.

How to get user outlook message using Microsoft graph api in SPFx
Exactly it should look like this

Step 4: Next go package-solution.json and the below code to give the proper permission to graph API.

microsoft graph api spfx get outlook message

Step 5: Next Open GetEmailMessageFromOutlookWebPart.ts to add the below line of code.

microsoft graph api spfx get user outlook message

Step 6: Open GetEmailMessageFromOutlook.tsx and add the below code which will render HTML and execute the graph API.

import * as React from 'react';
import styles from './GetEmailMessageFromOutlook.module.scss';
import { IGetEmailMessageFromOutlookProps } from './IGetEmailMessageFromOutlookProps';
import { escape } from '@microsoft/sp-lodash-subset';
import {  
  Persona,  
  PersonaSize  
} from 'office-ui-fabric-react/lib/components/Persona';  
import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';  
import { Link } from 'office-ui-fabric-react/lib/components/Link';  
import { List } from 'office-ui-fabric-react/lib/List';  

export interface IGetEmailMessageFromOutlookState{
  messages:MicrosoftGraph.Message[];  
}

export default class GetEmailMessageFromOutlook extends React.Component<IGetEmailMessageFromOutlookProps,IGetEmailMessageFromOutlookState> {
  constructor(props: IGetEmailMessageFromOutlookProps) {  
    super(props);  
    this.state = {  
      messages:[]  
    };
  }
  public componentDidMount(): void {  
    this.props.graphClient  
    .api('/me/messages').top(5).orderby("receivedDateTime desc")
    .get((error: any, mailmessage: any, rawResponse?: any) => {  
      console.log('mailmessage', mailmessage);  
      const Messagemine: MicrosoftGraph.Message[] = mailmessage.value;  
      this.setState({ messages: Messagemine });  
    });  
}  
private _onRenderMessageCell(item: MicrosoftGraph.Message, index: number | undefined): JSX.Element {  
  {
    console.log(item);}  
  return (  
    <div><>  <div>  {item.body.content}</div>  
  </>  
    </div>  
  );  
  }
public render(): React.ReactElement<IGetEmailMessageFromOutlookProps> {  
  return (  
     <div>  
        <div>  <List items={this.state.messages}  
          onRenderCell={this._onRenderMessageCell} />  
          </div>  </div>       
  );  
}  
} 
microsoft graph api spfx get outlook email message
In Yellow Headline of the code is calling to graph API

Step 7: After adding the above code, you can build this web part and check everything is OK or you found any issue.

Step 8: Next go to your command prompt and execute this code using below command.

  • gulp clean
  • gulp build
  • gulp serve
  • gulp bundle –ship
  • gulp package-solution -ship

So you can run the above command as per the order. So once you click on gulp serve, it will open a new page where you have to add your newly added web part.

After adding the new SPFx web part, it will look like the below screenshot. But the page will comes empty in the gulp server. The result will come after added this web part to your SharePoint Online site.

spfx graph api example

Step 9: Next what we will do, prepare a package, and upload the package in our SharePoint App Catalog site. So we have to prepare the package using the above command which is in step-8. After creating the package, we have to upload in App catalog site which is the same as the below screenshot.

spfx graph api sample

Step 10: Before go to your output, make sure the admin approved the Graph API permission in the SharePoint admin center.

Once you add this Web part on your page, It will automatically visible in the admin center as a pending request.

So the admin needs to approve this so that we can able to see the outlook message on the SharePoint page. Please look into the screenshot where my admin has approved my request.

spfx graph api examples

In this tutorial, we learned how to get user outlook messages using Microsoft graph api spfx (SharePoint Framework).

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

Get update on Webinars, video tutorials, training courses etc.

Rajkiran Swain

Rajkiran is currently working as a SharePoint Consultant in QATAR . Rajkiran having 7+ years of experience in Microsoft Technologies such as SharePoint 2019/2016/2013/2010, MOSS 2007,WSS 3.0, Migration, Asp.Net, C#.Net, Sql Server, Ajax, jQuery etc.He is C#Corner MVP (2 Times).

>