How to setup federated search with facets?

[enzotar]

Issue

Facets do not update the hit results when placed in a separate Index component, even with the same indexId.

Description

We currently have the search working without federated, using InstantSearch v6, and using routing params to reload the query. See https://spaceoperator.com/marketplace

After adding federated, collectionSpecificSearchParameters and updating to v7 for instantSearch, the facets no longer work. See https://flow-a95tf0hb0-space-operator.vercel.app/marketplace

Below is the setup. Search works well. And the search also filters the facets. However interaction with the facets does not update the hit results. The indexId on the facets and hits match. Added VirtualWidget per Algolia's instructions to the index with the hits, but once added the facet filters on the first interaction only. Facets remains checked and facets no longer. uiState object does not get updated either. I have commented the VirtualWidgets.

"next": "^12.3.1", with page router
"react": "^18.2.0",
"react-instantsearch": "^7.5.0",
"react-instantsearch-router-nextjs": "^7.5.0",
"typesense": "^1.7.2",
"typesense-instantsearch-adapter": "^2.7.1",

Replicate

Visit https://flow-a95tf0hb0-space-operator.vercel.app/marketplace Open console, watch uiState object Type 'wormhole' in search, results and facets get correctly updated. Then select a facet 'Solana,' uiState gets updated but not the hits results.

Code

export const typesense_config = {
  apiKey: process.env.NEXT_PUBLIC_TYPESENSE_SEARCH_ONLY_API_KEY,
  nodes: [
    {
      host: process.env.NEXT_PUBLIC_TYPESENSE_NODE_HOST,
      port: 443,
      protocol: 'https',
    },
  ],
  numRetries: 8,
  connectionTimeoutSeconds: 10,
  cacheSearchResultsForSeconds: 5 * 60, // 5 minutes
};

export const typesense_federated_config = {
  server: typesense_config,
  collectionSpecificSearchParameters: {
    flows: {
      query_by: 'name,tags',
    },
    listings: {
      query_by: 'name,type,description',
    },
    nodes: {
      query_by: 'name,type,tags',
    },
    operators: {
      query_by: 'name,flow_skills,tasks_skills,node_skills',
    },
  },
  additionalSearchParameters: {
    query_by: 'name',
    num_typos: 2,
    typo_tokens_threshold: 1,
  },
};

const typesenseInstantsearchAdapter = new TypesenseInstantSearchAdapter(
  typesense_federated_config
);

const search_props: InstantSearchProps = {
  searchClient: typesenseInstantsearchAdapter.searchClient,
  indexName: 'flows',
  future: {
    preserveSharedStateOnUnmount: true,
  },
  routing: {
    router: history({
      cleanUrlOnDispose: false,
    }),
  },
};

const MainSearch = () => {
  return (
    <InstantSearch {...search_props}>
      <div>
        <div>
        /////////////////////////////////////////////////////////// FACETS
          <ClearRefinements />
          <div>
            <Index indexName='flows' indexId='flows'>
              <FlowFacets />
            </Index>
            <Index indexName='nodes' indexId='nodes'>
              <NodeFacets />
            </Index>
            <Index indexName='listings' indexId='listings'>
              <ListingFacets />
            </Index>
            <Index indexName='operators' indexId='operators'>
              <OperatorFacets />
            </Index>
          </div>
        </div>

        //////////////////////////////////////////// SEARCH BOX & RESULTS
        <div>
          <SearchBox />
          <div>
            <Index indexName='flows' indexId='flows'>
              ///////////////////////////////////////// THIS WORKS BUT IT ADDS FACETS IN THE WRONG PLACE
              {/* <FlowFacets /> */}

              ////////////////////////////////////////// VIRTUAL WIDGETS TRYING TO SYNC FACETS/HITS
              {/* <VirtualRefinementList attribute="tags" />
                  <VirtualRange attribute="price" /> */}
              <Hits hitComponent={FlowHit} />
            </Index>

            <Index indexName='nodes' indexId='nodes'>
              {/* <VirtualRefinementList attribute="tags" />
                  <VirtualRange attribute="price" /> */}
              <Hits hitComponent={NodeHit} />
            </Index>

            <Index indexName='listings' indexId='listings'>
              {/* <VirtualRefinementList attribute="type" />
                  <VirtualRefinementList attribute="tags" />
                  <VirtualRefinementList attribute="urgency" />
                  <VirtualRefinementList attribute="contract_type" /> */}
              <VirtualRange attribute='price' />
              <Hits hitComponent={ListingHit} />
            </Index>

            <Index indexName='operators' indexId='operators'>
              {/* <VirtualRefinementList attribute="flow_skills" />
                  <VirtualRefinementList attribute="tasks_skills" />
                  <VirtualRefinementList attribute="node_skills" /> */}
              <Hits hitComponent={OperatorHit} />
            </Index>
            <Pagination />
          </div>
        </div>
      </div>
    </InstantSearch>
  );
};

