【SPFx】PnPjsを利用

開発環境

VSCode
Node: v18.20.8
spfx: 1.20.2
@pnp/sp: 4.12.0

PnPjsをインストールと設定

PnPjsをインストール

Webパーツのソリューションを開き次のコマンドを実行し必要なモジュールをインストールする

npm install @pnp/logging @pnp/sp --save

PnPjsの設定

PnPjsのプロジェクト構成ファイルを作成

次のフォルダの中にpnpjsConfig.tsという名前のファイルを作成
.\src\webparts\[Webパーツ]

PnPjsの初期処理を記述

import { WebPartContext } from "@microsoft/sp-webpart-base";

import { spfi, SPFI, SPFx } from "@pnp/sp";
import { LogLevel, PnPLogging } from "@pnp/logging";
// import "@pnp/sp/webs";
// import "@pnp/sp/lists";
// import "@pnp/sp/items";
// import "@pnp/sp/batching";

let _sp: SPFI | null = null;

export const getSP = (context?: WebPartContext): SPFI => {
    if (_sp === null && context != null) {
        _sp = spfi().using(SPFx(context)).using(PnPLogging(LogLevel.Warning));
    }
    return _sp!;
};

PnPjsのセットアップ

@pnp/spライブラリがRESTリクエストを作成するためにURLを設定する必要がある。
その設定をSPFxのフレームワークによって提供されるコンテキストオブジェクトを設定する。

.\src\webparts\[Webパーツ][Webパーツ]WebPart.tsを開く
インポートステートメントを追加
```
import { getSP } from "./pnpjsConfig";
```

onInit()メソッドに処理を追加

protected onInit(): Promise<void> {
    getSP(this.context);    // ※ 追加

    return this._getEnvironmentMessage().then(message => {
        this._environmentMessage = message;
    });
}

実際にコンポーネントで利用する

インポートステートメントを追加

メンバ変数とコンストラクタでインスタンスを取得

private _sp: SPFI;      // ※追加

constructor(props: IPnPjsExampleProps) {
    super(props);
    // set initial state
    this.state = {
        items: [],
        errors: []
    };
    this._sp = getSP();     // ※追加
}