Clicking a search result doesn’t send an event as intended; instead, an error is briefly displayed: ‘Cannot read properties of undefined (reading: __queryID)’. I have clickAnalytics set to true.
My InstantSearch component:
import { connectSearchBox, InstantSearch, Configure } from 'react-instantsearch-dom';
//...
<InstantSearch
searchClient={searchClient}
indexName={process.env.NEXT_PUBLIC_ALGOLIA_SEARCH_INDEX_NAME}
searchState={searchState}
onSearchStateChange={setSearchState}
createURL={createURL}
data-qa="instantSearchDashboardDataQa"
>
<Configure clickAnalytics hitsPerPage={10} filters={`search_api_language:${locale}`} />
<VirtualSearchBox />
// ...
</InstantSearch>
The component representing hits:
const FormationPreview = (props: FormationPreviewProps) => {
//...
return (<Link
href={url}
onClick={() => {
insights('clickedObjectIdsAfterSearch', {
eventName: 'searchResultClicked',
})
}}
>
// ...
</Link>)
export default connectHitInsights(aa)(FormationPreview);
When I step into search-insights’s code, the error proves to be thrown inside inferPayload(_ref) in connectHitInsights.js. currentHit is undefined, so it has no __queryID property:
What exactly is responsible for populating _ref with the relevant data? NB _ref.results has a queryID for what it’s worth:
My Algolia versions:
"algoliasearch": "^4.10.5",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-instantsearch-dom": "^6.19.0",
"search-insights": "^2.2.1",