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.

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

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.

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.

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

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

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>       
  );  
}  
} 

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.

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.

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.

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

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

• How to set up development environment for SharePoint framework
• Create a Hello World WebPart in SharePoint using SPFX
• How to create a New SPFx Web part in an existing project in SharePoint
• How to get user details using Microsoft Graph API in SPFx
• How to Send Email with Attachments using Graph API in SPFx (React JS)
• SPFx Application Customizer Example – An Analog Clock with React
• How to display SharePoint list items in a table using SPFX
• How to use bootstrap in SPFx webpart
• Error TS2307 Cannot find module @pnp/sp/presets/all in SPFx
• How to Authorize users to access GRAPH APIs with OAuth 2.0