How to Use PnPjs in SPFx to Query SharePoint List Columns

Overview

This article covers

1. Installing and setting up the latest version of PnPjs in your SharePoint Framework (SPFx) web part
2. Querying SharePoint list items using the new spfi and SPFx bindings
3. Code examples for all major SharePoint column types, including:
   • Text
   • Number
   • Choice
   • MultiChoice
   • Lookup
   • MultiLookup
   • Person or Group
   • Multi-Person or Group
   • DateTime
   • Yes/No (Boolean)
   • Hyperlink or Picture

Step 1. Install the Latest PnPjs Packages

Run the following inside your SPFx project folder:

npm install @pnp/sp @pnp/graph @pnp/nodejs --save

Step 2. Setup spfi and Context Binding

In your web part file (YourWebPart.ts):

import { spfi, SPFI } from "@pnp/sp";

import { SPFx } from "@pnp/sp/presets/all";

let sp: SPFI;

protected async onInit(): Promise<void> {

  await super.onInit();

  sp = spfi().using(SPFx(this.context));

}

This sets up a reusable PnPjs instance that is strongly typed and optimized for performance. You can now use this instance (sp) anywhere in your component to safely and efficiently interact with SharePoint data.

Step 3. Query SharePoint List Items with Column Type Examples

Interface for List Items

export interface IEmployee {
  Title: string;
  EmplD: number;
  Firstname: string;
  Lastname: string;
  Email: string;
  BusinessUnit: string;
  BusinessUnitDescp: string;
  DeptID: string;
  DeptDescription: string;
  EmpPosition: string;
  PositionTitle: string;
  EmpClass: string;
}

1. Text Fields

   const items = await sp.web.lists.getByTitle("Employee").items.select("Title", "Firstname", "Lastname")();
   
   items.forEach(i => console.log(i.Title, i.Firstname, i.Lastname));

2. Number Field

   const items = await sp.web.lists.getByTitle("Employee").items.select("EmplD")();
   
   items.forEach(i => console.log(i.EmplD));

3. Choice Field

   const items = await sp.web.lists.getByTitle("Employee").items.select("EmpClass")();
   
   items.forEach(i => console.log(i.EmpClass));

4. MultiChoice Field

   const items = await sp.web.lists.getByTitle("Employee").items.select("EmpSkills")();
   
   items.forEach(i => {
     console.log("Skills:", i.EmpSkills); // Returns string[]
   });

5. Lookup Field

   const items = await sp.web.lists.getByTitle("Employee").items
     .select("Department/Title")
     .expand("Department")();
   
   items.forEach(i => console.log(i.Department?.Title));

6. Person Field

   const items = await sp.web.lists.getByTitle("Employee").items
     .select("Manager/Title", "Manager/Email")
     .expand("Manager")();
   
   items.forEach(i => console.log(i.Manager?.Title, i.Manager?.Email));

7. DateTime Field

   const items = await sp.web.lists.getByTitle("Employee").items.select("JoiningDate")();
   
   items.forEach(i => {
     const date = new Date(i.JoiningDate);
     console.log(date.toLocaleDateString());
   });

8. Yes/No (Boolean) Field

   const items = await sp.web.lists.getByTitle("Employee").items.select("IsActive")();
   
   items.forEach(i => console.log(i.IsActive ? "Active" : "Inactive"));

9. Hyperlink or Picture Field

   const items = await sp.web.lists.getByTitle("Employee").items.select("ProfileLink")();
   
   items.forEach(i => {
     const link = i.ProfileLink;
     console.log(link?.Url, link?.Description);
   });

Conclusion

The latest version of PnPjs with spfi makes it clean and efficient to query SharePoint list data in SPFx. From basic text and number fields to complex person or multi-lookup fields — the modern API structure is modular, performant, and scalable.

In the next blog, we'll dive into how to create and update SharePoint list items using PnPjs, covering all column types, and how to properly structure your payloads for add() and update() operations.

Useful Resources

• 🔗 PnPjs Official Docs
• 🔗 SPFx Setup Guide