Overview

This article covers

Installing and setting up the latest version of PnPjs in your SharePoint Framework (SPFx) web part
Querying SharePoint list items using the new spfi and SPFx bindings
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 {

  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;
}

TypeScript

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));

Number Field

const items = await sp.web.lists.getByTitle("Employee").items.select("EmplD")();

items.forEach(i => console.log(i.EmplD));

Choice Field

const items = await sp.web.lists.getByTitle("Employee").items.select("EmpClass")();

items.forEach(i => console.log(i.EmpClass));

MultiChoice Field

const items = await sp.web.lists.getByTitle("Employee").items.select("EmpSkills")();

items.forEach(i => {
  console.log("Skills:", i.EmpSkills); // Returns string[]
});

Lookup Field

const items = await sp.web.lists.getByTitle("Employee").items
  .select("Department/Title")
  .expand("Department")();

items.forEach(i => console.log(i.Department?.Title));

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));

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());
});

Yes/No (Boolean) Field

const items = await sp.web.lists.getByTitle("Employee").items.select("IsActive")();

items.forEach(i => console.log(i.IsActive ? "Active" : "Inactive"));

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

How to Use PnPjs in SPFx to Query SharePoint List Columns