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

[rrrrr10]

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.../ 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?

[#2]

Hi, I was also having the "Could not retrieve Global Service Principal ID Error: Error: {}" on my tenant and the process described on the link that you shared solved the problem. This included deleting the problematic app registration and getting a new one created.

Regarding consuming the Graph API, there are many SPFx PnP web part samples that demonstrate this. Just search for "Graph" on the samples website: https://pnp.github.io/sp-dev-fx-webparts/

[#3]

@rrrrr10 As you are requesting for Sites.Read.All permissions in your web part, you have to approve this from SharePoint admin center --> API management.

Anyone else facing this issue can find more details about this in below thread:

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

---

Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.