Getting Started with PnPjs

PnPjs is a powerful library that simplifies working with the Microsoft SharePoint Framework (SPFx) and other Microsoft 365 services. It provides a fluent, easy-to-use API to interact with SharePoint and Microsoft Graph. This article will guide you through the process of getting started with PnPjs, from installation to making your first API calls.

What is PnPjs?

PnPjs (Patterns and Practices JavaScript) is a collection of libraries designed to help developers interact with Microsoft cloud services. The library abstracts the complexities of REST API calls, making it easier to perform common operations such as CRUD (Create, Read, Update, Delete) operations on SharePoint lists, libraries, and sites.

Prerequisites

Before you start using PnPjs, ensure that you have the following:

1. Node.js installed on your machine (version 14.x or later recommended).
2. SharePoint Framework (SPFx) installed. You can install SPFx by following the official guide.

Installation

To use PnPjs in your SPFx project, follow these steps:

1. Create a new SPFx project if you haven’t already. You can do this using the Yeoman generator:

   yo @microsoft/sharepoint

2. Navigate to your project directory:

   cd your-project-name

3. Install PnPjs using npm:

   npm install @pnp/sp @pnp/nodejs

If you’re working in a SharePoint Online context, you may also want to install the following packages:

   npm install @pnp/graph @pnp/spfx-controls-react

4. Build your project to ensure all dependencies are properly set up:

   gulp build

Using PnPjs

After installing PnPjs, you can start using it in your SPFx components. Here’s a simple example of how to use PnPjs to retrieve a SharePoint list and its items.

1. Import the necessary modules in your component file:

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

2. Initialize PnPjs in the onInit method of your component:

   protected onInit(): Promise<void> {
       sp.setup({
           spfxContext: this.context
       });
       return super.onInit();
   }

3. Retrieve list items using PnPjs. Here’s an example of how to fetch items from a list called “MyList”:

   public async getListItems() {
       try {
           const items = await sp.web.lists.getByTitle("MyList").items();
           console.log(items);
       } catch (error) {
           console.error("Error retrieving list items:", error);
       }
   }

4. Call the getListItems method at the appropriate place in your component (e.g., in the componentDidMount lifecycle method).

Working with Microsoft Graph

If you need to interact with Microsoft Graph, PnPjs provides a similar approach. First, make sure you have installed the @pnp/graph package as mentioned above.

1. Import the Graph module:

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

2. Retrieve user information using Microsoft Graph:

   public async getUserInfo() {
       try {
           const user = await graph.me.get();
           console.log(user);
       } catch (error) {
           console.error("Error retrieving user information:", error);
       }
   }

Conclusion

PnPjs makes it easy to work with SharePoint and Microsoft Graph by providing a straightforward API. With just a few steps, you can set up your environment, install PnPjs, and start making API calls. Whether you’re retrieving SharePoint list items or accessing Microsoft Graph, PnPjs can streamline your development process.

For more detailed documentation and advanced usage, visit the PnPjs documentation.

Summary of Commands

• Install PnPjs: npm install @pnp/sp @pnp/nodejs
• Initialize PnPjs in SPFx:

sp.setup({
    spfxContext: this.context
});

• Retrieve SharePoint list items:

const items = await sp.web.lists.getByTitle("MyList").items();

• Retrieve user information from Microsoft Graph:

const user = await graph.me.get();