如何在SPFx项目中为Graph Toolkit请求设置自定义请求头

问题场景 #

在SPFx项目Web Part的onInit方法中尝试为Graph请求添加X-PeopleQuery-QuerySources自定义请求头，但由于Client接口变更（原initWithMiddleware方法调整后需通过中间件管道实现全局请求头注入），原代码并未生效，原代码如下：

protected onInit(): Promise {
let provider = new SharePointProvider(this.context);

const client = Client.init();
    client.api("v1.0").headers['X-PeopleQuery-QuerySources'] = 'Mailbox,Directory';
    provider.graph = new Graph(client as any);

    Providers.globalProvider = provider;


    return super.onInit();
}

可行实现方式 #

通过自定义中间件注入全局请求头，确保所有Graph请求都携带该头部，具体步骤如下：

1. 确保导入所需模块：

import { Graph, Client, MiddlewareFactory } from '@microsoft/microsoft-graph-client';
import { SharePointProvider, Providers } from '@microsoft/sp-http';

2. 修改onInit方法，构建包含自定义头部中间件的Graph客户端：

protected async onInit(): Promise<void> {
  const provider = new SharePointProvider(this.context);

  // 定义自定义中间件，用于注入请求头
  const customHeaderMiddleware = {
    async execute(context: any): Promise<void> {
      // 为所有Graph请求添加指定自定义头部
      context.requestHeaders.set('X-PeopleQuery-QuerySources', 'Mailbox,Directory');
      // 执行后续中间件
      await context.next();
    }
  };

  // 获取默认中间件管道，并将自定义中间件加入管道头部
  const middlewarePipeline = MiddlewareFactory.getDefaultMiddlewareChain(provider.tokenProvider);
  middlewarePipeline.unshift(customHeaderMiddleware);

  // 使用包含自定义中间件的管道初始化Graph客户端
  const client = Client.initWithMiddleware({
    middleware: middlewarePipeline
  });

  provider.graph = new Graph(client);
  Providers.globalProvider = provider;

  return super.onInit();
}

原代码失效原因 #

原代码中client.api("v1.0").headers仅针对单个请求实例设置头部，无法全局生效；且直接替换provider.graph的方式未正确绑定全局请求的中间件管道，导致自定义头无法被应用到所有Graph请求中。

内容的提问来源于stack exchange，提问作者Hilton Giesenow