Reputation: 301
I am new to react and I have this Algolia Insights middleware component to send events to Algolia. But Algolia getting duplicate events on page load. once load the page there are duplicate view events for anonymous user and same events for authorised user as well. Every view event repeat twice. why this component bubbling the same events?
import aa from 'search-insights';
import { createInsightsMiddleware } from 'instantsearch.js/es/middlewares';
import { useInstantSearch } from 'react-instantsearch-hooks-web';
import { useLayoutEffect } from 'react';
import { useQuery } from '@tanstack/react-query';
var userToken = '000000';
export function InsightsMiddleware() {
const { use } = useInstantSearch();
const token = useQuery('function to get user token');
if (token.data !== undefined && token.data != null) {
userToken = token.data?.userToken;
}
useLayoutEffect(() => {
const middleware = createInsightsMiddleware({
insightsClient: aa,
insightsInitParams: {
useCookie: true
},
});
aa('setUserToken', userToken);
return use(middleware);
}, [use, token.data?.userToken]);
return null;
}
And below is where I am using this component
<div className={styles.wrapper}>
<InstantSearchSSRProvider {...serverState}>
<InstantSearch
searchClient={searchClient}
indexName={indexName}
routing={{
router: history({
getLocation: () =>
typeof window === 'undefined' ? new URL(url) : window.location,
}),
}}
>
<InsightsMiddleware />
<Container fluid="lg">
<div className="mb-3">
<SearchBox />
</div>
<CurrentRefinements />
<Hits />
</Container>
</InstantSearch>
</InstantSearchSSRProvider>
</div>
Upvotes: 1
Views: 245