Introduction
MSGraphClient is a new HTTP client introduced in SharePoint Framework v1.6.0 that simplifies connecting to the Microsoft Graph inside SharePoint Framework solutions.
MSGraphClient wraps the existing Microsoft Graph JavaScript Client Library, offering developers the same capabilities as when using the client library in other client-side solutions.
While you could use the Microsoft Graph JavaScript Client Library in your solution directly, MSGraphClient handles authenticating against the Microsoft Graph for you, which allows you to focus on building your solution.
The MSGraphClient is available only in projects built using SharePoint Framework v1.6.0 and later. While the MSGraphClient is explained in this article by using a client-side web part, you can also use it in SharePoint Framework Extensions.
To use the MSGraphClient in your SharePoint Framework solution, add the following import clause in your main web part file,
import { MSGraphClient } from '@microsoft/sp-http';
MSGraphClient is exposed through the MSGraphClientFactory available on the web part context. To get a reference to MSGraphClient, in your code add,
this.context.msGraphClientFactory
.getClient()
.then((client: MSGraphClient): void => {
// use MSGraphClient here
});
Use the Microsoft Graph TypeScript types
When working with the Microsoft Graph and TypeScript, you can use the Microsoft Graph Typescript to help you catch errors in your code faster. The Microsoft Graph TypeScript types are provided as a separate package.
Install the Microsoft Graph TypeScript types,
npm install @microsoft/microsoft-graph-types --save-dev
After installing the package in your project, import it to your web part file,
import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';
Develop SharePoint Framework Web Part
Open a command prompt. Create a directory for SPFx solution.
md spfx-Graph
Navigate to the above created directory.
cd spfx-Graph
Run the Yeoman SharePoint Generator to create the solution.
yo @microsoft/sharepoint
Solution Name
Hit Enter to have default name (spfx-Graph in this case) or type in any other name for your solution.
Selected choice - Hit Enter
Target for the component
Here, we can select the target environment where we are planning to deploy the client web part, i.e., SharePoint Online or SharePoint OnPremise (SharePoint 2016 onwards).
Selected choice: SharePoint Online only (latest)
Place of files
We may choose to use the same folder or create a subfolder for our solution.
Selected choice: Same folder
Deployment option
Selecting Y will allow the app to be deployed instantly to all sites and be accessible everywhere.
Selected choice: N (install on each site explicitly)
Permissions to access web APIs
Choose if the components in the solution require permissions to access web APIs that are unique and not shared with other components in the tenant.
Selected choice: N (solution contains unique permissions)
Type of client-side component to create
We can choose to create a client-side web part or an extension. Choose web part option.
Selected choice: WebPart
Web part name
Hit Enter to select the default name or type in any other name.
Selected choice: GraphPersona
Web part description
Hit Enter to select the default description or type in any other value.
Framework to use
Select any JavaScript framework to develop the component. Available choices are - No JavaScript Framework, React, and Knockout.
Selected choice: React
Yeoman generator will perform a scaffolding process to generate the solution. The scaffolding process will take a significant amount of time.
Once the scaffolding process is completed, lock down the version of project dependencies by running the below command:
npm shrinkwrap
In the command prompt, type below command to open the solution in the code editor of your choice.
code .
NPM Packages Used,
Microsoft Graph TypeScript types
The typings will help in providing IntelliSense while writing the code.
On the command prompt, run below command.
npm install @microsoft/microsoft-graph-types --save-dev
Set Permission Scopes
To consume MS Graph or any third-party REST APIs, the permissions need to be explicitly set in the solution manifest.
Open “config\package-solution.json” and add below permission scope to give read permission on MS Graph for all users.
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
"solution": {
"name": "spfx-Graph-client-side-solution",
"id": "6e04bde2-8942-42b5-ae21-561d7bb21aa8",
"version": "2.0.0.5",
"includeClientSideAssets": true,
"webApiPermissionRequests": [
{
"resource": "Microsoft Graph",
"scope": "Mail.Read"
}
],
"isDomainIsolated": false
},
"paths": {
"zippedPackage": "solution/spfx-Graph.sppkg"
}
}
In IGraphPersonaProps.ts
import { MSGraphClient } from '@microsoft/sp-http';
export interface IGraphPersonaProps {
graphClient: MSGraphClient;
}
In IGraphPersonaState.ts
import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';
export interface IGraphPersonaState {
messages:MicrosoftGraph.Message[];
}
in GraphPersonaWebPart.ts
import { MSGraphClient } from '@microsoft/sp-http';
export interface IGraphPersonaWebPartProps {
description: string;
}
export default class GraphPersonaWebPart extends BaseClientSideWebPart<IGraphPersonaWebPartProps> {
public render(): void {
this.context.msGraphClientFactory.getClient()
.then((client: MSGraphClient): void => {
const element: React.ReactElement<IGraphPersonaProps > = React.createElement(
GraphPersona,
{
graphClient: client
}
);
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
})
]
}
]
}
]
};
}
}
In GraphPersona.tsx
import * as React from 'react';
import styles from './GraphPersona.module.scss';
import { IGraphPersonaProps } from './IGraphPersonaProps';
import { IGraphPersonaState } from './IGraphPersonaState';
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';
import { format } from 'date-fns';
export default class GraphPersona extends React.Component<IGraphPersonaProps, IGraphPersonaState> {
constructor(props: IGraphPersonaProps) {
super(props);
this.state = {
messages:[]
};
}
public componentDidMount(): void {
this.props.graphClient
.api('/me/messages')
.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<IGraphPersonaProps> {
return (
<div>
<div> <List items={this.state.messages}
onRenderCell={this._onRenderMessageCell} />
</div> </div>
);
}
}
sample output json
"@odata.etag": "W/\"CQAAABYAAAAiIsqMbYjsT5e/T7KzowPTAAIgRSJV\"",
"id": "AAMkAGVmMDEzMTM4LTZmYWUtNDdkNC1hMDZiLTU1OGY5OTZhYmY4OABGAAAAAAAiQ8W967B7TKBjgx9rVEURBwAiIsqMbYjsT5e-T7KzowPTAAAAAAEMAAAiIsqMbYjsT5e-T7KzowPTAAIgOnGGAAA=",
"createdDateTime": "2019-11-04T16:12:46Z",
"lastModifiedDateTime": "2019-11-04T16:12:47Z",
"changeKey": "CQAAABYAAAAiIsqMbYjsT5e/T7KzowPTAAIgRSJV",
"categories": [],
"receivedDateTime": "2019-11-04T16:12:47Z",
"sentDateTime": "2019-11-04T16:12:47Z",
"hasAttachments": false,
"internetMessageId": "<BYAPR15MB24233E7FD916D83C860BA3B0CD7F0@BYAPR15MB2423.namprd15.prod.outlook.com>",
"subject": "MyAnalytics | Focus Edition",
"bodyPreview": "MyAnalytics\r\n\r\nDiscover your habits. Work smarter.\r\n\r\nFor your eyes only\r\n\r\nLearn more >\r\n\r\n\r\n\r\n\r\nWant focus time every day?\r\n\r\nMyAnalytics can help you schedule time for distraction-free deep work every day.\r\n\r\n\r\nLearn more\r\n\r\nYour month in review: Focus",
"importance": "normal",
"parentFolderId": "AAMkAGVmMDEzMTM4LTZmYWUtNDdkNC1hMDZiLTU1OGY5OTZhYmY4OAAuAAAAAAAiQ8W967B7TKBjgx9rVEURAQAiIsqMbYjsT5e-T7KzowPTAAAAAAEMAAA=",
"conversationId": "AAQkAGVmMDEzMTM4LTZmYWUtNDdkNC1hMDZiLTU1OGY5OTZhYmY4OAAQAFMRLf1C8ZxIlmEw6EI8PoI=",
"conversationIndex": "AQHVkyqyUxEt/ULxnEiWYTDoQjw+gg==",
"isDeliveryReceiptRequested": false,
"isReadReceiptRequested": false,
"isRead": false,
"isDraft": false,
"webLink": "https://outlook.office365.com/owa/?ItemID=AAMkAGVmMDEzMTM4LTZmYWUtNDdkNC1hMDZiLTU1OGY5OTZhYmY4OABGAAAAAAAiQ8W967B7TKBjgx9rVEURBwAiIsqMbYjsT5e%2FT7KzowPTAAAAAAEMAAAiIsqMbYjsT5e%2FT7KzowPTAAIgOnGGAAA%3D&exvsurl=1&viewmodel=ReadMessageItem",
"inferenceClassification": "other",
"body": {
"contentType": "html",
"content":"<html></html>"
},
"sender": {
"emailAddress": {
"name": "MyAnalytics",
"address": "[email protected]"
}
},
"from": {
"emailAddress": {
"name": "MyAnalytics",
"address": "[email protected]"
}
},
"toRecipients": [
{
"emailAddress": {
"name": "Megan Bowen",
"address": "[email protected]"
}
}
],
"ccRecipients": [],
"bccRecipients": [],
"replyTo": [],
"flag": {
"flagStatus": "notFlagged"
}
Available Parameters are top,select,expand,filter,delete,post,get,orderby,update,skip etc...
Permissions
| Permission type |
Permissions (from least to most privileged) |
| Delegated (work or school account) |
Mail.ReadBasic, Mail.Read, Mail.ReadWrite |
| Delegated (personal Microsoft account) |
Mail.ReadBasic, Mail.Read, Mail.ReadWrite |
| Application |
Mail.ReadBasic.All, Mail.Read, Mail.ReadWrite |
Request headers
| Name |
Type |
Description |
| Authorization |
string |
Bearer {token}. Required. |
| Prefer: outlook.body-content-type |
string |
The format of the body and uniqueBody properties to be returned in. Values can be "text" or "html". If the header is not specified, the body and uniqueBody properties are returned in HTML format. Optional. |
Request body
Do not supply a request body for this method.
Response
If successful, this method returns a 200 OK response code and collection of Message objects in the response body.
Deploy the SPFx Package to SharePoint App Catalog
Follow below steps to deploy the SPFx package (.sppkg) to SharePoint app catalog.
Build minified assets
On the command prompt, type the below command.
gulp bundle --ship
Prepare the package
On the command prompt, type the below command.
gulp package-solution --ship
The .sppkg package will be available inside the “sharepoint\solution” folder.
Upload package to the app catalog
Open the SharePoint app catalog site.
Upload the package to the app catalog.in the popup click deploy button
API Management
After deploying the web part, follow the below steps to approve API requests.
- Open SharePoint Admin Center (https://[tenant]-admin.sharepoint.com).
- From left navigation, click “API Management”.
- Approve the pending requests.
through Powershell
Pending requests
Get-SPOTenantServicePrincipalPermissionRequests
For deny
Deny-SPOTenantServicePrincipalPermissionRequest -RequestId <Guid>
For approve
Approve-SPOTenantServicePrincipalPermissionRequest -RequestId <Guid>
Note
If you are getting an unexpected exception when trying to approve the permission ([HTTP]:400 - [CorrelationId]), update the resource attribute in your package-solution.json to use the value Microsoft.Azure.AgregatorService rather than Microsoft Graph, Reject the existing request and update the solution package in the app catalog with the update value.
For Playing with Graph API Visit here.
For permissions visit here.
Happy Coding :)