SPFx: pnp search how to get only files or folders

Question

I made search in SPFx by files and folders, now i need to display only files or only folders. My code example:

 const _results: ISearchResult[] = [];
    return new Promise<ISearchResult[]>((resolve, reject) => {
        pnp.sp.search({
            Querytext: query,
            RowLimit: 20,
            StartRow: 0
        })
            .then((results) => {
                results.PrimarySearchResults.forEach((result) => {
                    _results.push({
                        title: result.Title,
                        description: result.HitHighlightedSummary,
                        link: result.Path,
                        author: result.Author
                    });
                });
            })
            .then(
                () => { resolve(_results); }
            )
            .catch(
                () => { reject(new Error("Error")); }
            );
    });

Answer 1

You can add additional query using QueryTemplate on top of QueryText where you can filter result based on your need.

In your case, you can filter Folder using Content Type Id as it will be always fixed for Folder and in case of document you can use IsDocument:True filter.

 const _results: ISearchResult[] = [];
return new Promise<ISearchResult[]>((resolve, reject) => {
    pnp.sp.search({
        Querytext: query,
        QueryTemplate:"(ContentTypeId:0x0120* OR IsDocument:True)"
        RowLimit: 20,
        StartRow: 0
    })
        .then((results) => {
            results.PrimarySearchResults.forEach((result) => {
                _results.push({
                    title: result.Title,
                    description: result.HitHighlightedSummary,
                    link: result.Path,
                    author: result.Author
                });
            });
        })
        .then(
            () => { resolve(_results); }
        )
        .catch(
            () => { reject(new Error("Error")); }
        );
});

Above result will return only Documents and Folder based on your query text entered by user.

Important: Above query template will also return "aspx" pages as those are also considered as documents. If you do want aspx/html/css/.. pages to return then you can exclude it by adding below queries.

QueryTemplate:"(ContentTypeId:0x0120* OR IsDocument:True) (-FileExtension:aspx AND -FileExtension:css AND -FileExtension:exe AND -FileExtension:htm AND -FileExtension:html AND -FileExtension:json AND -FileExtension:mht AND -FileExtension:msi AND -FileExtension:xml)"

Answer 2

The pnp-search library is a JavaScript library that can be used in SharePoint Framework (SPFx) solutions to perform searches against the SharePoint search API. If you want to retrieve only files or folders using pnp-search, you can do so by using the FileType or ContentType properties in the query.

For example, to retrieve only files, you can use the FileType property in the query:

import { search } from "@pnp/sp/search";

search({
  Querytext: "your query here",
  FileType: "docx",
}).then((results) => {
  console.log(results);
});

The above code will retrieve only folders. You can also use the IsDocument property to retrieve only documents (files):

import { search } from "@pnp/sp/search";

search({
  Querytext: "your query here",
  IsDocument: true,
}).then((results) => {
  console.log(results);
});

I hope this helps! Let me know if you have any other questions.