Can someone, please help me with figuring out how to use MSGraphClient from the latest SPFx version? MSGraphClient is supposed to help us to use MS Graph. My problem is that as soon as I add the line below - the web part stops rendering any content. It just shows blank space. If I press F12 - there are no errors, only warnings, but I don't know if they are relevant. I also get a ton of warnings even if webpart works fine. The only difference I can see in the console is this warning: unreachable code after return statement[Learn More] tokenfactoryiframe_b6644a.js:formatted:5557

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

enter image description here

enter image description here

Procedure used to deploy SPFx web part:

  • gulp bundle --ship
  • gulp package-solution --ship
  • move .sppkg file to the app catalog
  • approve the app
  • Approve permissions that the app requests in the central admin, in the API management page (using modern design)

I'm using "Targeted release for everyone" for the tenant.

versions

  • npm: 6.2.0
  • nodejs: 8.11.3
  • sfpx (@microsoft/generator-sharepoint): 1.5.1

package.json:

{
  "name": "graph",
  "version": "0.0.1",
  "private": true,
  "engines": {
    "node": ">=0.10.0"
  },
  "scripts": {
    "build": "gulp bundle",
    "clean": "gulp clean",
    "test": "gulp test"
  },
  "dependencies": {
    "react": "15.6.2",
    "react-dom": "15.6.2",
    "@types/react": "15.6.6",
    "@types/react-dom": "15.5.6",
    "@microsoft/sp-core-library": "1.5.1",
    "@microsoft/sp-webpart-base": "1.5.1",
    "@microsoft/sp-lodash-subset": "1.5.1",
    "@microsoft/sp-office-ui-fabric-core": "1.5.1",
    "@types/webpack-env": "1.13.1",
    "@types/es6-promise": "0.0.33"
  },
  "devDependencies": {
    "@microsoft/sp-build-web": "1.5.1",
    "@microsoft/sp-module-interfaces": "1.5.1",
    "@microsoft/sp-webpart-workbench": "1.5.1",
    "@types/chai": "3.4.34",
    "@types/mocha": "2.2.38",
    "ajv": "~5.2.2",
    "gulp": "~3.9.1",
    "tslint-config-prettier": "^1.14.0",
    "tslint-react": "^3.6.0"
  }
}

PeopleGraph.tsx

import { MSGraphClient } from '@microsoft/sp-client-preview';
import { escape } from '@microsoft/sp-lodash-subset';
import * as React from 'react';
import { IPeopleGraphProps } from './IPeopleGraphProps';
import styles from './PeopleGraph.module.scss';
export default class PeopleGraph extends React.Component<IPeopleGraphProps, {}> {
  public render(): React.ReactElement<IPeopleGraphProps> {

    // IF THIS LINE IS USED - WEB PART IS NOT RENDERED:
    // IF IT'S COMMENTED OUT - WEB PART RENDERS JUST FINE:
    const client:MSGraphClient = this.context.serviceScope.consume(MSGraphClient.serviceKey);


    return (
      <div className={ styles.peopleGraph }>
        <div className={ styles.container }>
          <div className={ styles.row }>
            <div className={ styles.column }>
              <span className={ styles.title }>Graph API test</span>
              <p className={ styles.description }>{escape(this.props.description)}</p>

            </div>
          </div>
        </div>
      </div>
    );
  }
}

package-solution.json

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
  "solution": {
    "name": "graph-client-side-solution",
    "id": "6963f50a-1c8a-4123-b5ed-9bb6c1ae23d8",
    "version": "1.0.0.0",
    "includeClientSideAssets": true,
    "skipFeatureDeployment": true,
    "webApiPermissionRequests": [
      {
        "resource": "Microsoft Graph",
        "scope": "Calendars.Read"
      }
    ]
  },
  "paths": {
    "zippedPackage": "solution/graph.sppkg"
  }
}

PeopleGraphWebPart.manifest.json

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
  "id": "39814767-90d9-4448-bd92-d20f7ae335bc",
  "alias": "PeopleGraphWebPart",
  "componentType": "WebPart",
  "version": "*",
  "manifestVersion": 2,
  "requiresCustomScript": false,
  "preconfiguredEntries": [{
    "groupId": "5c03119e-3074-46fd-976b-c60198311f70",
    "group": { "default": "Other" },
    "title": { "default": "PeopleGraph" },
    "description": { "default": "PeopleGraph description" },
    "officeFabricIconFontName": "Page",
    "properties": {
      "description": "PeopleGraph"
    }
  }]
}

enter image description here

Update

  • Removed node_modules
  • Updates package.json to include -plusbeta
  • run npm install
  • run gulp bundle --ship and gulp package-solution --ship again
  • re-upploaded the .sppkg file

Results: I had some progress! Now the browser console was throwing this error:

Refused to display 'https://login.microsoftonline.com/common/oauth2/authorize?response_type=id_token&client_id=90bee1f7-5e6e-4d8a-9f3d-ecd601259da7&redirect_uri=https%3A%2F%2Fwebshell.suite.office.com%2Fiframe%2FTokenFactoryIframe&state=bb4e8feb-5ee6-472d-acbd-cfed338eae5d&client-request-id=251a4930-9313-4b10-b889-b05f0561f0b3&x-client-SKU=Js&x-client-Ver=1.0.15&nonce=a714d6e5-696b-4058-bd89-5cd421b30576' in a frame because it set 'X-Frame-Options' to 'deny'.

