graph-demo

Summary

SPFx Graph API Demo

This project demonstrates how to call Microsoft Graph API from an SPFx (SharePoint Framework) web part/extension using the MSGraphClientV3.

Features

• Uses msGraphClientFactory.getClient("3") to get a Graph client.
• Calls the Microsoft Graph /me endpoint.
• Logs the signed-in user's details (e.g., displayName) in the console.

Prerequisites

• SharePoint Online tenant.
• Admin access to SharePoint Admin Center.
• Node.js and SPFx development environment set up.

Code Example

protected async onInit(): Promise { await this.context.msGraphClientFactory .getClient("3") .then(async (client: MSGraphClientV3): Promise => { await client.api('/me') .get((error, response: any, rawResponse?: any) => { console.log("Graph API response: ", response); console.log(response.displayName); }); }); }

Configuration

1. Update package-solution.json

Add required Graph permissions. Example:

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

2. Build & Package Solution

• gulp bundle --ship
• gulp package-solution --ship

This will generate a .sppkg file in sharepoint/solution/.

3. Deploy to App Catalog

• Upload the .sppkg file to your SharePoint App Catalog.
• Deploy the package.

4. Approve Permissions

• Go to SharePoint Admin Center → Advanced → API access.
• Approve the requested Microsoft Graph permissions.

Testing

• it will show logged in user details in page also.
• Add the web part/extension to a SharePoint page.
• Open browser console (F12 → Console).
• You should see the Microsoft Graph response, including your user profile details: { "displayName": "John Doe", "id": "1234-5678-90", "mail": "[email protected]" } ✅ Now your Graph API demo is ready to use!

Used SharePoint Framework Version

Applies to

• SharePoint Framework
• Microsoft 365 tenant

Get your own free development tenant by subscribing to Microsoft 365 developer program

Prerequisites

Any special pre-requisites?

Solution

Solution	Author(s)
folder name	Author details (name, company, twitter alias with link)

Version history

Version	Date	Comments
1.1	March 10, 2021	Update comment
1.0	January 29, 2021	Initial release

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

---

Minimal Path to Awesome

• Clone this repository
• Ensure that you are at the solution folder
• in the command-line run:
  • npm install
  • gulp serve

Include any additional steps as needed.

Features

Description of the extension that expands upon high-level summary above.

This extension illustrates the following concepts:

• topic 1
• topic 2
• topic 3

Notice that better pictures and documentation will increase the sample usage and the value you are providing for others. Thanks for your submissions advance.

Share your web part with others through Microsoft 365 Patterns and Practices program to get visibility and exposure. More details on the community, open-source projects and other activities from http://aka.ms/m365pnp.

References

• Getting started with SharePoint Framework
• Building for Microsoft teams
• Use Microsoft Graph in your solution
• Publish SharePoint Framework applications to the Marketplace
• Microsoft 365 Patterns and Practices - Guidance, tooling, samples and open-source controls for your Microsoft 365 development