Wednesday 31 August 2016

Batch REST requests in SharePoint Framework (SPFx) using SPHttpClientBatch

This post has been updated on 5th March 2017 for the SharePoint Framework 1.0 (GA) release.

All the code for this, as always, is on GitHub:

This is one of my favorite things in the SharePoint Framework right now. The ability to easily batch REST API calls and send them to SharePoint in a single request.

There is a new class called SPHttpClientBatch which is used to combine multiple REST requests. You can find more about this in the API docs:

As shown in the docs, the SPHttpClientBatch class has 2 primary methods: execute and fetch. The fetch method is used to queue all the different requests and execute is used to execute them all at once.

The get and post methods are syntactical sugar to call fetch but with the method parameter set to GET or POST.

The amazing thing about the fetch method is that it returns a Promise object which correlates to the API call being made. This way, when the Promise gets resolved/rejected after the execute method, we can easily track the response. This is better explained in the code below :)

So let's have a look at how we can utilize the SPHttpClientBatch class in an SPFx webpart:

First, we will need to import all the necessary modules:

And here is the actual code:

When this code is executed, we can see that a single batch request is sent to SharePoint containing the information about the requests in the Payload:

(click to zoom)

And when the Response is returned, we can hook into each individual Promise object to get its value:

(click to zoom)

Isn't this Awesome? It is going to save a lot of round trips to the server and also help in performance optimization.

Thanks for reading!


anoop said...

Brilliant! Thank you for this Vardhaman.

Unknown said...

Very infromative VRD !! This is pure Gold

Vardhaman Deshpande said...

Thanks Unnie, glad you liked it!

Unknown said...

Thanks for the great article.
Though i have an issue and hope you can help me with that.

i am trying to get TypeDescriptors for the SP.BusinessData.EntityView and here is my code

const spBatch:SPHttpClientBatch = spHttpClient.beginBatch({webUrl:myWebUrl});
for (var i = 0; i < fields.length; i++) {
const typeDesc:string = uriSffx.concat(`/getTypeDescriptor('${fields[i].Name}')`);, SPHttpClientBatch.configurations.v1, {});


after execution i get this error for every typedescriptor

HTTP/1.1 400 Bad Request
CONTENT-TYPE: application/json;odata.metadata=minimal;odata.streaming=true;IEEE754Compatible=false;charset=utf-8

{"error":{"code":"-1, Microsoft.SharePoint.Client.InvalidClientQueryException","message":"Unable to read data. The end of input stream is encountered."}}
Content-Type: application/http
Content-Transfer-Encoding: binary

But when i try to just get one typedescriptor by using command it succeeds.

What am i missing?

Hjalmar said...

The _makeSPHttpClientGETRequest() and _makeSPHttpClientPOSTRequest() works fine.
But _makeSPHttpClientBatchRequest() returns the following error in the $batch response:

HTTP/1.1 400 Bad Request
CONTENT-TYPE: application/json;odata.metadata=minimal;odata.streaming=true;IEEE754Compatible=false;charset=utf-8

{"error":{"code":"-1, Microsoft.SharePoint.Client.InvalidClientQueryException","message":"Invalid JSON. More than one value was found at the root of the JSON content. JSON content can only have one value at the root level, which is an array, an object or a primitive value."}}

I tried to put [] around the spOpts, and it seems to accept the batch, but there is no list created...

Vardhaman Deshpande said...

Hi Hjalmar,

This seems to have stopped working recently and seems to be a bug in the batching framework. I suggest you file a bug here: