useInfiniteSearch

The useInfiniteSearch hook enables searching with infinite scrolling. It’s ideal for loading results progressively as the user scrolls or clicks a Load More button that can be handled via the loadMore function.

Configuration

To use the hook, you can provide the searchIndexId and the search query.

RequestResponse

import { useInfiniteSearch } from '@sitecore-content-sdk/nextjs/search';

const { results } = useInfiniteSearch({
  searchIndexId: '<YOUR_SEARCH_INDEX_ID>',
  query: 'product'
});

Supported parameters

The hook expects the ID of the search index and also supports several other parameters used to sort, paginate, perform a manual search etc.

Parameter	Type	Description
`searchIndexID`	string	The ID of the SitecoreAI search index to retrieve results from. Required
`query`	string	Specify a query to search the index for specific content.
`pageSize`	number	Specify the number of results per page.
`sort`	RequestResponse `{ name: string; order: "asc" \| "desc" } OR Array<{ name: string; order: "asc" \| "desc" }>;`	Specify an object or array of objects containing the name and order to sort results by.
`enabled`	boolean	Specify whether to run a manual search.

Examples

The hook contains all traditional searching capabilities like sorting (single, multi-field, and nested fields), setting a custom page size, and manual search execution. The hook also supports TypeScript generics that lets you define the shape of your search results for type safety.

Simple search with keyphrase

A basic search requires only the searchIndexId. You can specify additional parameters as needed.

RequestResponse

import { useInfiniteSearch } from '@sitecore-content-sdk/nextjs/search';

function InfiniteSearchComponent() {
  const { results } = useInfiniteSearch({
    searchIndexId: '<YOUR_SEARCH_INDEX_ID>',
    query: 'article',
    pageSize: 20,
  });

  return (
    <div>
      <p>Found {results.length} results</p>
      <ul>
        {results.map((result) => {
          return <li key={result.id}>{result.title}</li>;
        })}
      </ul>
    </div>
  );
}

Search with a generic type

The useInfiniteSearch hook supports TypeScript generics, allowing you to define the shape of your search document for type safety and better IDE support.

RequestResponse

import { useInfiniteSearch } from '@sitecore-content-sdk/nextjs/search';

type Article = {
  id: string;
  title: string;
};

function InfiniteSearchComponent() {
  const { results, isLoading, loadMore, hasNextPage, isLoadingMore } = useInfiniteSearch<Article>({
    searchIndexId: '<YOUR_SEARCH_INDEX_ID>',
    query: 'article',
    pageSize: 20,
  });

  if (isLoading) return <div>Loading initial results...</div>;

  return (
    <div>
      <p>Found {results.length} results</p>
      <ul>
        {results.map((result) => {
          return <li key={result.id}>{result.title}</li>;
        })}
      </ul>

      {isLoadingMore && (
        <div style={{ textAlign: 'center', padding: '1rem' }}>
          Loading more results...
        </div>
      )}

      {hasNextPage && (
        <button onClick={loadMore} disabled={isLoadingMore}>
          {isLoadingMore ? 'Loading...' : 'Load More'}
        </button>
      )}
    </div>
  );
}

Search with basic sorting

The hook supports sorting results using a single sort object specifying the name and order. The following example sorts the search results by the price in the ascending order (lowest first).

RequestResponse

import { useInfiniteSearch } from '@sitecore-content-sdk/nextjs/search';

function SortedInfiniteSearch() {
  const { results, loadMore, hasNextPage, isLoadingMore } = useInfiniteSearch<Event>({
    searchIndexId: '<YOUR_SEARCH_INDEX_ID>',
    query: 'conference',
    pageSize: 20,
    sort: {
      name: 'price',
      order: 'asc',
    },
  });
  ... rest of the code ...
}

Search with multi-field sorting

You can also specify multiple fields to sort. Instead of a single object, you should specify this as an array of objects. The following example sorts the search results by category in the ascending order, followed by price in ascending order.

RequestResponse

import { useInfiniteSearch } from '@sitecore-content-sdk/nextjs/search';

const { results, loadMore, hasNextPage } = useInfiniteSearch<Product>({
  searchIndexId: '<YOUR_SEARCH_INDEX_ID>',
  query: 'product',
  pageSize: 30,
  sort: [
    {
      name: 'category',
      order: 'asc',
    },
    {
      name: 'price',
      order: 'asc',
    },
  ],
});

Search with nested field sorting

Using dot notation (.), you can sort nested properties.

RequestResponse

import { useInfiniteSearch } from '@sitecore-content-sdk/nextjs/search';

type Event = {
  id: string;
  name: string;
  date: string;
  organizer: {
    name: string;
    company: string;
  };
  attendees: number;
};

const { results, loadMore, hasNextPage } = useInfiniteSearch<Event>({
  searchIndexId: '<YOUR_SEARCH_INDEX_ID>',
  query: 'conference',
  pageSize: 20,
  sort: {
    name: 'organizer.name', // Sort by nested property using dot notation
    order: 'asc',
  },
});

Enable manual search

You can perform a manual search by setting the enabled parameter to true. This is useful when you want the user to type in a query and click a button to perform the search.

RequestResponse

import { useState } from 'react';
import { useInfiniteSearch } from '@sitecore-content-sdk/nextjs/search';

const [enabled, setEnabled] = useState(false);
const { results, isLoading, loadMore, hasNextPage } = useInfiniteSearch<Product>({
  searchIndexId: '<YOUR_SEARCH_INDEX_ID>',
  query: 'product',
  pageSize: 30,
  enabled,
});
... rest of the code ...

Search with custom page size

You can customize the number of results loaded per page using the pageSize option:

RequestResponse

import { useInfiniteSearch } from '@sitecore-content-sdk/nextjs/search';

const { results, loadMore, hasNextPage } = useInfiniteSearch<Product>({
  searchIndexId: '<YOUR_SEARCH_INDEX_ID>',
  query: 'product',
  pageSize: 30,
});
... rest of the code ...

Do you have some feedback for us?

If you have suggestions for improving this article,