Optimize Microsoft Graph queries with the mgt-get component

  • 3 minutes

Microsoft Graph Toolkit provides various components that help you connect with specific Microsoft Graph queries directly in HTML, without any customization needed.

Let's say you want to display a group of people in your app. You can use the People component to handle calling Microsoft Graph.

Here's an example of using the People component in HTML:

<mgt-people></mgt-people>

The People component makes the following Microsoft Graph query:

GET /me/people

The output generated by the People component will look like the following:

A screenshot that shows how the Microsoft Graph Toolkit People component appears.

Suppose you want to get a user's e-mails by using the following Microsoft Graph API for Outlook query:

GET /me/messages

Although this functionality isn't one of the toolkit components, it's possible to consume any Microsoft Graph query to reach hundreds of different datasets available in Microsoft 365. By using the Get component, you can call any Microsoft Graph query to retrieve required data directly in HTML.

Here's an example of using the Get component:

<mgt-get></mgt-get>

You can add the following attributes to the <mgt-get> tag to define the type of Microsoft Graph query you want to make:

  • resource: The preferred Microsoft Graph API query for the request.
  • scopes: The required scopes for the request.
  • version: The Microsoft Graph API version for the request.

Unlike other components in Microsoft Graph Toolkit, the Get component doesn't provide any pre-built UI. You must configure a template that will be used to display the data.

In the next exercise, you'll learn how to use the Get component and display notebooks from OneNote for the signed-in user.