Get started with PnPJS

PnPJS makes working with data on SharePoint simpler. This is how to set it up for use in an SPFx web part.

From the command line, use NPM to install the necessary packages:

npm i @pnp/logging @pnp/common @pnp/odata @pnp/sp

Once complete, make a reference in your code:

import { sp } from "@pnp/sp";

PnPJS is now all ready to use. Ready to query a list or library, try this example.

Warning SharePoint Developer!

I hit a problem when my solution was deployed. My PnPJS queries ran fine on a hosted workbench. They even worked when the web part was deployed on to a classic page. Unfortunately, things broke down when the web part was added to a modern page. The debug console in Chrome showed 404 file not found errors and digging a little deeper revealed the problem were the REST calls wrongly included 'SitePages' in the URL for the site on modern pages.

For example:

https://mytenant.sharepoint.com/sites/mysite/SitePages/_api/web/lists/getByTitle('myList')

Google search to the rescue after wading through a similar issue due to a bug back in 2017, the answer was to add this snippet to the class in your web part code (the .ts file generated by Yeoman):

public onInit(): Promise< void > { return super.onInit().then( _ => { setup( { spfxContext: this.contex } ); } ); }

Do you want to know more?

• The SharePoint Developer Community.

• PnPJS on GitHub.