Skip to content

feat: add possibility to access search client via provider

Pandu Supriyono requested to merge feature/access-search-client into master

Provide SearchClientContext for type-safe, flexible search client access

Background / Motivation

Currently, SearchkitWrapper initializes the Algolia search client internally and passes it directly to <InstantSearch>. While this works for basic search functionality, it limits flexibility for advanced use cases, namely that components deeper in the tree cannot easily access the underlying search client (ie https://support.algolia.com/hc/en-us/articles/4415033762449-How-to-show-all-facet-values-including-the-ones-with-no-hits)

To address these limitations, we introduce a context-based approach.

Changes

  1. Add SearchClientContext

    • Created a React context (SearchClientContext) to provide the search client throughout the component tree.
    • Introduced a useSearchClient hook to safely access the client in child components.
  2. Update SearchkitWrapper

    • Wrap <InstantSearch> with SearchClientContext.Provider.
    • Typed searchClient as SearchClient for full TypeScript support.
    • Ensures onlyFetchWithQuery logic remains functional and type-safe.
  3. Type improvements

    • Added SearchClient type in types/General.ts with full typing for searchForFacetValues.
    • Stronger typing improves DX and reduces potential runtime errors when using the search client in custom components.
  4. Library exports

    • Exported useSearchClient from the library entry point (src/index.ts) for external usage.

Impact

  • Components can consume the search client via useSearchClient.
  • Improves TypeScript safety for advanced search operations.
  • Lays the foundation for more flexible, optimized search interactions (e.g., conditional fetching, custom facet queries).
Edited by Pandu Supriyono

Merge request reports

Loading