fix(hooks): apply initial search parameters in useConnector (#3276)

* wip: apply initial search parameters in hooks * alternative location * shorter * this fixes the following case too * Apply suggestions from code review Co-authored-by: François Chalifour <francoischalifour@users.noreply.github.com> Co-authored-by: François Chalifour <francoischalifour@users.noreply.github.com>
algolia · Jan 24, 2022 · f85d679 · f85d679
1 parent c481232
commit f85d679
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 2 deletions.
diff --git a/packages/react-instantsearch-hooks/src/connectors/__tests__/useHitsPerPage.test.tsx b/packages/react-instantsearch-hooks/src/connectors/__tests__/useHitsPerPage.test.tsx
@@ -27,7 +27,7 @@ describe('useHitsPerPage', () => {
       items: [
         {
           default: true,
-          isRefined: false,
+          isRefined: true,
           label: '4 hits per page',
           value: 4,
         },

diff --git a/packages/react-instantsearch-hooks/src/connectors/__tests__/useSearchBox.test.tsx b/packages/react-instantsearch-hooks/src/connectors/__tests__/useSearchBox.test.tsx
@@ -28,4 +28,35 @@ describe('useSearchBox', () => {
       refine: expect.any(Function),
     });
   });
+
+  test('returns the connector render state with initialUiState', async () => {
+    const wrapper = createInstantSearchTestWrapper({
+      initialUiState: {
+        indexName: {
+          query: 'testio',
+        },
+      },
+    });
+    const { result, waitForNextUpdate } = renderHook(() => useSearchBox(), {
+      wrapper,
+    });
+
+    // Initial render state from manual `getWidgetRenderState`
+    expect(result.current).toEqual({
+      query: 'testio',
+      isSearchStalled: false,
+      clear: expect.any(Function),
+      refine: expect.any(Function),
+    });
+
+    await waitForNextUpdate();
+
+    // InstantSearch.js state from the `render` lifecycle step
+    expect(result.current).toEqual({
+      query: 'testio',
+      isSearchStalled: false,
+      clear: expect.any(Function),
+      refine: expect.any(Function),
+    });
+  });
 });
diff --git a/packages/react-instantsearch-hooks/src/hooks/useConnector.ts b/packages/react-instantsearch-hooks/src/hooks/useConnector.ts
@@ -75,7 +75,16 @@ export function useConnector<
       // The helper exists because we've started InstantSearch.
       const helper = parentIndex.getHelper()!;
       const results =
-        parentIndex.getResults() || createSearchResults(helper.state);
+        // On SSR, we get the results injected on the Index.
+        parentIndex.getResults() ||
+        // On the browser, we create fallback results based on the widget's
+        // `getWidgetSearchParameters()` method to inject the initial UI state,
+        // or fall back to the helper state.
+        createSearchResults(
+          widget.getWidgetSearchParameters?.(helper.state, {
+            uiState: parentIndex.getWidgetUiState({})[parentIndex.getIndexId()],
+          }) || helper.state
+        );
       const scopedResults = parentIndex
         .getScopedResults()
         .map((scopedResult) => {