Need help with url and rollup image fields in sitepages using SPFX with REST

Question

I'm new to SPFX and still trying to find my way around. At the moment I'm struggling to access particular fields from site pages using REST. I realize this is a n00b request, but any help would be apppreciated.

The current requirement is to create a simple web part that will go onto the intranet landing page. It takes a single page URL as a property, validate that the URL uses a specific custom content type, and then display the article date, content type, comments, rollup image and a 'Read more' button linking to the page from the url property.

My current approach is roughly:

export interface ISPList { 
  Id: string;
  Url: any;
  PublishingRollupImage: any;
}

and

private _getListData(): Promise<ISPLists> { 

  return this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl + `/_api/web/lists/GetByTitle('Pages')/Items`, SPHttpClient.configurations.v1).then((response: SPHttpClientResponse) => {  
        debugger; 
        return response.json(); 
      }); 
  }

This works for the most part, but doesn't include values for the rollup image or url to the page represented by a given listitem. Suggestions on accessing the fields mentioned, please?

Answer 1

You can make use of the new RenderListDataAsStream endpoint to get these values.

Microsoft itself uses this endpoint to get data.

It will be a POST request where you need to specify the ViewFields that you need. These will be the internal names of the columns.

Modify your code from below sample code:

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="PublishingPageContent"/>
                <FieldRef Name="PublishingRollupImage"/>
                <FieldRef Name="ArticleStartDate"/>
                <FieldRef Name="Comments"/>
              </ViewFields>
            </View>`
    }
  })
})
  .then((response: SPHttpClientResponse) => response.json())
  .then((response: any) => {
    if (response && response.Row && response.Row.length > 0) {
      console.log(response.Row);
    }
  });