How to setup federated search with facets? #5
Description
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;