How to get all the Site collections/Webs from Tenant site collection in SPFX WebPart

Question

we are trying to get all sites/webs from Tenant site.

So I did some research and finally got API EndPoints, find the link below.

https://{mycompany}.sharepoint.com/_api/search/query?querytext='contentclass:STS_Site contentclass:STS_Web'&selectproperties='Title,Path'&rowlimit=500

the above link throws error please see the below screen shot

If I enter URLs manually in browser I can get Titles, site URLs fields with value,

but from SPFX its not working

actually i am the Admin, tenant admin as well but still i am getting the below error Any assistance please?

Answer 1

import * as React from 'react';
import { IExpProps } from './IExpProps';
import { sp } from 'sp-pnp-js';
export default class Exp extends React.Component<any, any> {
constructor(props: any) {
super(props)
this.state = {
  Sites: [],
  Subsites: []
}
}
componentDidMount() {
debugger;
let results: any = [];
const searchQuery = `contentclass:STS_Site`;
sp.search(searchQuery)
  .then((searchResults) => {
    for (let i = 0; i < searchResults.PrimarySearchResults.length; i++) {
      debugger;
      results.push({
        path: searchResults.PrimarySearchResults[i].Path,
        Title: searchResults.PrimarySearchResults[i].Title
      })
    }
    this.setState({ Sites: results })
    console.log("Total SharePoint sites in the tenant:", results);
    for (let i = 0; i < results.length; i++) {
      let weburl = results[i].Title
      sp.web.webs.select(weburl, "Url").get().then((subsites) => {
        console.log("Subsites", subsites)
        this.setState({ Subsites: subsites })
        console.log("Subsites state", this.state.Subsites)
      }).catch((error) => {
        console.log(error);
      });

    }
  })
  .catch((error) => {
    console.log("Error fetching SharePoint sites:", error);
  });

} public render(): React.ReactElement {

return (
  <div>Sites:
    <ol>
      {this.state.Sites.map((items: any, k: any) => {
        return [
          <li>{items.path}</li>
        ]
      })}
    </ol>
    Subsites:
    <ol>
      {this.state.Subsites.map((items: any, k: any) => {
        return [
          <li>{items.Url}</li>
        ]
      })}
    </ol>
  </div>
);

} } Above is the code for getting the sites and subsites from tenant using pnpjs