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

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

## ジェネリック応答

{
 widgetRef,
 actions: { onItemClick },
 state: { page },
 queryResult: { isLoading, isFetching, data: { content: articles =  } = {} },
}

## 輸入

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

## 例

import type { RecommendationInitialState, RecommendationWidgetQuery } from '@sitecore-search/react';
import { WidgetDataType, useRecommendation, widget } from '@sitecore-search/react';

type ArticleModel = {
 id: string;
 name: string;
 author?: string;
 url?: string;
 image\_url?: string;
 source\_id?: string;
};

type RecommendationProps = {
 title?: string;
 itemsToDisplay?: number;
};

type InitialState = RecommendationInitialState<'itemsPerPage'>;

const DEFAULT\_IMG\_URL = 'https://placehold.co/500x300?text=No%20Image'; // TODO: Update with corresponding fallback image

export const RecommendationComponent = ({ title = '', itemsToDisplay = 6 }: RecommendationProps) => {
 const {
 widgetRef,
 actions: { onItemClick },
 queryResult: { isLoading, isFetching, data: { content: articles =  } = {} },
 } = useRecommendation<ArticleModel, InitialState>({
 query: (query:RecommendationWidgetQuery) => query,
 state: {
 itemsPerPage: itemsToDisplay,
 },
 });

 const loading = isLoading || isFetching;

 return ( <div ref={widgetRef}> ... </div> );
};

const RecommendationBasicHorizontalStyledWidget = widget(RecommendationComponent, WidgetDataType.RECOMMENDATION, 'content');
export default RecommendationBasicHorizontalStyledWidget;

> !注ページに追加する前に、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)
>