Search

This section provides a guide to using the @archibald/search package, which provides a universal system for handling search functionality.

Sections

• Architecture: An overview of the universal search interface and adapter pattern.
• Setup: How to configure the search module and client.
• useSearch: The generic search hook.
• useSearchTerm: Searching by a search term.
• useSearchCategory: Searching within a category.
• useSearchProductRecommendations: Fetching product recommendations.
• useSearchQuerySuggestions: Fetching autocompletion suggestions.
• useSearchProductSuggestions: Fetching product suggestions.
• useSearchEvents: Tracking user interactions.
• Search Adapters: An explanation of the adapter pattern and how to use different search adapters.

Installation

Run following to install @archibald/search package:

npm install @archibald/search

High-level Architecture

The @archibald/search package provides a SearchClient and a set of hooks to interact with different search providers.

@archibald/search

The @archibald/search package provides:

• Universal Search Client: A unified API for interacting with search and recommendation data.
• Isomorphic Search Hooks: useSearch, useSearchTerm, useSearchCategory, and useSearchProductRecommendations hooks that work on all platforms.
• Flexible Adapter Pattern: Pluggable adapters for different search providers.
• Server-Side Integration: Provides a SearchModule for connecting to backend providers.

Minimum Setup

Application Side

On the Application side you need to create a SearchClient where you can also configure the client. You can configure adapter and choose from either predefined mock, commerce, coveo adapters or provide your own search adapter.

import { SearchClient } from '@archibald/search';

export default new SearchClient({ adapter: 'commerce' });

You also need to provide a SearchDataProvider, normally it is added to the <App /> component.

function App() {
    return (
        <SearchDataProvider client={SearchClient}>
            <AppLayout>
                <AppRoutes />
            </AppLayout>
        </SearchDataProvider>
    );
}

NodeJS (Server Side)

On the NodeJS there is an SearchModule which takes search provider. There are three default SearchProviders implemented:

• CommerceSearchProvider
• CoveoSearchProvider
• MockSearchProvider

Each of these integrates different 3rd party search provider, but similar to adapter, you can provide your own Provider.

Provider

const commerceSearchProvider = new CommerceSearchProvider({ config: hybris.api });

Module

class Server extends CoreServer {
    public async initModules() {
        const { hybris } = this.configService.get();
        const commerceSearchProvider = new CommerceSearchProvider({ config: hybris.api });
        this.registerModules([new SearchModule({ provider: commerceSearchProvider })]);
    }
}

Example: Searching for a Term

Here is a simple example of how to use the useSearchTerm hook to search for a term and display the results:

import { useSearchTerm } from '@archibald/search';

function SearchResults({ query }) {
    const { data: results, isLoading } = useSearchTerm({ search: query });

    if (isLoading) return <Loading />;
    return <ProductList products={results.products} />;
}