I am trying to get data in SPFx using REST and also need to use CAML for making the query. CAML is required as I want to filter based on certain groups the user is present in, so giving that up is not an option.

I have made the code simple below but this still gives me 400 Bad request. I get the data when I use the below url (after changing getItems to items) directly in browser.

Please tell me what am I doing wrong here:

 this._selectedList = "List1";
 var queryString = "<View></View>";

 const options: ISPHttpClientOptions = { headers: { 'odata-version': '3.0'},
 body: JSON.stringify({'query': {'__metadata': {'type': 'SP.CamlQuery'},'ViewXml': queryString }})
 var getUrl = this._listsUrl + "/GetByTitle('" + this._selectedList + "')/getitems?$select=Title"; 

 return this._webPartContext.spHttpClient.post(getUrl, SPHttpClient.configurations.v1,options)
    .then((response: SPHttpClientResponse) => {
    return response.json();
  • Try adding viewfields in query string.
    – user80093
    Feb 26, 2019 at 12:14
  • I am getting error for AssignedTo field when I try to use in REST Url. Will, using it in View Fields can resolve the issue?
    – zainul
    Feb 27, 2019 at 10:37

3 Answers 3


If you're trying to query SharePoint REST API's, you should use PNPJS instead of manually crafting the requests. It provides a fluent API for the API and that will make a lot of things simpler.
For your specific case, look at the documentation, especially the queries with "select", which is the equivalent of selecting specific fields of the list.
Because you're building SharePoint Framework components, you should also look at the getting started documentation.


Most likely you have made an error in here -- this._listsUrl

The value of this._listsUrl needs to something like https://tenant.sharepoint.com/sites/test/_api/web/lists.

So try and hard-code the URL and then check, try and modify it as below, rest of your code looks ok:

var getUrl = "https://tenant.sharepoint.com/sites/test/_api/web/lists
/GetByTitle('" + this._selectedList + "')/getitems?$select=Title"; 

Try below.

const options: ISPHttpClientOptions = {
      headers: {'odata-version':'3.0'},
      body: `{'query': {
        '__metadata': {'type': 'SP.CamlQuery'},
        'ViewXml': '<View><Query><OrderBy><FieldRef Name="ID"" /></OrderBy></Query></View>'

    return this.context.spHttpClient.post(this.context.pageContext.web.absoluteUrl + `/_api/web/lists/GetByTitle('listName')/GetItems`, SPHttpClient.configurations.v1,options)
      .then((response: SPHttpClientResponse) => {
        return response.json();

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.