fix(routing): warn if initialUiState is used (#6238)

[CR-6027]
algolia · Jun 17, 2024 · 7b4cc3f · 7b4cc3f
1 parent 871afa4
commit 7b4cc3f
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 1 deletion.
diff --git a/packages/instantsearch.js/src/middlewares/__tests__/createRouterMiddleware.ts b/packages/instantsearch.js/src/middlewares/__tests__/createRouterMiddleware.ts
@@ -139,4 +139,74 @@ describe('router', () => {
     expect(router.onUpdate).toHaveBeenCalledTimes(1);
     expect(setUiStateSpy).not.toHaveBeenCalled();
   });
+
+  it('warns if initialUiState and routing are used together', () => {
+    const state = {
+      'my-index': {
+        query: 'iPhone',
+      },
+    };
+
+    const searchClient = createSearchClient();
+    const router: Router = {
+      onUpdate: jest.fn((callback) => {
+        callback(state);
+      }),
+      read: () => state,
+      write: () => {},
+      createURL: () => '',
+      dispose: () => {},
+    };
+
+    const search = instantsearch({
+      indexName: 'my-index',
+      searchClient,
+      initialUiState: {
+        'my-index': {
+          query: 'MacBook',
+        },
+      },
+      routing: {
+        router,
+      },
+    });
+
+    expect(() => {
+      search.start();
+    }).toWarnDev(
+      '[InstantSearch.js]: Using `initialUiState` together with routing is not recommended. The `initialUiState` will be overwritten by the URL parameters.'
+    );
+  });
+
+  it("does not warn if initialUiState isn't used", () => {
+    const state = {
+      'my-index': {
+        query: 'iPhone',
+      },
+    };
+
+    const searchClient = createSearchClient();
+    const router: Router = {
+      onUpdate: jest.fn((callback) => {
+        callback(state);
+      }),
+      read: () => state,
+      write: () => {},
+      createURL: () => '',
+      dispose: () => {},
+    };
+
+    const search = instantsearch({
+      indexName: 'my-index',
+      searchClient,
+      initialUiState: {},
+      routing: {
+        router,
+      },
+    });
+
+    expect(() => {
+      search.start();
+    }).not.toWarnDev();
+  });
 });
diff --git a/packages/instantsearch.js/src/middlewares/createRouterMiddleware.ts b/packages/instantsearch.js/src/middlewares/createRouterMiddleware.ts
@@ -1,6 +1,6 @@
 import historyRouter from '../lib/routers/history';
 import simpleStateMapping from '../lib/stateMappings/simple';
-import { isEqual } from '../lib/utils';
+import { isEqual, warning } from '../lib/utils';
 
 import type {
   Router,
@@ -97,6 +97,11 @@ export const createRouterMiddleware = <
       },
 
       subscribe() {
+        warning(
+          Object.keys(initialUiState).length === 0,
+          'Using `initialUiState` together with routing is not recommended. The `initialUiState` will be overwritten by the URL parameters.'
+        );
+
         instantSearchInstance._initialUiState = {
           ...initialUiState,
           ...stateMapping.routeToState(router.read()),