So automatic sign-in via the iFrame didn't work. Then decided to "help" the graph by opening the URL mentioned in the error above myself. As a result the error went away, but there is still nothing rendered on the page and I have a ton of new errors now.

I'm attaching the screenshot so that you can get the idea:

enter image description here

Update 2

  • Run yo @microsoft/sharepoint --plusbeta
  • gulp bundle --ship
  • gulp package-solution --ship
  • deployed the package
  • result: No difference. Same issue. The web part does not render.

Update 3 I have installed SPFx 1.6 and I have exactly the same issues. Could not make it work for the life of me.

MSGraph is currently in preview. The necessary package for that is available only if you include the --plusbeta parameter during the creation of the solution when you start your yeoman generator.

So, for the existing solution, delete your node_modules solution, modify your package.json as below and run the npm i command again :

{
  "name": "graph",
  "version": "0.0.1",
  "private": true,
  "engines": {
    "node": ">=0.10.0"
  },
  "scripts": {
    "build": "gulp bundle",
    "clean": "gulp clean",
    "test": "gulp test"
  },
  "dependencies": {
    "react": "15.6.2",
    "react-dom": "15.6.2",
    "@types/react": "15.6.6",
    "@types/react-dom": "15.5.6",
    "@microsoft/sp-core-library": "1.5.1-plusbeta",
    "@microsoft/sp-lodash-subset": "1.5.1-plusbeta",
    "@microsoft/sp-office-ui-fabric-core": "1.5.1-plusbeta",
    "@microsoft/sp-webpart-base": "1.5.1-plusbeta",
    "@types/webpack-env": "1.13.1",
    "@types/es6-promise": "0.0.33"
  },
  "devDependencies": {
    "@microsoft/sp-build-web": "1.5.1-plusbeta",
    "@microsoft/sp-module-interfaces": "1.5.1-plusbeta",
    "@microsoft/sp-webpart-workbench": "1.5.1-plusbeta",
    "@types/chai": "3.4.34",
    "@types/mocha": "2.2.38",
    "ajv": "~5.2.2",
    "gulp": "~3.9.1",
    "tslint-config-prettier": "^1.14.0",
    "tslint-react": "^3.6.0"
  }
}

Also, next time you create a SPFx solution, pass the --plusbeta flag as below and then create your solution:

yo @microsoft/sharepoint --plusbeta

Since SPFx 1.5, these changes have been added. To use the preview packages, we need to use plusbeta flag.

Reference - Announcing SharePoint Framework version 1.5: new tools and a beta preview

Use MSGraphClient

  • 1
    any luck @denis ? did you try the above changes or code ? – Gautam Sheth Jul 24 at 16:57
  • Sorry for the delay, @Gautam Sheth. And thank you for your help. I've only managed to test it about 2 hours ago. I definitely had some progress. At least I saw a new error message about an iframe and a bunch of other errors I don't yet understand. I've updated the questions with the results. – Denis Molodtsov Jul 24 at 22:59
  • 1
    As mentioned in the answer, MSGraph client is still in preview mode. I tried it in a tenant where we set Targeted release for all users and another test in a Microsoft demo tenant where it works. It is still not supported in standard tenant or targeted release for specific users. Would suggest that you check the release mode of the tenant. Also, can you try with creating a new solution and checking that out ? These errors dont make sense as they are bunch of 404 and seem to mostly MS errors – Gautam Sheth Jul 25 at 5:32
  • 1
    ok, in that case your browser might be blocking it. In Chrome, there might be a popup image like this, click on allow popups and then you will get through. Now your errors kinda make sense because the browser itself is blocking these requests – Gautam Sheth Jul 26 at 4:46
  • 1
    If its not a big deal, you can try this on a new dev tenant with first release all users. Also, if your org is a Microsoft partner, you can create demo tenants which will be always ahead of the usual release curve. The thing is this code works in my multiple envs but all of there are in first release or are MS tenants ! I also tried with the sp starter kit which has a lot of webparts using MS Graph client and it works perfectly fine :) – Gautam Sheth Jul 31 at 13:57
up vote 1 down vote accepted

The issue was quite stupid and the solution simple.

The problem was that I was relying on this.context. and this.context is null (does not exist) inside react components.

All the code I was using was meant to be used inside webpart's file.

Correct placement of the code:

class GraphTestWebPart extends BaseClientSideWebPart<IGraphTestWebPartProps>
// this.context exist here 

Wrong placement:

class GraphTest extends React.Component<IGraphTestProps, {}>
// this.context is null here

All in all the issue was related my misunderstanding of SPFx. It's not related to Graph. Graph API works like a charm now. I'm really excited about finally using it.

  • 1
    You could pass the context from the webpart to your react component as properties and then do this.props.context in the component to reference it. – Vardhaman Deshpande Sep 12 at 14:31
  • yes, agree. Good point! – Denis Molodtsov Sep 12 at 15:18

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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