Batch REST requests in SPFx using the ODataBatch preview

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 ODataBatch which is used to combine multiple REST requests. You can find more about this in the API docs:
https://sharepoint.github.io/classes/_sp_client_base_.odatabatch.html

As shown in the docs, the ODataBatch 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 :)

Before we move on to the code, it is important to know that there are couple of bugs with the ODataBatch class right now:

1) The ODataBatch class only works with GET requests for now. If a POST request is added to the batch, it is treated as a GET request and is not wrapped in a changeset. I have added this issue here:

POST request in an ODataBatch request is not wrapped in a changeset

2) The ODataBatch class does not work with the SharePoint Search API at this time. This is because by default an odata-version:4.0 header is added to the batch request with there being no way to override it right now. More details here:

The IODataBatchOptions interface does not extend the RequestInit interface

So let's have a look at how we can utilize the ODataBatch 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:



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


Isn't this Awesome? It is going to save a lot of round trips to the server and also help in performance optimization. Hopefully the bugs will be fixed in the next release of the SharePoint Framework and we can utilize the ODataBatch class to it's full potential!

Here is the link to my project on GitHub if you are interested: https://github.com/vman/ODataBatch-Explorer/blob/master/src/webparts/odatabatcher/OdatabatcherWebPart.ts

Thanks for reading!