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.


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.)


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(
        description: this.properties.description,
        ctx: this.context

    ReactDom.render(element, this.domElement); 

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

  • hello Sergei, Thank you for your input. The component 'MyComp' is in this case the app's main component. What I'm interested in is accessing the context within a child component of MyComp, in this case. – Lachezar Stefanov Sep 17 '18 at 8:39
  • @LachezarStefanov you cannot get the context directly from your child component. You have to pass it from .ts file (Base) to your Main Component. Then you can use it or pass it to your child components through props. – Prakash Sep 17 '18 at 10:00
  • MyComp in my example is a child component. In this component you can access context via this.props.ctx. – Sergei Sergeev Sep 17 '18 at 10:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.