How could I filter search on the frontend with react-instantsearch-hooks-web?


My site supports 7 different languages. For example, if the users are on the en site, I only want to show en results.

I built the site with React + Sanity (CMS) and need to sync all the documents with Algolia. I plan to put all the documents into one index and filter them by lang in the frontend. These documents have a lang attribute which I can use to filter

{id: 1, title: "Hello", lang: "en"},
{id: 2, title: "Bonjour", lang: "fr"}
{id: 3, title: "こんにちは", lang: "ja"}

One index for each lang would be much complicated so I keep it simple.

Anyone could show me how to filter those documents in the frontend.

import algoliasearch from "algoliasearch/lite";
import {
} from "react-instantsearch-hooks-web";

export function SearchPage() {

 // I already have the user lang here
const lang = getUserLang()

// How could I filter the search results to include only documents with the correct lang
  return (
				<SearchBox autoFocus={true} placeholder="Search"/>
                <RefinementList attribute="facetingType" />
                <Stats />
				 <InfiniteHits hitComponent={Hit}/>

I should use the filter API but couldn’t figure out how to use it with the react-instantsearch-hooks-webhook yet

We can use the Configure component

To filter search on the frontend using react-instantsearch-hooks-web, you can utilize the various hooks provided by the library to interact with Algolia’s search API like Vidmate and apply filters dynamically. Algolia is a popular search engine that provides powerful search capabilities for your frontend applications.