How to send custom headers to graph api when using person component

[Tanmay2711]

In my project few team members are not able to view data of specific user. when checked documentation below , come to know that graph returns record as per user's relevance.
https://docs.microsoft.com/en-us/graph/people-example
we are using react single page application and we are using
below import statements -
import {Person, People} from '@microsoft/mgt-react';

<Person
			className="customPersonCard"
			**personQuery={personData.person.emailAddress}**
			showPresence={showPresence}
			view={personData.viewType || defaultProps.personData.viewType}
			personCardInteraction={PersonCardInteraction.hover}
		>

as per the documentation above if we send header - "X-PeopleQuery-QuerySources: Mailbox,Directory” then this issue will not come. Also when we checked with team members facing this issue - if they call graph with url (which Person component send)
using MS Graph explorer and setting this header mentioned then they gets the data, but if we dont set this header then we dont get any data (only for those specific user when querying data for other specific users in organization.)

[ghost]

Hello Tanmay2711, thank you for opening an issue with us!

I have automatically added a "needs triage" label to help get things started. Our team will analyze and investigate the issue, and escalate it to the relevant team if possible. Other community members may also look into the issue and provide feedback 🙌

[vogtn]

@Tanmay2711

This isn't currently available on a per-component basis. We have an open issue to implement similar functionality to our mgt-get component. I think this would be a good idea to implement as well, I'll bring this to the team to see if we can reprioritize.

If you're comfortable with overriding the graph client for the application, something like the following might work in the meantime:

import * as microsoftTeams from "@microsoft/teams-js";
import {Providers, TeamsProvider, Graph} from '@microsoft/mgt';
import {Client} from '@microsoft/microsoft-graph-client'

TeamsProvider.microsoftTeamsLib = microsoftTeams;

const config = {
    clientId: '<CLIENT_ID>',
    authPopupUrl: '/auth'
}

const provider = new TeamsProvider(config);
const options = {
    authProvider: provider,
    fetchOptions: { headers: {'X-PeopleQuery-QuerySources':'Mailbox,Directory'}}
};     

const client = Client.initWithMiddleware(options);
provider.graph = new Graph(client);

Providers.globalProvider = provider;

[Tanmay2711]

Thank you @vogtn. Actually I forgot to mentioned that we are using MSAL 2.0 provider. I added changes with MSAL provider and its working fine. I see header is now passed in request. I have asked my peers to see if their issue will be resolved when accessing specific user's teams data (due to relevance)

code -
const scopes = [
'user.read',
'user.read.all',
'Presence.Read',
'Presence.Read.All',
'people.read',
'contacts.read',
'sites.read.all',
'Mail.ReadBasic',
'people.read.all'
];

		const provider = new MsalProvider({
			clientId: config.auth.clientId,
			authority: config.auth.authority,
			scopes: scopes,
			cache: {
				cacheLocation: config.cache.cacheLocation
			},
			loginHint: account.username
		});

		const options = {
			authProvider: provider,
			fetchOptions: {headers: {'X-PeopleQuery-QuerySources': 'Mailbox,Directory'}}
		};

		const client = Client.initWithMiddleware(options);
		provider.graph = new Graph(client);

		Providers.globalProvider = provider;
		Providers.globalProvider.setState(ProviderState.SignedIn);

[Tanmay2711]

@vogtn - Thank you, issues my teammates are resolved with this fix. we can close this issue, but it will be good to have passing headers directly to component instead of needing to override default graph client in global provider.

[vogtn]

@Tanmay2711

Glad it worked and thanks for the code snippet 😃. I'll pass this along so we can reprioritize and handle this once we have availability.