Fetching the Outlook Task's Data into Webpart using Graph Api call

Question

I am using render function to make Graph Api call

I have created a function _outlookTask to fetch the outlook task's data

How to make Graph Api call with Selecting the HTTP method as GET and then, select beta as the API version in my function

public render(): void {
this.context.msGraphClientFactory
  .getClient()
.then((graphclient:MSGraphClient): void=>{
  graphclient
  .api('/me/outlook/tasks')
  .get((error,user:MicrosoftGraph.OutlookItem,rawResponse?:any)=>{
  this.domElement.innerHTML = `
 <div>
 <div id="spListContainer">
 </div>
  </div>`;
 this._OutlookTask(tasks.value)
})
 })

}

private _OutlookTask(tasks: MicrosoftGraph.Message[]): void {
let html: string = '';
for (let index = 0; index < tasks.length; index++) {
  html += `<p class="${styles.description}">Tasks Through Outlook  ${index + 1} - 
${escape(tasks[index].subject)}</p>`;
}

// Add the emails to the placeholder
const listContainer: Element = this.domElement.querySelector('#spListContainer');
listContainer.innerHTML = html;

}

Answer 1

We can use this code in the tyscript file

  public render(): void {
  this.context.msGraphClientFactory
  .getClient()
   .then((client: MSGraphClient): void => {
  // get information about the current user from the Microsoft Graph
  client
  .api('/me/outlook/tasks')
   .version('beta')
   .top(5)
   .get((error, messages: any, rawResponse?: any) => {

    this.domElement.innerHTML = `
    <div class="${ styles.container}">
      <div class="${ styles.row}">
        <div class="${ styles.column}">
          <span class="${ styles.title}">Welcome to SharePoint!</span>
          <p class="${ styles.subTitle}">Use Microsoft Graph in SharePoint Framework.</p>
          <div id="spListContainer" />
        </div>
      </div>
    </div>
    </div>`;

    // List the latest emails based on what we got from the Graph
    this._renderEmailList(messages.value);

  });
});
}

private _renderEmailList(messages: MicrosoftGraph.Message[]): void {
let html: string = '';
for (let index = 0; index < messages.length; index++) {
  html += `<p class="${styles.description}">OutlookTasks ${index + 1} - 
${escape(messages[index].subject)}</p>`;
}

// Add the emails to the placeholder
const listContainer: Element = this.domElement.querySelector('#spListContainer');
listContainer.innerHTML = html;
}

**In the config folder ,go to the package-solution.json update the code with the Web Api Permission to access the Graph API Add this piece of

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