fix(routing): initialize uistate early

fixes algolia/vue-instantsearch#1066 fixes algolia/vue-instantsearch#1062 see: #4849 In Vue InstantSearch SSR, the mainIndex gets init'ed *before* it does in regular InstantSearch (see https://codesandbox.io/s/beautiful-mestorf-ijc75?file), and at that point the ui state should already be initialized (before start).
algolia · Jan 27, 2022 · 9861479 · 9861479
1 parent c234374
commit 9861479
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 1 deletion.
diff --git a/src/middlewares/__tests__/createRouterMiddleware.ts b/src/middlewares/__tests__/createRouterMiddleware.ts
@@ -4,7 +4,44 @@ import instantsearch from '../../index.es';
 import { searchBox } from '../../widgets';
 
 describe('router', () => {
-  it('sets initial ui state after reading URL', async () => {
+  it('sets initial ui state by reading URL before start', () => {
+    const searchClient = createSearchClient();
+    const search = instantsearch({
+      indexName: 'my-index',
+      searchClient,
+      initialUiState: {
+        'other-index': { query: 'dogs' },
+      },
+      routing: {
+        router: {
+          onUpdate: () => {},
+          read: () => {
+            return {
+              'my-index': {
+                query: 'iPhone',
+              },
+            };
+          },
+          write: () => {},
+          createURL: () => '',
+          dispose: () => {},
+        },
+      },
+    });
+
+    expect(search._initialUiState).toMatchInlineSnapshot(`
+      {
+        "my-index": {
+          "query": "iPhone",
+        },
+        "other-index": {
+          "query": "dogs",
+        },
+      }
+    `);
+  });
+
+  it('sets initial ui state by reading URL on subscribe', async () => {
     const searchClient = createSearchClient();
     const search = instantsearch({
       indexName: 'my-index',

diff --git a/src/middlewares/createRouterMiddleware.ts b/src/middlewares/createRouterMiddleware.ts
@@ -62,6 +62,11 @@ export const createRouterMiddleware = <
 
     const initialUiState = instantSearchInstance._initialUiState;
 
+    instantSearchInstance._initialUiState = {
+      ...initialUiState,
+      ...stateMapping.routeToState(router.read()),
+    };
+
     return {
       onStateChange({ uiState }) {
         const routeState = stateMapping.stateToRoute(uiState);