Batch Query Using sp-pnp-js

Problem Statement

In general, if we want to send multiple queries to SharePoint, we use a batch statement like below.

Example

If I want to filter multiple lists with the below queries in page load/any other events.

Loading all lists available in the site.
Check available of list “XYZ”
Employee list whose department is “IT”
Retrieving regional settings information.

Generally, we will follow the following way.

let batch = pnp.sp.createBatch();
// BaseTemplate=100 is for custom lists
pnp.sp.web.lists.filter(“Hidden eq false and BaseTemplate eq 100”).get().inBatch(batch).then((listsResult)=>{
});
pnp.sp.web.lists.getByTitle(“XYZ”).inBatch(batch).then((xyzResult)=>{
});
pnp.sp.web.lists.getByTitle(“Employee”).filter(“dept eq ‘IT’”).get().inBatch(batch).then((employeeResult)=>{
});
pnp.sp.web.regionalSettings.timeZone.get().inBatch(batch).then((timeZoneResult)=>{
});
batch.execute().then((data) => {
});

The above code will work and give the expected result, but here, if the number of batch operations increases, the code itself will be odd to read (if we consider reusability of the code as developer’s main goal).

Resolution

Here, we need to think about the usage of For loops in this scenario. So, we require an array/object for looping all the queries, if we consider the below portion of code as an array object.

Code Implementation Process

If I want to retrieve data from a SharePoint list (single query) based on the implemented code, I will follow the below process.

In SP-PnP-JS, web is an object of O365 Web(pnp.sp.web). This object has lists property and it is an object of Lists class(pnp.sp.web.lists). This lists property has a method named getByTitle(pnp.sp.web.lists.getByTitle("XYZ")) which accepts list name as a parameter and which will return the slected list as List class Object. This List Class has property named items which will return Items class object(pnp.sp.web.lists.getByTitle("XYZ").items) . This Items class is extending SharePointQuerable class (so all methods in this are internally used for our original items class) which has get method which will return our data.

Based on the above process of execution and based on JavaScript object feasibility, I thought if we form these all into one array object, which will have information about our query chaining. So, I have just followed the below way of approach to achieve our requirement.

For getting data in a SharePoint List (single query), we need to follow the below steps for forming input array object for reusable method.

By default, we need to create SharePoint Web object (for any kind of GET operations we need to have this is a basic object)
1. let webObject = pnp.sp.web;
With the help above web object, our next goal to access lists property which will return an object Lists class, so I have used this is my first string in the array.
1. let batchLoadQueries = [“lists"];
Based on above Lists class, it has method getByTitle() which accepts list name as a parameter and returns selected list, so it needs two parameters under one array index so we can use this as key-value pair and push it to our above batchLoadQueries array and our array will be as below.
1. ["lists", { "getByTitle": "Employee" }]
Based on the above query, we are navigated up to lists, so we need to retrieve the items of the list. It is the single property that doesn’t need any kind of key-value pair. So array will be like below
1. ["lists", { "getByTitle": "Employee" },"items"]
Up to the above object, it will return items, If it has any kind query/select and these two are key-value pairs so we need to form array as below
1. ["lists", { "getByTitle": "Employee" }, "items", { "filter": "Dept eq IT" }]

If we want to send multiple batch statements, we need to form array of array objects.

let batchLoadQueries = [[“lists", { "filter": "Hidden eq false and BaseTemplate eq 100" }],["lists", { "getByTitle": "XYZ" }], ["lists", { "getByTitle": "Employee" }, "items", { "filter": "Dept eq IT" }], ["regionalSettings", "timeZone"]];

Reusable Method(Complete Code please download from attachment)

public FormQueryObject(currentBatch) {
let webObject = pnp.sp.web;
let currentQueryObject = webObject;
let batchObject = {};
for (var subIndex = 0; subIndex < currentBatch.length; subIndex++) {
let queryObject = (subIndex == 0) ? currentQueryObject[currentBatch[subIndex]] : currentQueryObject;
if (currentBatch[subIndex] != null && typeof currentBatch[subIndex] == "object") {
for (var key in currentBatch[subIndex]) {
if (currentBatch[subIndex].hasOwnProperty(key)) {
if (key == "orderBy")
currentQueryObject = queryObject[key](currentBatch[subIndex][key].Name, currentBatch[subIndex][key].Value);
else {
currentQueryObject = queryObject[key](currentBatch[subIndex][key]);
}
}
}
}
else
currentQueryObject = (subIndex == 0) ? queryObject : queryObject[currentBatch[subIndex]];
}
batchObject["currentQueryObject"] = currentQueryObject;
return batchObject;
}
public executeBatch(batchPromises: any[]): Promise<any> {
let batch = pnp.sp.createBatch();
let sendBatchRequest = new Array<any>();
let batchResult = new Array<any>();
for (var batchIndex = 0; batchIndex < batchPromises.length; batchIndex++) {
let currentBatch = batchPromises[batchIndex];
let batchObject = this.FormQueryObject(currentBatch);
let currentQueryObject = batchObject["currentQueryObject"];
sendBatchRequest.push(currentQueryObject.inBatch(batch).get().then((resultSet) => {
batchResult.push(resultSet);
}).catch((error: any) => {
batchResult.push(false);
}));
}
return new Promise<any>((resolve: (batchResult: any) => void, reject: () => void) => {
batch.execute().then((data) => {
resolve(batchResult);
}).catch((error: any) => {
resolve(false);
});
});
}
this. executeBatch(batchLoadQueries).then((result)=>{
});