---
title: "usePreviewSearch"
slug: "usepreviewsearch"
abstract: "React SDKのSitecore Search usePreviewSearchクエリフックの詳細。"
---
# usePreviewSearch

preview search queryフックを使って、preview searchウィジェットのデータをリクエスト・取得してください。

## Requestパラメータ

名称

種類

概要

keyphrase

ストリング

検索する文字列

suggestionsList

文字列の配列

提案リスト

itemsPerPage

整数

ページ上のアイテム数。

## ジェネリック応答

{
 widgetRef,
 actions: { onItemClick, onKeyphraseChange },
 queryResult: {
 isFetching,
 isLoading,
 data: {
 content: articles = ,
 suggestion: {
 content\_name\_context\_aware: articleSuggestions = ,
 content\_trending\_category: trendingCategorySuggestions = ,
 } = {},
 } = {},
 },
}

## 輸入

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

## 例

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;

> !重要suggestionsListパラメータ内の各提案はkeyphrase\_fallbackブールパラメータをサポートしています。 trueに設定された場合、検索結果がない場合は最初のsuggestion blockの最初の提案を代替キーワードとしてSearch使用します。サンプルコードのスニペットをご覧ください:
> 
> ...
> state: {
> suggestionsList: { suggestion: 'title\_context\_aware', max: 10, keyphrase\_fallback: true},
> itemsPerPage: defaultItemsPerPage,
> },
> ...

> !注ページに追加する前に、UIコンポーネントをウィジェットコンポーネントに変換してください。
> 
> コンポーネントをウィジェットコンポーネントに変換するには、UIコンポーネントをwidgetまたはsetWidget関数に渡します。

> !注**注意事項**これらのReactリソースは、あなたの実装に役立ちます:
> 
> -   ウィジェットの動作例を見るには、Search JS SDKとUIコンポーネントパッケージを使って作成された [スターターキットのウェブサイト](https://developers.sitecorecloud.io/search-sdk/react/website) をご覧ください。
>     
> -   GitHubリポジトリをダウンロードまたはフォーク[できます。](https://github.com/Sitecore/Sitecore-Search-JS-SDK-Starter-Kit/blob/main/README.md)
>