Query hooks

usePreviewSearch

Use the preview search query hook to request and retrieve data for preview search widgets.

Request parameters

Name	Type	Description
`keyphrase`	string	String to search for
`suggestionsList`	array of strings	List of suggestions
`itemsPerPage`	integer	Number of items on page.

Generic response

{
    widgetRef,
    actions: { onItemClick, onKeyphraseChange },
    queryResult: {
      isFetching,
      isLoading,
      data: {
        content: articles = [],
        suggestion: {
          content_name_context_aware: articleSuggestions = [],
          content_trending_category: trendingCategorySuggestions = [],
        } = {},
      } = {},
    },
}

Import

import { usePreviewSearch } from '@sitecore-search/react';

Example

import type {
  PreviewSearchInitialState,
  PreviewSearchWidgetQuery,
  SearchResponseSuggestion,
} from '@sitecore-search/react';

import { WidgetDataType, usePreviewSearch, widget } from '@sitecore-search/react';

type ArticleModel = {
  id: string;
  name: string;
  image_url: string;
  url: string;
  source_id?: string;
};

articles: Array<ArticleModel>;

type InitialState = PreviewSearchInitialState<'itemsPerPage' | 'suggestionsList'>;

export const PreviewSearchComponent = ({ defaultItemsPerPage = 6 }) => {
  const {
    widgetRef,
    actions: { onItemClick, onKeyphraseChange },
    queryResult: {
      isFetching,
      isLoading,
      data: {
        content: articles = [],
        suggestion: {
          content_name_context_aware: articleSuggestions = [],
          content_trending_category: trendingCategorySuggestions = [],
        } = {},
      } = {},
    },
  } = usePreviewSearch<ArticleModel, InitialState>({
    query: (query:PreviewSearchWidgetQuery) => query,
    state: {
      suggestionsList: [
        { suggestion: 'content_name_context_aware', max: 10 },
        { suggestion: 'content_trending_category', max: 10 },
      ],
      itemsPerPage: defaultItemsPerPage,
    },
  });

  const loading = isLoading || isFetching;
    
  return ( <div ref={widgetRef}> ... </div> );
};
const PreviewSearchLeftStyledWidget = widget(PreviewSearchComponent, WidgetDataType.PREVIEW_SEARCH, 'content');
export default PreviewSearchLeftStyledWidget;

Important

Each suggestion in the suggestionsList parameter supports the keyphrase_fallback boolean parameter. When set to true, Search uses the first suggestion from the first suggestion block as an alternate keyword when there are no results for a search. See the sample code snippet:

...
state: {
    suggestionsList: [{ suggestion: 'title_context_aware', max: 10, keyphrase_fallback: true}],
    itemsPerPage: defaultItemsPerPage,
},
...

Note

Convert a UI component into a widget component before adding it to pages.

To convert a component into a widget component, pass the UI component to the widget or setWidget function.

If you have suggestions for improving this article, let us know!