useSearchCategory
The useSearchCategory hook is a specialized version of useSearch used for searching within a specific category. It simplifies category browsing by managing cache keys and ensuring that the categoryId is correctly passed to the adapter. It works on the client as well as on the server.
import { useSearchCategory } from '@archibald/search';
const { data: results, isLoading } = useSearchCategory(searchOptions, fetchOptions);
Parameters
| Name | Type | Required | Description |
|---|---|---|---|
| searchOptions | SearchRequestOptions | Options for the category search. | |
| fetchOptions | FetchMinOptions | Standard options for the useFetch hook. |
searchOptions
- Type:
SearchRequestOptions
| Property | Type | Description |
|---|---|---|
| categoryId | string | The ID of the category to browse. |
| search | string | Optional refinement query within the category. |
| pageSize | number | Number of results per page. |
fetchOptions
Standard data fetching options. See useFetch for more information.
Return value
- Type:
FetchResult<SearchResponse>
| Property | Type | Description |
|---|---|---|
| data | SearchResponse | null | The search results for the category. |
| isLoading | boolean | True if the request is in progress. |
| isDone | boolean | True if the request has finished. |
Example
import { useSearchCategory } from '@archibald/search';
function CategoryList({ id }) {
const { data, isLoading } = useSearchCategory({ categoryId: id });
if (isLoading) return <Loading />;
return (
<div>
<h2>Category: {data.breadcrumbs?.[0]?.name}</h2>
<ProductList products={data.products} />
</div>
);
}