---
title: "useSearchResults"
slug: "usesearchresults"
abstract: "ReactのSitecore Search JS SDKにあるuseSearchResultsクエリフックの詳細。"
---
# useSearchResults

検索結果クエリフックを使って、検索結果ウィジェットのデータを要求・取得できます。ページ、キーフレーズ、選ばれたFacets、itemsPerPage、sortType。

## Requestパラメータ

名称

種類

概要

page

整数

現在のページ。

keyphrase

ストリング

検索する文字列。

selectedFacets

文字列の配列

選択したfacetsのIDです。

itemsPerPage

整数

ページあたりの結果数。

sortType

ストリング

結果をソートするための価値です。

## ジェネリック応答

{
 widgetRef,
 query,
 actions: {
 onResultsPerPageChange,
 onPageNumberChange,
 onItemClick,
 onFilterClick,
 onSortChange,
 onFacetClick,
 onClearFilters,
 },
 state: { sortType, page, itemsPerPage },
 queryResult: {
 isLoading,
 isFetching,
 data: {
 total\_item: totalItems = 0,
 sort: { choices: sortChoices =  } = {},
 facet: facets = ,
 content: articles = ,
 } = {},
 }
}

## 輸入

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

## 例

import type { SearchResultsInitialState, SearchResultsStoreState, SearchResultsWidgetQuery } from '@sitecore-search/react';
import { WidgetDataType, useSearchResults, useSearchResultsSelectedFacets, widget } from '@sitecore-search/react';

type ArticleModel = {
 id: string;
 type?: string;
 title?: string;
 name?: string;
 subtitle?: string;
 url?: string;
 description?: string;
 content\_text?: string;
 image\_url?: string;
 source\_id?: string;
};

type ArticleSearchResultsProps = {
 defaultSortType?: SearchResultsStoreState'sortType';
 defaultPage?: SearchResultsStoreState'page';
 defaultItemsPerPage?: SearchResultsStoreState'itemsPerPage';
 defaultKeyphrase?: SearchResultsStoreState'keyphrase';
};

type InitialState = SearchResultsInitialState<'itemsPerPage' | 'keyphrase' | 'page' | 'sortType'>;

export const SearchResultsComponent = ({
 defaultSortType = 'featured\_desc',
 defaultPage = 1,
 defaultKeyphrase = '',
 defaultItemsPerPage = 24,
}: ArticleSearchResultsProps) => {
 const {
 widgetRef,
 actions: {
 onResultsPerPageChange,
 onPageNumberChange,
 onItemClick,
 onFilterClick,
 onSortChange,
 onFacetClick,
 onClearFilters,
 },
 state: { sortType, page, itemsPerPage },
 queryResult: {
 isLoading,
 isFetching,
 data: {
 total\_item: totalItems = 0,
 sort: { choices: sortChoices =  } = {},
 facet: facets = ,
 content: articles = ,
 } = {},
 },
 } = useSearchResults<ArticleModel, InitialState>({
 query: (query:SearchResultsWidgetQuery) => query,
 state: {
 sortType: defaultSortType,
 page: defaultPage,
 itemsPerPage: defaultItemsPerPage,
 keyphrase: defaultKeyphrase,
 },
 });
 const totalPages = Math.ceil(totalItems / itemsPerPage);
 const selectedSortIndex = sortChoices.findIndex((s:any) => s.name === sortType);
 const selectedFacetsFromApi = useSearchResultsSelectedFacets();
 if (isLoading) {
 return ( <div> ... </div> );
 }
 return ( <div ref={widgetRef}> ... </div> );
};

const SearchResultsStyledWidget = widget(SearchResultsComponent, WidgetDataType.SEARCH\_RESULTS, 'content');

export default SearchResultsStyledWidget;

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