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 <[email protected]>

Co-authored-by: François Chalifour <[email protected]>

Author: Haroenv

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,
         },

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),
+    });
+  });
 });

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) => {