If you are using SP PNP JS in your
SharePoint framework project, you might run into the issue you might getting
the following error.
"Error
making HttpClient request in queryable [404]"
If
the site your are refer to is "https://mycompany.sharepoint.com/yoursite",
you could inspect the page and the detailed error should look like one of the
two possible situation.
https://mycompany.sharepoint.com/_api/web/lists/getByTitle('Pubs')?$select=ListItemEntityTypeFullName
404
https://mycompany.sharepoint.com/yoursite/SitePages/_api/web/lists/getByTitle('Pubs')?$select=ListItemEntityTypeFullName
404
This is very clear the PnP JS did not get the correct site URL. The first went to the root and the second is from the "SitePages". The root cause is the SP PnP JS does not get the correct context if the request is coming from site page or many be redirected.
There are at least two best practices to resolve this issue.
The first solution is to initialize context in onInit method like below.
protected onInit(): Promise<void> {
sp.setup({
spfxContext: this.context
});
return super.onInit();
}
The other way
you can ensure you are calling to the correct web is to instantiate the web
object directly and pass in the url as shown below. This method is slightly
more flexible as you are not setting the base url for all calls, but you must
do it each time.
public render(): void {
let web = new Web(this.context.pageContext.web.absoluteUrl);
web.select("Title").getAs<{ Title: string }>().then(w => {
this.domElement.innerHTML = `Web Title: ${w.Title}`;
});
}
If you need to set the web when context is not available, you could always call like this below by passing the URL.
private web: Web = new Web('https://mycompany.sharepoint.com/spfxsite/');
This should resolve the issue that SP OnP JS not be able to find the correct context issue.
