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

Hi,

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 {
	InstantSearch,
	SearchBox,
	InfiniteHits,
	InstantSearchSSRProvider,
} 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 (
           <InstantSearch
				searchClient={searchClient}
				indexName={searchIndex}
				insights
			>
				<SearchBox autoFocus={true} placeholder="Search"/>
                <RefinementList attribute="facetingType" />
					
                <Stats />
				 <InfiniteHits hitComponent={Hit}/>
			</InstantSearch>
   )
}

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.