1. クエリフック

usePreviewSearch(プレビューサーチ)

日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

preview searchクエリ フックを使用して、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;
メモ

UIコンポーネントをウィジェット コンポーネントに変換してから、ページに追加します。

コンポーネントをウィジェットコンポーネントに変換するには、UIコンポーネントをwidget関数またはsetWidget関数に渡します。

この記事を改善するための提案がある場合は、 お知らせください!