Skip to main content

Search

The @hv/search package exposes a vendor-agnostic interface to product search integrations.

A product search integration may be provided by a dedicated search vendor, a commerce platform vendor, or a catalog vendor.

Integration Function​

The integration factory function instantiates a SearchIntegration, the interface to the product search provider. It is intended to be used in server components or route handlers.

This Function is Server Only

Do not try to instantiate the Search() function in client ("use client") components. Use the wrapping hooks provided in this package instead which expose these methods to the client.

Usage​

Example usage:

import { Search } from '@hv/search';

...

const { searchSuggestions } = Search({
  locale: 'en-US',
});

const suggestionsResult = await searchSuggestions({ q: 'shoes' });

API​

The @hv/search package contains an /api folder that exports code to stand-up Next.js Route Handlers.

These endpoints each correspond to a React hook from the @hv/search/client export, and use the SearchIntegration function as the underlying implementation.

Together these are useful for fetching data in client components.

Endpoints​

Typically you would only call these endpoints via their corresponding use...() hook in a client component.

/getSearchResult​

Fetches full product search results for a given query and parameters.

/getSuggestions​

Fetches simple product suggestions based on the given query.

Hooks​

@hv/search/client exports React hooks for fetching search results.

useSearch()​

Perform a product search via API endpoint and update results in the UX.

useSearchListeners()​

Provides functionality to listen for search events and execute a callback when they occur.

useSuggest()​

Perform a product suggestion search via API endpoint and update results in the UX.

Reference​

For more documentation on the types exposed by this package, check out the reference section:

Reference