Using MS Graph from SharePoint Framework 1.5.1 / 1.6

Question

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

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"
    }
  }]
}

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:

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.

Answer 1

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

Answer 2

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.