fix(middleware): subscribe middleware before initializing main index

src/lib/InstantSearch.ts

@@ -482,16 +482,16 @@ See ${createDocumentationLink({
 
     this.mainHelper = mainHelper;
 
+    this.middleware.forEach(({ instance }) => {
+      instance.subscribe();
+    });
+
     this.mainIndex.init({
       instantSearchInstance: this,
       parent: null,
       uiState: this._initialUiState,
     });
 
-    this.middleware.forEach(({ instance }) => {
-      instance.subscribe();
-    });
-
     mainHelper.search();
 
     // Keep the previous reference for legacy purpose, some pattern use

src/lib/__tests__/InstantSearch-test.tsx

@@ -1540,8 +1540,8 @@ describe('use', () => {
       .invocationCallOrder[0];
     const middlewareSubscribeCallOrder =
       middlewareSpy.subscribe.mock.invocationCallOrder[0];
-    // Checks that `mainIndex.init` was called before subscribing the middleware.
-    expect(widgetsInitCallOrder).toBeLessThan(middlewareSubscribeCallOrder);
+    // Checks that `mainIndex.init` was called after subscribing the middleware.
+    expect(widgetsInitCallOrder).toBeGreaterThan(middlewareSubscribeCallOrder);
 
     await wait(0);
 

src/middlewares/__tests__/createInsightsMiddleware.ts

@@ -1,28 +1,34 @@
-import algoliasearch from 'algoliasearch';
-import algoliasearchHelper from 'algoliasearch-helper';
+import instantsearch from '../../index.es';
 import { createInsightsMiddleware } from '../';
-import { createInstantSearch } from '../../../test/mock/createInstantSearch';
 import {
   createInsights,
   createInsightsUmdVersion,
 } from '../../../test/mock/createInsightsClient';
+import { createSearchClient } from '../../../test/mock/createSearchClient';
 import { warning } from '../../lib/utils';
-import type { SearchClient } from '../../types';
 
 describe('insights', () => {
   const createTestEnvironment = () => {
     const { analytics, insightsClient } = createInsights();
-    const instantSearchInstance = createInstantSearch({
-      client: algoliasearch('myAppId', 'myApiKey'),
+    const indexName = 'my-index';
+    const instantSearchInstance = instantsearch({
+      searchClient: createSearchClient({
+        // @ts-expect-error only available in search client v4
+        transporter: {
+          headers: {
+            'x-algolia-application-id': 'myAppId',
+            'x-algolia-api-key': 'myApiKey',
+          },
+        },
+      }),
+      indexName,
     });
-    const helper = algoliasearchHelper({} as SearchClient, '');
-    const getUserToken = () => {
-      return (helper.state as any).userToken;
-    };
-    // @ts-expect-error
-    instantSearchInstance.mainIndex = {
-      getHelper: () => helper,
-    };
+    instantSearchInstance.start();
+
+    const helper = instantSearchInstance.mainIndex.getHelper();
+
+    // @ts-expect-error `userToken` exists in only search client v4
+    const getUserToken = () => helper.state.userToken;
 
     return {
       analytics,
@@ -37,17 +43,25 @@ describe('insights', () => {
     const { analytics, insightsClient, libraryLoadedAndProcessQueue } =
       createInsightsUmdVersion();
 
-    const instantSearchInstance = createInstantSearch({
-      client: algoliasearch('myAppId', 'myApiKey'),
+    const indexName = 'my-index';
+    const instantSearchInstance = instantsearch({
+      searchClient: createSearchClient({
+        // @ts-expect-error only available in search client v4
+        transporter: {
+          headers: {
+            'x-algolia-application-id': 'my-app-id',
+            'x-algolia-api-key': 'my-api-key',
+          },
+        },
+      }),
+      indexName,
     });
-    const helper = algoliasearchHelper({} as SearchClient, '');
-    const getUserToken = () => {
-      return (helper.state as any).userToken;
-    };
-    // @ts-expect-error
-    instantSearchInstance.mainIndex = {
-      getHelper: () => helper,
-    };
+    instantSearchInstance.start();
+
+    const helper = instantSearchInstance.mainIndex.getHelper();
+
+    const getUserToken = () => (helper.state as any).userToken;
+
     return {
       analytics,
       insightsClient,

src/middlewares/__tests__/createRouterMiddleware.ts

@@ -0,0 +1,100 @@
+import { createSearchClient } from '../../../test/mock/createSearchClient';
+import { wait } from '../../../test/utils/wait';
+import instantsearch from '../../index.es';
+import { searchBox } from '../../widgets';
+
+describe('router', () => {
+  it('sets initial ui state after reading URL', async () => {
+    const searchClient = createSearchClient();
+    const search = instantsearch({
+      indexName: 'my-index',
+      searchClient,
+      routing: {
+        router: {
+          onUpdate: () => {},
+          read: () => {
+            return {
+              'my-index': {
+                query: 'iPhone',
+              },
+            };
+          },
+          write: () => {},
+          createURL: () => '',
+          dispose: () => {},
+        },
+      },
+    });
+    search.addWidgets([
+      searchBox({ container: document.createElement('div') }),
+    ]);
+    search.start();
+
+    await wait(0);
+
+    expect(search.getUiState()).toMatchInlineSnapshot(`
+      {
+        "my-index": {
+          "query": "iPhone",
+        },
+      }
+    `);
+  });
+
+  it('sets initial ui state correctly when instantSearchInstance is re-used', async () => {
+    const currentRouteState = {
+      value: {
+        'my-index': {
+          query: 'iPhone',
+        },
+      },
+    };
+    const searchClient = createSearchClient();
+    const search = instantsearch({
+      indexName: 'my-index',
+      searchClient,
+      routing: {
+        router: {
+          onUpdate: () => {},
+          read: () => {
+            return currentRouteState.value;
+          },
+          write: () => {},
+          createURL: () => '',
+          dispose: () => {},
+        },
+      },
+    });
+    search.addWidgets([
+      searchBox({ container: document.createElement('div') }),
+    ]);
+    search.start();
+    await wait(0);
+    expect(search.getUiState()).toMatchInlineSnapshot(`
+      {
+        "my-index": {
+          "query": "iPhone",
+        },
+      }
+    `);
+
+    search.dispose();
+    currentRouteState.value = {
+      'my-index': {
+        query: 'MacBook',
+      },
+    };
+    search.addWidgets([
+      searchBox({ container: document.createElement('div') }),
+    ]);
+    search.start();
+    await wait(0);
+    expect(search.getUiState()).toMatchInlineSnapshot(`
+      {
+        "my-index": {
+          "query": "MacBook",
+        },
+      }
+    `);
+  });
+});

src/middlewares/createInsightsMiddleware.ts

@@ -6,6 +6,7 @@ import type {
 } from '../types';
 import { getInsightsAnonymousUserTokenInternal } from '../helpers';
 import { warning, noop, getAppIdAndApiKey, find } from '../lib/utils';
+import connectConfigure from '../connectors/configure/connectConfigure';
 
 export type InsightsEvent = {
   insightsMethod?: InsightsClientMethod;
@@ -88,25 +89,32 @@ export const createInsightsMiddleware: CreateInsightsMiddleware = (props) => {
     });
     insightsClient('init', { appId, apiKey, ...insightsInitParams });
 
+    const createWidget = connectConfigure(noop);
+    let configureClickAnalytics: ReturnType<typeof createWidget> | undefined;
+    let configureUserToken: ReturnType<typeof createWidget> | undefined;
+
     return {
       onStateChange() {},
       subscribe() {
         insightsClient('addAlgoliaAgent', 'insights-middleware');
 
-        // At the time this middleware is subscribed, `mainIndex.init()` is already called.
-        // It means `mainIndex.getHelper()` exists.
-        const helper = instantSearchInstance.mainIndex.getHelper()!;
+        configureClickAnalytics = createWidget({
+          searchParameters: { clickAnalytics: true },
+        });
+        instantSearchInstance.addWidgets([configureClickAnalytics]);
 
         const setUserTokenToSearch = (userToken?: string) => {
-          if (userToken) {
-            helper.setState(
-              helper.state.setQueryParameter('userToken', userToken)
-            );
+          if (configureUserToken) {
+            instantSearchInstance.renderState[
+              instantSearchInstance.indexName
+            ].configure!.refine({ userToken });
+          } else {
+            configureUserToken = createWidget({
+              searchParameters: { userToken },
+            });
+            instantSearchInstance.addWidgets([configureUserToken]);
           }
         };
-        const hasUserToken = () => Boolean((helper.state as any).userToken);
-
-        helper.setState(helper.state.setQueryParameter('clickAnalytics', true));
 
         const anonymousUserToken = getInsightsAnonymousUserTokenInternal();
         if (hasInsightsClient && anonymousUserToken) {
@@ -132,7 +140,13 @@ export const createInsightsMiddleware: CreateInsightsMiddleware = (props) => {
           if (onEvent) {
             onEvent(event, _insightsClient);
           } else if (event.insightsMethod) {
-            if (hasUserToken()) {
+            // At this point, instantSearchInstance must be started and
+            // it means there is a configure widget (added above).
+            const hasUserToken = Boolean(
+              instantSearchInstance.renderState[instantSearchInstance.indexName]
+                .configure!.widgetParams.searchParameters.userToken
+            );
+            if (hasUserToken) {
               insightsClient(event.insightsMethod, event.payload);
             } else {
               warning(
@@ -154,6 +168,12 @@ See documentation: https://www.algolia.com/doc/guides/building-search-ui/going-f
       },
       unsubscribe() {
         insightsClient('onUserTokenChange', undefined);
+        instantSearchInstance.removeWidgets([
+          configureClickAnalytics!,
+          configureUserToken!,
+        ]);
+        configureClickAnalytics = undefined;
+        configureUserToken = undefined;
         instantSearchInstance.sendEventToInsights = noop;
       },
     };

src/middlewares/createRouterMiddleware.ts

@@ -57,13 +57,11 @@ export const createRouterMiddleware = <
     // casting to UiState here to keep createURL unaware of custom UiState
     // (as long as it's an object, it's ok)
     instantSearchInstance._createURL = topLevelCreateURL as CreateURL<UiState>;
-    instantSearchInstance._initialUiState = {
-      ...instantSearchInstance._initialUiState,
-      ...stateMapping.routeToState(router.read()),
-    };
 
     let lastRouteState: TRouteState | undefined = undefined;
 
+    const initialUiState = instantSearchInstance._initialUiState;
+
     return {
       onStateChange({ uiState }) {
         const routeState = stateMapping.stateToRoute(uiState);
@@ -78,6 +76,11 @@ export const createRouterMiddleware = <
       },
 
       subscribe() {
+        instantSearchInstance._initialUiState = {
+          ...initialUiState,
+          ...stateMapping.routeToState(router.read()),
+        };
+
         router.onUpdate((route) => {
           instantSearchInstance.setUiState(stateMapping.routeToState(route));
         });