Algolia Insights middleware sending duplicate events

Open Q&A
, , ,
1

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? Click and Filter Applied event seems fine those being sent once only.
This is how I implemented the middleware

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 this is how I am using this middleware

<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>
1 Like
3

It is not only occurring with the middleware. Using the insightsClient with insights object for InstantSearch also produces many duplicates. Not sure if someone from Product could take a look on this. It seems like a newly introduced bug.