fix(ssr): perform initial multi-index search using a single request (#3385)

Author: dhayab

packages/react-instantsearch-dom/src/core/__tests__/createInstantSearchServer.js

@@ -1136,6 +1136,38 @@ describe('findResultsState', () => {
       });
     });
 
+    it('searches once with multiple indices', async () => {
+      const Connected = createWidget();
+      const App = (props) => (
+        <InstantSearch {...props}>
+          <Connected />
+          <Index indexId="index1WithRefinement" indexName="index1">
+            <Connected />
+          </Index>
+          <Index indexId="index2WithRefinement" indexName="index2">
+            <Connected />
+          </Index>
+        </InstantSearch>
+      );
+
+      const props = {
+        searchClient: createSearchClient(),
+        indexName: 'abc',
+        searchState: {
+          query: 'iPhone',
+        },
+      };
+
+      const { results } = await findResultsState(App, props);
+
+      expect(props.searchClient.search).toHaveBeenCalledTimes(1);
+      expect(results.map(({ _internalIndexId }) => _internalIndexId)).toEqual([
+        'abc',
+        'index1WithRefinement',
+        'index2WithRefinement',
+      ]);
+    });
+
     it('searches twice (cached) with dynamic widgets', async () => {
       const RefinementList = connectRefinementList(() => null);
       const App = (props) => (
@@ -1156,15 +1188,12 @@ describe('findResultsState', () => {
 
       await findResultsState(App, props);
 
-      // [search (index 1), search (index 2), dynamic (index 1), dynamic (index 2)]
-      expect(props.searchClient.search).toHaveBeenCalledTimes(4);
+      // [search, dynamic]
+      expect(props.searchClient.search).toHaveBeenCalledTimes(2);
 
       // both calls are the same, so they're cached
       expect(props.searchClient.search.mock.calls[0][0]).toEqual(
-        props.searchClient.search.mock.calls[2][0]
-      );
-      expect(props.searchClient.search.mock.calls[1][0]).toEqual(
-        props.searchClient.search.mock.calls[3][0]
+        props.searchClient.search.mock.calls[1][0]
       );
     });
 
@@ -1193,11 +1222,11 @@ describe('findResultsState', () => {
 
       await findResultsState(App, props);
 
-      // [search (index 1), search (index 2), dynamic (index 1), dynamic (index 2)]
-      expect(props.searchClient.search).toHaveBeenCalledTimes(4);
+      // [search, dynamic]
+      expect(props.searchClient.search).toHaveBeenCalledTimes(2);
 
       // first query doesn't have the fallback widget mounted yet
-      expect(props.searchClient.search.mock.calls[1][0][0]).toEqual({
+      expect(props.searchClient.search.mock.calls[0][0][1]).toEqual({
         indexName: 'index1WithRefinement',
         params: {
           facets: ['*'],
@@ -1209,7 +1238,7 @@ describe('findResultsState', () => {
       });
 
       // second query does have the fallback widget mounted, and thus also the refinement
-      expect(props.searchClient.search.mock.calls[3][0][0]).toEqual({
+      expect(props.searchClient.search.mock.calls[1][0][1]).toEqual({
         indexName: 'index1WithRefinement',
         params: {
           facetFilters: [['categories:refined!']],

packages/react-instantsearch-dom/src/core/createInstantSearchServer.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { renderToString } from 'react-dom/server';
-import algoliasearchHelper from 'algoliasearch-helper';
+import algoliasearchHelper, { SearchParameters } from 'algoliasearch-helper';
 import { version, HIGHLIGHT_TAGS } from 'react-instantsearch-core';
 
 const hasMultipleIndices = (context) => context && context.multiIndexContext;
@@ -98,33 +98,31 @@ const singleIndexSearch = (helper, parameters) =>
 const multiIndexSearch = (
   indexName,
   client,
-  helper,
   sharedParameters,
   { [indexName]: mainParameters, ...derivedParameters }
 ) => {
+  const helper = algoliasearchHelper(client, indexName);
   const indexIds = Object.keys(derivedParameters);
 
   const searches = [
-    helper.searchOnce({
-      ...sharedParameters,
-      ...mainParameters,
-    }),
-    ...indexIds.map((indexId) => {
-      const parameters = derivedParameters[indexId];
-
-      return algoliasearchHelper(client, parameters.index).searchOnce(
-        parameters
-      );
-    }),
-  ];
+    new SearchParameters({ ...sharedParameters, ...mainParameters }),
+    ...indexIds.map((indexId) => derivedParameters[indexId]),
+  ].map(
+    (params) =>
+      new Promise((resolve) =>
+        helper.derive(() => params).once('result', resolve)
+      )
+  );
+
+  helper.searchOnlyWithDerivedHelpers();
 
   // We attach `indexId` on the results to be able to reconstruct the object
   // on the client side. We cannot rely on `state.index` anymore because we
   // may have multiple times the same index.
   return Promise.all(searches).then((results) =>
     [indexName, ...indexIds].map((indexId, i) => ({
-      rawResults: cleanRawResults(results[i].content._rawResults),
-      state: results[i].content._state,
+      rawResults: cleanRawResults(results[i].results._rawResults),
+      state: results[i].results._state,
       _internalIndexId: indexId,
     }))
   );
@@ -193,7 +191,6 @@ export const findResultsState = function (App, props) {
     return multiIndexSearch(
       props.indexName,
       props.searchClient,
-      helper,
       sharedParameters,
       derivedParameters
     ).then((results) => {