SPOnline, How to Batch RELATED REST calls (and increase performance)

Question

Doing nothing fancy, just your normal Intranet Front-Page

Got two WebComponents that display a News Carousel and Summary List

 <news extract="newsheadlines" display="carousel">
 <news extract="newssummary" display="itemtemplate:newssummary">

(and a couple of lines of code to make this all happen)

The techie stuff

So it starts with an almost empty HTML page
To get it filled:

• Call a Pages endpoint to get the newest published News Messages
• Since we don't get the Publishing IMAGES in that first call,
  Having to do extra calls (for each Item) to the FieldValueAsHtml endpoint to get the IMG URIs

Now the gurus say performance can be increased by Batching REST calls

Resources:

• https://msdn.microsoft.com/library/office/dn903506.aspx
• http://www.vrdmn.com/2016/08/batch-rest-requests-in-spfx-using.html
• http://www.andrewconnell.com/blog/part-2-sharepoint-rest-api-batching-exploring-batch-requests-responses-and-changesets *

Questions

• Has SPOnline been patched, can we now get the Publishing Images URIs in the item call?
  That would elminate all those next requests

• [Correct me if I am wrong, I have never used batching] My First REST call gets the ItemIDs of the Pages I then need to query for the Publishing IMGs
  HOW can this be done with batching?, How can a next-in-line batch command change its endpoint based on a previous endpoints result?

So all I can batch are the calls for IMG URIs

Answer 1

A little late to this, but yes there is now indeed a method to fetch PublishingFields in a single HTTP request. We needn't make a separate individual request to get the PublishingRollupImage field. So, need to batch the calls as well.

This is exposed now via the RenderListDataAsStream endpoint. We need to make a POST request and explicitly specify the fields that we require in the familiar CAML query syntax.

You can use it as in SPFx as below:

const restAPI = `${this.context.pageContext.web.absoluteUrl}/_api/web/Lists/GetByTitle('Pages')/RenderListDataAsStream`;
this.context.spHttpClient.post(restAPI, SPHttpClient.configurations.v1, {
  body: JSON.stringify({
    parameters: {
      RenderOptions: 2,      
      ViewXml: `<View>
              <ViewFields>
                <FieldRef Name="Title"/>
                <FieldRef Name="ID"/>
                <FieldRef Name="Modified"/>
                <FieldRef Name="Author"/>
                <FieldRef Name="Editor"/>                
                <FieldRef Name="PublishingRollupImage"/>
              </ViewFields>
            </View>`    
    }
  })
})
.then((data: SPHttpClientResponse) => data.json())
.then((data: any) => {  
  if (data && data.Row && data.Row.length > 0) {
    console.log(data.Row); // iterate here
  }
});

There is one caveat though, the data returned for PublishingRollupImage is as HTML string instead of the URL of the image, so we need to parse it from the string and then bind it to HTML.

You can extract the image from the string as mentioned here

Reference - Working with list items by using REST