algolia instantsearch only show result that matches particular query (react)

Question

I'm using react instant search to show list of users in select options. I managed to show all the users in select option but I want to only show users with admin role (role === 'admin').

Ofcourse I can do this in client side by filtering the hits on role but is there any way to achieve this with react instant search?

This is how I showed all user.

AlgoliaProvider.js

import React from "react";
import algoliasearch from "algoliasearch/lite";
import { InstantSearch } from "react-instantsearch-dom";

const searchClient = algoliasearch(
  process.env.REACT_APP_ALGOLIA_APP_ID,
  process.env.REACT_APP_ALGOLIA_SEARCH_KEY
);

const AlgoliaProvider = ({ indexName, children, ...rest }) => {
  return (
    <InstantSearch indexName={indexName} searchClient={searchClient} {...rest}>
      {children}
    </InstantSearch>
  );
};

export default AlgoliaProvider;

AutoCompleteSelect.js

import React from 'react';
import {  Select } from 'antd';
import { connectAutoComplete } from 'react-instantsearch-dom';

const { Option } = Select;

const AutoCompleteSelect = ({
  hits,
  refine,
  ...rest
}) => {
  const handleSuggestion = value => {
    refine(value);
  };

    return (
      <Select showSearch onSearch={handleSuggestion} {...rest}>
        {hits.map(user => (
          <Option
            key={user.uid}
            value={user.uid}
          >
            <span>{user.name}</span>
          </Option>
        ))}
      </Select>
    );
 
};

export default connectAutoComplete(AutoCompleteSelect);

App.js

 <AlgoliaProvider indexName="User">             
   <AutoCompleteSelect placeholder="user search" />
 </AlgoliaProvider>

Answer 1

You need the faceting feature to achieve this. Read more about it here: https://www.algolia.com/doc/guides/managing-results/refine-results/faceting/

I have configured one such facet via the UI (algolia frontend) and then I use it like this in instantSearch:

<InstantSearch searchClient={.... >

<Configure
   hitsPerPage={<Number>}
   filters={`role:${user.role}`} />
...
...
</InstantSearch>

See the filters part in the code, 'role' needs to be added as a facet in the configuration (via ui or code).