SharePoint Framework ソリューションの Microsoft Graph Toolkit

SharePoint Framework ソリューションで Microsoft Graph Toolkit を使用します。

重要

パッケージは @microsoft/mgt-spfx 廃止されました。 SharePoint Framework Web パーツのあいまいさを解消します。

インストール

ライブラリから Microsoft Graph Toolkit コンポーネントを読み込むには、ランタイム依存関係として 、@microsoft/mgt-components、および @microsoft/mgt-sharepoint-provider パッケージをSharePoint Framework プロジェクトに追加@microsoft/mgt-elementします。

npm install @microsoft/mgt-element @microsoft/mgt-components @microsoft/mgt-sharepoint-provider

または

yarn add @microsoft/mgt-element @microsoft/mgt-components @microsoft/mgt-sharepoint-provider

使用方法

Web パーツと拡張機能SharePoint Frameworkビルドするときは、 と @microsoft/mgt-sharepoint-providerから Microsoft Graph Toolkit customElementsHelper、、Providerおよび SharePointProvider を@microsoft/mgt-element参照します。 Reactを使用していない場合は、パッケージから@microsoft/mgt-componentsコンポーネント登録関数もインポートする必要があります。

非Reactベースのソリューションの場合

import { customElementsHelper, Providers } from '@microsoft/mgt-element';
import { SharePointProvider } from "@microsoft/mgt-sharepoint-provider";
import { registerMgtPersonComponent } from '@microsoft/mgt-components';

// [...] trimmed for brevity

export default class MgtWebPart extends BaseClientSideWebPart<IMgtWebPartProps> {
  protected async onInit() {
    if (!Providers.globalProvider) {
      Providers.globalProvider = new SharePointProvider(this.context);
    }
    customElementsHelper.withDisambigutaion('contoso-hr-solution');
    registerMgtPersonComponent();
  }

  public render(): void {
    this.domElement.innerHTML = `
      <div>
        <mgt-contoso-hr-solution-person person-query="me"></mgt-person>
      </div>`;
  }

  // [...] trimmed for brevity
}

React

Reactを使用して Web パーツを構築する場合は、パッケージを@microsoft/mgt-react使用して、コンポーネントの手動登録をスキップできます。 ただし、あいまいさを解消するために、React コンポーネントを Web パーツから遅延読み込みしていることを確認してください。

// [...] trimmed for brevity
import { Providers, customElementHelper } from "@microsoft/mgt-element";
import { SharePointProvider } from "@microsoft/mgt-sharepoint-provider";
import { lazyLoadComponent } from "@microsoft/mgt-spfx-utils";


// Async import of component that imports the React Components
const MgtReact = React.lazy(
  () =>
    import(/* webpackChunkName: 'mgt-react-component' */ "./components/MgtReact")
);

// set the disambiguation before initializing any web part
customElementHelper.withDisambiguation("mgt-demo-client-side-solution");

export default class MgtDemoWebPart extends BaseClientSideWebPart<IMgtDemoWebPartProps> {
  // set the global provider
  protected async onInit(): Promise<void> {
    if (!Providers.globalProvider) {
      Providers.globalProvider = new SharePointProvider(this.context);
    }
    return super.onInit();
  }

  public render(): void {
    const element = lazyLoadComponent(MgtReact, {
      description: this.properties.description
    });

    ReactDom.render(element, this.domElement);
  }
// [...] trimmed for brevity
}

基になるReact コンポーネントでは、Microsoft Graph Toolkit コンポーネントを直接使用できます。

import { Person } from '@microsoft/mgt-react';
import { ViewType } from '@microsoft/mgt-components';

// [...] trimmed for brevity

export default class MgtReact extends React.Component<IMgtReactProps, {}> {
  public render(): React.ReactElement<IMgtReactProps> {
    return (
      <div className={ styles.mgtReact }>
        <Person personQuery="me" view={ViewType.image}></Person>
      </div>
    );
  }
}

重要

ルート Web パーツ クラスが から @microsoft/mgt-reactMicrosoft Graph Toolkit リソースをインポートしていないことを確認します。 これらは、遅延読み込みReactコンポーネント内にのみインポートする必要があります。

Webpack を構成する

Web パーツをビルドするには、追加の Babel 変換を使用して、省略可能なチェーンと nullish 結合を使用して最新の JavaScript を正しく処理するように、SharePoint Framework webpack 構成を更新する必要があります。

![重要]最新の JavaScript を処理するように Webpack を構成しない場合、Microsoft Graph Toolkit を使用する Web パーツを構築することはできません。

Babel パッケージをインストールする

ES2021 ベースのコードを出力する依存関係を正しく処理するには、babel ローダーといくつかの変換を開発依存関係としてプロジェクトに追加します。

npm i --save-dev babel-loader@8.3.0 @babel/plugin-transform-optional-chaining @babel/plugin-transform-nullish-coalescing-operator @babel/plugin-transform-logical-assignment-operators

Webpack 構成を変更する

SharePoint Frameworkは、Web パーツのバンドルに使用される Webpack 構成を変更するための機能拡張モデルを提供します。 を見つけて開きます gulpfile.js。 を含む行の上に次のコードを build.initialize(require('gulp'));追加します。

const path = require("path");
const litFolders = [
  `node_modules${path.sep}lit${path.sep}`,
  `node_modules${path.sep}@lit${path.sep}`,
  `node_modules${path.sep}lit-html${path.sep}`
];
build.configureWebpack.mergeConfig({
  additionalConfiguration: generatedConfiguration => {
    generatedConfiguration.module.rules.push({
      test: /\.js$/,
      // only run on lit packages
      include: resourcePath => 
        litFolders.some(litFolder => resourcePath.includes(litFolder)),
      use: {
        loader: 'babel-loader',
        options: {
          plugins: [
            '@babel/plugin-transform-optional-chaining',
            '@babel/plugin-transform-nullish-coalescing-operator',
            '@babel/plugin-transform-logical-assignment-operators'
          ]
        }
      }
    });
    return generatedConfiguration;
  }
});

関連コンテンツ

• Microsoft Graph ツールキットを使用して SharePoint Web パーツを構築する
• 認証プロバイダーについて学習する
• Microsoft Graph Toolkit コンポーネントのあいまいさの解消