No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

SDK Query Hooks

SDK Query Hooks are React Hooks that allow a developer to connect through the Sitecore Search API. Additionally, each type of widget will have a corresponding hook. For example, a SearchResults type widget will have a useSearchResults hook. Using the hook, we can get valuable information about the widget behavior:

  • Status: We can identify if there is an ongoing request to the Sitecore Search API or if it has been made.
  • Actions:. Available operations that the widget can execute. For example, apply a filter or change the number of results that we would like to show.
  • Context: Get the parameters applied to a request.
  • Results: Get the results from the API.

On the other hand, the hook will also allow us to set the query parameters to configure our widget behavior.

Anatomy

const { actions: { }, context: { // Here we destructure the context variables that we would like to obtain. }, queryResult: { isLoading, // The query has no data and is currently fetching isError,// The query encountered an error isSuccess, // The query was successful and data is available isFetching, // In any state, if the query is fetching at any time (including background refetching) isFetching will be true. data: { // Here we destructure the API response properties. } = {}, }, } = [useSearchResults|useRecommendation|usePreviewSearch]((query) => { // query handling return { // initial values go here }; });

Interface

HookDescription
useSearchResultsUsed to get SearchResults data
useRecommendationUsed to get Recommendation data
usePreviewSearchUsed to get Preview Search data

Note that in all cases we have a parameter named initializer which is a function that executes once the component (template) loads. That is useful in the case that we don't want to use the default behavior of the widget and instead, we want to change that. Examples of that can be modifying the context, changing the number of results or applying a filter:

useSearchResults((query) => { query.getRequest().setContextBrowserDevice('mobile'); // Changing context at initialization, in this case, changing the device. return { itemsPerPage: 10, // Changing the default amount of items to show keyphrase: 'Initial query term', // Changing the initial query term. }; })

The example above works for Search Results, please note that each widget will have different properties to initialize.

Actions

Actions are operations that a widget can execute. Different widget types will have different actions. The following is a list of actions grouped by Widget type:

ActionDescriptionAvailable for
onKeyphraseChangeWhen the search term changesuseSearchResults, usePreviewSearch
onResultsPerPageChangeWhen the amount of results per page changesuseSearchResults
onPageNumberChangeWhen the page number changesuseSearchResults
onFilterClickWhen a filter is clickeduseSearchResults
onSortChangeWhen the sort criteria changesuseSearchResults
onFacetClickWhen a facet gets clickeduseSearchResults
onClearFiltersWhen all the filters are cleareduseSearchResults
onItemClickWhen an item gets clickeduseSearchResults, useRecommendation, usePreviewSearch
onNavigationNextWhen a next button is clickeduseRecommendation
onNavigationPrevWhen a prev button is clickeduseRecommendation
onSuggestionAddedWhen a suggestion is added to searchusePreviewSearch
onSuggestionRemovedWhen a suggestion is removed to searchusePreviewSearch