---
title: "Query hooks"
slug: "query-hooks"
abstract: "Details on using the query hooks in Sitecore Search JS SDK for React.."
---
# Query hooks

UI components communicate with Sitecore Search API using query hooks available in the JS SDK package. This topic describes the query hook pattern with a request and a query result, and then lists the various query hooks available in the JS SDK.

## Request

To populate and render merchandising widgets, you must use React hooks to attach the components to the ReactQuery singleton in `WidgetProvider`.

The SDK provides a query hook for each type of merchandising widget. The following tables describe a typical query hook in the SDK:

| Key | Type | Description |
| --- | --- | --- |
| `query` | object | Query function to be used. You can set additional request values to narrrow results. |
| `widgetRef` | object | Reference the React component receiving data. |
| `actions` | object | Actions or callbacks used by the widget to populate request. Each widget type has its own list. |
| `state` | object | Parameters describing the state of the widget to be used by the search algorithm. |
| `queryResult` | object | Contains the response object. A widget can only read its value. |

## Query result

`queryResult` is populated only while a query is running or after it has run. It contains various status values and the response.

| Key | Type | Description |
| --- | --- | --- |
| `isLoading` | boolean | If `true`, the query has no data and is currently fetching. |
| `isError` | boolean | If `true`, the query encountered an error. |
| `isSuccess` | boolean | If `true`, the query was successful and response object is available. |
| `isFetching` | boolean | If `true`, the query is fetching, includes fetching in the background. |
| `data` | object | Response object. |

## Available query hooks

You can use the following query hooks in your application:

- [usePreviewSearch](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/js-sdk-reference/query-hooks/usepreviewsearch.html "usePreviewSearch")
- [useRecommendation](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/js-sdk-reference/query-hooks/userecommendation.html "useRecommendation")
- [useSearchResults](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/js-sdk-reference/query-hooks/usesearchresults.html "useSearchResults")
- [useContentBlock](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/js-sdk-reference/query-hooks/usecontentblock.html "useContentBlock")

The JS SDK also includes [secondary query hooks to support widgets](https://doc.sitecore.com/search/en/developers/search-js-sdk-for-react/js-sdk-reference/query-hooks/complementary-query-hooks.html "Complementary query hooks"), for example, list of widgets and breadcrumbs.

> [!note]
> **Notice**
> These React resources can help you with your implementation:
>
> -   To view working examples of widgets, visit the [starter kit website](https://developers.sitecorecloud.io/search-sdk/react/website) built using Search JS SDK and UI components packages.
>
> -   You can download or fork its [GitHub repository](https://github.com/Sitecore/Sitecore-Search-JS-SDK-Starter-Kit/blob/main/README.md).