Storing App Configuration in OneDrive with Microsoft Graph using an SPFx Web Part

Introduction

When building a SharePoint Framework web part, choosing where to store configuration can be surprisingly complex. SharePoint lists require provisioning, tenant properties can be restrictive, and hardcoded values aren’t maintainable nor a good practice. A cleaner alternative is to use Microsoft Graph—specifically the /me/drive/special/approot endpoint—to store configuration files in a secure, app-scoped folder within the current user’s OneDrive.

The /me/drive/special/approot path provides a dedicated storage location that’s automatically created and isolated to your Azure Entra ID app registration. This makes it ideal for storing JSON configuration for an SPFx web part without deploying additional infrastructure. In this post, we’ll look at how to configure permissions, access the endpoint from SPFx, and read/write configuration files using Microsoft Graph.

In order to demonstrate how to use this special Microsoft Graph endpoint, I’ve created a sample web part that you can find here. The sample will allow the user to specify the content of the configuration file and also offer the ability to save or load the configuration from the Graph API.

Visual appearance

Starting with the visual appearance of the solution, here you can see the web part:

The web part is composed of:

• Save Config: this button is used to save the input of the text field to the Graph API.
• Load Config: this button loads the configuration file from the Graph API.
• Text area: used to insert the value to be saved to the configuration file.

For example, it’s possible to specify the following JSON:

and saving it using the Save Config button. The user will receive a message confirming the operation success:

Sending the content of the file to the /me/drive/special/approot Graph endpoint will save a file in the following OneDrive folder:

The created file will look like the following:

The name of the file is defined in the web part code, it’s totally customizable and can be decided by the developer, in this sample it’s a JSON file.

Show me the code

I won’t cover all the web part’s code, if you are interested in digging the whole code you can check the full sample solution code here.

In detail, there’s a Graph service which is in charge of execute requests against the /me/drive/special/approot Graph endpoint.

First of all, to execute the requests, it’s needed to create a Graph client and to create it is enough to use the web part’s context:

private async getGraphClient(): Promise<MSGraphClientV3> {
    if (!this.graphClient) {
        this.graphClient = 
          await this.context
                .msGraphClientFactory
                .getClient("3");
    }
    return this.graphClient;
}

Once that the graphClient is available, it’s possible to interact with the Graph APIs.

To save the specified JSON there’s a specific uploadFile method. The interesting section of this method is the following:

await graphClient
  .api(
      `/me/drive/special/approot:/${encodeURIComponent(fileName)}:/content`,
  )
  .version("v1.0")
  .header("Content-Type", contentType)
  .put(content);

This will create a file with the specified fileName and the content as text.

The other operation, needed in this sample, is the one to read the content of the file from the endpoint. The interesting section of the readJsonFile method is the following:

await graphClient
  .api(
      `/me/drive/special/approot:/${encodeURIComponent(itemName)}:/content`,
  )
  .version("v1.0")
  .responseType(ResponseType.TEXT)
  .get();

This partial code retrieves the content of the file with the specific fileName.

Those are the most interesting code sections of this sample, if you’re interested in knowing more check out the full sample on GitHub.

Conclusions

The /me/drive/special/approot Graph endpoint is very useful when it comes to saving configuration for the current user, this is because it doesn’t need anything else such as a SharePoint list to store the user specific configuration.

Hope this helps!