SPFx: Can you use WebPartContext in components different than the main one?

Question

I am trying to call Microsoft Graph from a component, different than the main one. As a first step I am declaring a variable for the MSGraphClient's serviceKey like this:

const graphClient: MSGraphClient = this.props.context.serviceScope.consume(MSGraphClient.serviceKey);

If I declare this variable within the main component, i.e. the one, initially rendered by the DefaultWebPart.ts file, then I'm able to make calls to the Microsoft Graph;

However, it's enough that I declare that variable on a component, different than the main one (I'm still importing the context like that: import { WebPartContext } from "@microsoft/sp-webpart-base"), but start getting the error message

'TypeError: Cannot read property 'serviceScope' of undefined'

as soon as the variable has been declared.

Answer 1

Are you passing the context down as part of props?

According to this other answer, this.context.pageContext is only available in the top level class/component that inherits from BaseClientSideWebPart, and in order to have it available in other lower level components, you need to pass the context down as part of props.

(Also see the other answer to that question that recommends strongly typing the context prop as WebPartContext instead of any. Good point, I think.)

Answer 2

You can pass it through the props:

In your other component define props interface:

export interface IProps {
  description: string;
  ctx: WebPartContext;
}

Declare your second component as

    export class MyComp extends React.Component<IProps,{}> { ....

In your "main" web part use:

const element: React.ReactElement<IProps> = React.createElement(
      MyComp,
      {
        description: this.properties.description,
        ctx: this.context
      }
    );

    ReactDom.render(element, this.domElement); 

In your new component, you can access context via this.props.ctx