Executing batch requests with Microsoft Graph and SharePoint Framework (SPFx)

In my recent blogpost I wrote about using batch requests with the SharePoint Rest Api within a SharePoint Framework (SPFx) solution. Today I want to construct a similar scenario which shows batch requesting using the new Microsoft Graph access class within SPFx.

Please note that this approach  is currently, when writing this post (Jul-2018), in final preview mode and therefore not supported in production scenarios as it might be subject to change. A GA is expected with the next SPFx version (1.6.0) end of this month.

Update: This is now targeting the GA version from SPFx 1.6.0 on.

Lets start with a simple scenario. Suppose we have a bunch of Group IDs

Within our component we will do several things now. First within the constructor (you might use a Graph call several times within your code, otherwise you can also do it in your function) we instantiate a MSGraphClient.

As this is an async call now, it is debatable to do this in the constructor or at a later stage in componentDidMount. In larger projects I usually exclude the whole data stuff to a separate controller class which I instantiate in the constructor.
In a getGroupsData function we then create our requests based on the IDs of our Groups from above (Please note that we also handover an index which we can later use to simply identify the repsonse if needed as the repsonses might be ordered differently than the requests originally were):
What happens afterwards is one simple call to the Graph Api handing over all requests in the body. If no error occurs and we recieve a Status of 200 per response (also one single request might fail, for instance when we have provided a wrong Id) we can push the response part to our array based on our custom UnifiedGroup interface.
When every response is handled, we set our state which lets our component re-render as usual.
Please pay attention that there is a hard limit of 20 (!!) requests per batch request. So in case you would have more than 20 Ids (or something similar, this is a constructed scenarion of course) you need to create several batch requests, similar to a paging approach.
Before we can test our stuff, we also need to request permissions in the package-solution.json
For debugging with the workbench this is sufficient (this now works with SPFx 1.5.0!), when deploying our solution we have to grant that permissions by an admin tenant-wide also as described here.
Update: 2 additional things to mention here are the general request for “Windows Azure Active Directory” | “User.Read” which is required to have for all requests. On top I recently came across an obviously general limitation of having the string values for resources and scopes not more than 255 characters in total. So pay attention on this as well when having to request a significant number of Graph resources for instance. But as you only have to approve once you might split up your request over several packages but must rely on their all existence inside a tenant then.
Once we run our simple solution it might (simply rendered) look like this:
Finally for your reference the whole component’s source:

Use SharePoint Rest API Batch component to retrieve site logos

In the modern design of Office 365 and SharePoint Online in detail it is all about logos, photos and tiles or cards. Unfortunately there is still no easy Api to retrieve.

There is an undocumented version that helps maybe but only in case of ‘followed’ or ‘recent’ sites are what you want. Here is the issue and here the uservoice request.

In this post I want to show you another approach that uses the batch capability which is available for the SharePoint Rest API and can be easily used from the SPHttpClient class within SharePoint Framework (SPFx).

Furthermore the example is kept quite simple so you can also get an idea about batch requests with SharePoint Rest Api ans SPFx in general and adapt it to your own case.

Assume we have a bunch of site Urls in our use case:

When we start a batch we first need a url:

Now we have the problem that we cannot simply request the site properties as this would lead to totally different Urls which doesn’t work.

So in detail, a batch request with requests to
won’t work but several request to the same site but different lists, items, e.g. will work.

Fortunately search helps out here. We can simply request the needed properties with a search query for a site with our specific URL from current context:

Now we have constructed and collected all of our requests. We can now send them to the server and handle the responses:

Two important things to explicitly mention here:
First we use Promise.All() to wait for all requests to be completed. If we would handle each one be one we would need to write to our state each time a request is done. Or we would store it in a variable but then the challenge is when are all done and we can transfer to state? A counter can help (increase on request, decrease on response) but Promise.All() is much simpler.
Second we have to handle another async call, the json() method. Therefore we build another array of requests and with another Promise.All() we handle our final JSon response.

As we have to handle the Response of a search call, we use the helper Interfaces as below:

This approach is taken from Elio Struyf’s SPFx search example webpart.

Finally we can render our data.


As you can see I only used Groups respectively modern teamsites in my example. I like that they expose a site logo by default as a combination of an acronym and a randomly picked color. Modern communication sites display the same by default but do not expose the values (except in the above mentioned undocumented Api on followed or recent sites) or a built image as modern teamsites do. Mikael Svenson also commented on this a while ago, so we hope that Microsoft will improve the logo handling quite soon.
But I hope I gave you some ideas how to improve this yourself and also how to handle batch requests in general.

Now stay tuned for my next example where I will cover batch requests with Microsoft Graph and SharePoint Framework (SPFx).

Last not least the whole component class for your reference: