poc: have indices that send independent requests

examples/js/getting-started/index.html

@@ -33,17 +33,14 @@ <h1 class="header-title">
       </p>
     </header>
 
-    <div class="container">
-      <div class="search-panel">
-        <div class="search-panel__filters">
-          <div id="brand-list"></div>
-        </div>
-
-        <div class="search-panel__results">
-          <div id="searchbox"></div>
-          <div id="hits"></div>
-          <div id="pagination"></div>
-        </div>
+    <div class="container" style="display: flex">
+      <div class="search-panel__filters">
+        <div id="searchbox"></div>
+        <div id="hits"></div>
+      </div>
+      <div class="search-panel__results">
+        <div id="filters"></div>
+        <div id="hits2"></div>
       </div>
     </div>
 

examples/js/getting-started/src/app.js

@@ -1,12 +1,10 @@
 import algoliasearch from 'algoliasearch/lite';
 import instantsearch from 'instantsearch.js';
 import {
-  configure,
   hits,
-  pagination,
-  panel,
-  refinementList,
+  index,
   searchBox,
+  refinementList,
 } from 'instantsearch.js/es/widgets';
 
 const searchClient = algoliasearch(
@@ -20,33 +18,37 @@ const search = instantsearch({
   insights: true,
 });
 
+const itemComponent = (hit, { html, components }) => html`
+  <article>
+    <h1>${components.ReverseHighlight({ hit, attribute: 'query' })}</h1>
+    <p>${components.Highlight({ hit, attribute: 'description' })}</p>
+  </article>
+`;
+
 search.addWidgets([
-  searchBox({
-    container: '#searchbox',
-  }),
+  index({
+    indexName: 'instant_search_demo_query_suggestions',
+    separate: true,
+  }).addWidgets([
+    searchBox({
+      container: '#searchbox',
+    }),
+    hits({
+      container: '#hits',
+      templates: {
+        item: (hit, { html, components }) => html`
+          ${components.ReverseHighlight({ hit, attribute: 'query' })}
+        `,
+      },
+    }),
+  ]),
+  refinementList({ container: '#filters', attribute: 'brand' }),
   hits({
-    container: '#hits',
+    container: '#hits2',
     templates: {
-      item: (hit, { html, components }) => html`
-        <article>
-          <h1>${components.Highlight({ hit, attribute: 'name' })}</h1>
-          <p>${components.Highlight({ hit, attribute: 'description' })}</p>
-        </article>
-      `,
+      item: itemComponent,
     },
   }),
-  configure({
-    hitsPerPage: 8,
-  }),
-  panel({
-    templates: { header: 'brand' },
-  })(refinementList)({
-    container: '#brand-list',
-    attribute: 'brand',
-  }),
-  pagination({
-    container: '#pagination',
-  }),
 ]);
 
 search.start();

packages/instantsearch.js/src/connectors/hits/connectHits.ts

@@ -105,6 +105,7 @@ const connectHits: HitsConnector = function connectHits(
       },
 
       render(renderOptions) {
+        console.log('rendering hits for ', renderOptions.parent.getIndexName());
         const renderState = this.getWidgetRenderState(renderOptions);
 
         renderFn(

packages/instantsearch.js/src/widgets/index/index.ts

@@ -17,7 +17,6 @@ import type {
   IndexUiState,
   Widget,
   ScopedResult,
-  SearchClient,
   IndexRenderState,
 } from '../../types';
 import type {
@@ -36,6 +35,7 @@ const withUsage = createDocumentationMessageGenerator({
 export type IndexWidgetParams = {
   indexName: string;
   indexId?: string;
+  separate?: boolean;
 };
 
 export type IndexInitOptions = {
@@ -223,7 +223,7 @@ const index = (widgetParams: IndexWidgetParams): IndexWidget => {
     throw new Error(withUsage('The `indexName` option is required.'));
   }
 
-  const { indexName, indexId = indexName } = widgetParams;
+  const { indexName, indexId = indexName, separate = false } = widgetParams;
 
   let localWidgets: Array<Widget | IndexWidget> = [];
   let localUiState: IndexUiState = {};
@@ -459,10 +459,11 @@ const index = (widgetParams: IndexWidgetParams): IndexWidget => {
       // `searchClient`. Only the "main" Helper created at the `InstantSearch`
       // level is aware of the client.
       helper = algoliasearchHelper(
-        {} as SearchClient,
+        mainHelper.getClient(),
         parameters.index,
         parameters
       );
+      const originalSearch = helper.search.bind(helper);
 
       // We forward the call to `search` to the "main" instance of the Helper
       // which is responsible for managing the queries (it's the only one that is
@@ -480,7 +481,7 @@ const index = (widgetParams: IndexWidgetParams): IndexWidget => {
           return mainHelper;
         }
 
-        return mainHelper.search();
+        return separate ? originalSearch() : mainHelper.search();
       };
 
       helper.searchWithoutTriggeringOnStateChange = () => {
@@ -554,6 +555,12 @@ const index = (widgetParams: IndexWidgetParams): IndexWidget => {
         // run the render process in one pass.
         instantSearchInstance.scheduleRender();
 
+        // Normally we would not request this index
+        if (separate && helper!.lastResults) {
+          derivedHelper!.lastResults = helper!.lastResults;
+          return;
+        }
+
         // the derived helper is the one which actually searches, but the helper
         // which is exposed e.g. via instance.helper, doesn't search, and thus
         // does not have access to lastResults, which it used to in pre-federated
@@ -562,6 +569,16 @@ const index = (widgetParams: IndexWidgetParams): IndexWidget => {
         lastValidSearchParameters = results?._state;
       });
 
+      if (separate) {
+        helper.on('result', ({ results, state }) => {
+          helper!.lastResults = results;
+          derivedHelper!.lastResults = results;
+          lastValidSearchParameters = state;
+
+          this.render({ instantSearchInstance });
+        });
+      }
+
       // We compute the render state before calling `init` in a separate loop
       // to construct the whole render state object that is then passed to
       // `init`.