How to call graph API to read SP list items from SPFx in SP Online?

Question

I'm new to graph api and trying to use graph api to read sp list items from a custom list using the current user's rights (not service account). But i'm getting an error. I have this so far

in the package-solution.json file, I have this in the solution object

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

In the helloworld.ts file I have this to init the graph api connection

public async render(): Promise<void> {
const element: React.ReactElement<IHelloWorldProps> = React.createElement(
  HelloWorld,
  {
    description: this.properties.description,
    client: await this.context.msGraphClientFactory.getClient()
  }
);

ReactDom.render(element, this.domElement);
}

  public onInit(): Promise<void> {
    graph.setup({
      spfxContext: this.context
    });

  return super.onInit();
}

and in the helloworld.tsx file I have this

let items = await props.client.api('/sites/TestSite/lists(\'MyFeatures\')/items').get();
console.log(items);

But I see this error in the dev tools console

Uncaught (in promise) Error: To view the information on this page, ask a global or SharePoint admin in your organization to go to the API management page in the new SharePoint admin center.
    at e.getToken (chunk.aadTokenProvider_none_3888c2e89a4ae65276c0.js:1)
    at sp-webpart-workbench-assembly_en-us_6db5d03d6aef1b7d63505cff87b165b2.js:65

I haven't done anything on the administrative side to create any api registration or approve anything. I was wondering do I need to do that, and if so, is there a tutorial for how to set it up? And is there anything more in the code I need to adjust like add a client id/secret or something?

EDIT

I added the web part to the app catalogue and it told me to approve it from the API management centre. However when I went there, there was nothing listed in pending or approved. And it says there is an error Could not retrieve Global Service Principal ID Error: Error: {}. Researching that I found this https://eschrader.com/2020/06/23/sharepoint-online-bad-service-principal-breaks-sharepoint-admin-api-access-global-service-principal-id-error-resolved/ Do I need to do this?

Also I found the command Enable-SPOTenantServicePrincipal. Do I need to enable this for the SharePoint Online Client Extensibility service principal? Is this needed to be enabled for the SPFx webparts to use graph api?

Answer 1

Hi @RS ,

Yes, the command Enable-SPOTenantServicePrincipal is needed to enable developers to use graph api. You could refer to this article(in the end): https://learn.microsoft.com/en-us/sharepoint/dev/spfx/use-aadhttpclient

---

If an Answer is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.