//////////////////////////////////////////////////////////////////////////////// VIRTUAL WIDGETS

import { useRange, useRefinementList } from 'react-instantsearch';

export function VirtualRefinementList(props) {

  useRefinementList(props);

  return null;
}

export function VirtualRange(props) {
  useRange(props);

  return null;
}

//////////////////////////////////////////////////////////////////////////////////// EXAMPLE FACET
import {
  DynamicWidgets,
  RangeInput,
  RefinementList,
  useInstantSearch,
} from 'react-instantsearch';
import { Panel } from '../Panel';
import { useEffect, useRef } from 'react';

const FlowFacets = () => {
  return (
    <div className="dark:text-gray-200">
      {/* <ToggleRefinement
        attribute="flow_skills"
        label="Hide Flows"
        value=""
        className="dark:text-gray-200"
      /> */}
      <DynamicWidgets facets={['tags,price']}>
        <Panel header="Flows">
          <RefinementList
            className="dark:text-gray-200"
            attribute="tags"
            translations={{
              noResultsText: 'No results',
              submitButtonTitle: 'Submit your search query.',
              resetButtonTitle: 'Clear your search query.',
            }}
            // sortBy={['name:desc']}
            limit={10}
            showMore={true}
            searchablePlaceholder={'Search here...'}
            searchable={true}
          />
        </Panel>
        <Panel header="Price">
          <RangeInput
            min={0}
            max={1000}
            attribute="price"
            classNames={{
              root: '',
              form: 'flex justify-between items-center',
              label: '',
              separator: '',
            }}
          />
        </Panel>
      </DynamicWidgets>
    </div>
  );
};

export default FlowFacets;

[phiHero]

Hi @enzotar,

This is a react-instantsearch issue.

Try putting the Facet under the same <Index> widget along with <Hits/>:

<Index indexName='flows'>
       <FlowFacets />
       <Hits hitComponent={FlowHit} />
</Index>

If you are worried about the layout, consider using css display:grid.

Does this help?

[enzotar]

I know that works. But I have 4 indices that I'm searching across. The grid would help if there was only one index.

[phiHero]

I know that works. But I have 4 indices that I'm searching across. The grid would help if there was only one index.

I am afraid it isn't possible to place them in separate Index components. If your problem is styling then you would have to rethink your layout. Again, I recommend digging into css grid, you will find a solution there.

[enzotar]

How can I control the number of queries sent? This same code sends 11 queries instead of 4, the number of indices I'm searching. For instance, there are 4 queries for one of the indices, one correctly filters the facets, but I get 4 results, and it seems like the index renders the largest response.

[enzotar]

@phiHero How can merge these queries?

[enzotar]

@jasonbosco Can you guys make an example using multiple indices and facets. Is there a chance the issue is not InstantSearch related?

[phiHero]

Hi @enzotar,

How can I control the number of queries sent?

Unfortunately no, the queries are generated by the Instantsearch widgets.

This same code sends 11 queries instead of 4, the number of indices I'm searching.

This could be because of the <DynamicWidgets/> and <RangeInput/> you are using.

There is a workaround if you want to display the hits in a different place. Use custom widgets inside the same <Index/> then store and update the hits result in a react useState so you can render them.

Is there a chance the issue is not InstantSearch related?

This is InstantSearch related. I tested using Algolia and this 'issue' still remain.