fix(umd): batch requests when using plugins via UMD (#902)

* wip * e2e test * remove e2e * new test to clarify that execute isn't referentially equal * back to status quo * fix the issue * fix unit test * move algolia marker to outside createRequester * docs * make ts happy again * Apply suggestions from code review Co-authored-by: Sarah Dayan <[email protected]> * make requester id required for batching * Update packages/autocomplete-preset-algolia/src/requester/createRequester.ts Co-authored-by: Sarah Dayan <[email protected]> * extended test Co-authored-by: Youcef Mammar <[email protected]> Co-authored-by: Sarah Dayan <[email protected]>
algolia · Feb 23, 2022 · 1aa3dde · 1aa3dde
1 parent aa7caa9
commit 1aa3dde
Show file tree

Hide file tree

Showing 11 changed files with 166 additions and 11 deletions.
diff --git a/bundlesize.config.json b/bundlesize.config.json
@@ -6,7 +6,7 @@
     },
     {
       "path": "packages/autocomplete-js/dist/umd/index.production.js",
-      "maxSize": "16.5 kB"
+      "maxSize": "16.75 kB"
     },
     {
       "path": "packages/autocomplete-preset-algolia/dist/umd/index.production.js",

diff --git a/packages/autocomplete-core/src/resolve.ts b/packages/autocomplete-core/src/resolve.ts
@@ -33,12 +33,13 @@ function isRequesterDescription<TItem extends BaseItem>(
 type PackedDescription<TItem extends BaseItem> = {
   searchClient: SearchClient;
   execute: Execute<TItem>;
+  requesterId?: string;
   items: RequestDescriptionPreResolved<TItem>['requests'];
 };
 
 type RequestDescriptionPreResolved<TItem extends BaseItem> = Pick<
   RequesterDescription<TItem>,
-  'execute' | 'searchClient' | 'transformResponse'
+  'execute' | 'requesterId' | 'searchClient' | 'transformResponse'
 > & {
   requests: Array<{
     query: MultipleQueriesQuery;
@@ -90,15 +91,16 @@ export function resolve<TItem extends BaseItem>(
       return acc;
     }
 
-    const { searchClient, execute, requests } = current;
+    const { searchClient, execute, requesterId, requests } = current;
 
     const container = acc.find<PackedDescription<TItem>>(
       (item): item is PackedDescription<TItem> => {
         return (
           isDescription(current) &&
           isDescription(item) &&
           item.searchClient === searchClient &&
-          item.execute === execute
+          Boolean(requesterId) &&
+          item.requesterId === requesterId
         );
       }
     );
@@ -108,6 +110,7 @@ export function resolve<TItem extends BaseItem>(
     } else {
       const request: PackedDescription<TItem> = {
         execute,
+        requesterId,
         items: requests,
         searchClient,
       };

diff --git a/packages/autocomplete-js/src/__tests__/requester.test.ts b/packages/autocomplete-js/src/__tests__/requester.test.ts
@@ -1,3 +1,7 @@
+import {
+  createRequester,
+  fetchAlgoliaResults,
+} from '@algolia/autocomplete-preset-algolia';
 import { fireEvent, waitFor, within } from '@testing-library/dom';
 
 import {
@@ -346,6 +350,123 @@ describe('requester', () => {
     });
   });
 
+  test('batches calls across requesters with same id', async () => {
+    const container = document.createElement('div');
+    const panelContainer = document.createElement('div');
+
+    document.body.appendChild(panelContainer);
+
+    const searchClient = createSearchClient({
+      search: jest.fn((requests) =>
+        Promise.resolve(
+          createMultiSearchResponse<{ label: string }>(
+            ...requests.map(({ indexName, params: { query } }) => ({
+              hits: [{ objectID: '1', label: 'Hit 1' }],
+              index: indexName,
+              query,
+            }))
+          )
+        )
+      ),
+    });
+
+    const getResults1 = (params) =>
+      createRequester(
+        fetchAlgoliaResults,
+        'custom-requester-id'
+      )({
+        transformResponse: (response) => response.hits,
+      })(params);
+
+    const getResults2 = (params) =>
+      createRequester(
+        fetchAlgoliaResults,
+        'custom-requester-id'
+      )({
+        transformResponse: (response) => response.hits,
+      })(params);
+
+    const getResults3 = (params) =>
+      createRequester(
+        fetchAlgoliaResults,
+        'different-requester-id'
+      )({
+        transformResponse: (response) => response.hits,
+      })(params);
+
+    const templates = {
+      item({ item }) {
+        return JSON.stringify(item);
+      },
+    };
+
+    autocomplete({
+      container,
+      panelContainer,
+      getSources({ query }) {
+        return [
+          {
+            sourceId: 'hits',
+            getItems() {
+              return getResults1({
+                searchClient,
+                queries: [
+                  {
+                    indexName: 'indexName',
+                    query,
+                  },
+                ],
+              });
+            },
+            templates,
+          },
+          {
+            sourceId: 'hits-merged',
+            getItems() {
+              return getResults2({
+                searchClient,
+                queries: [
+                  {
+                    indexName: 'indexName',
+                    query,
+                  },
+                ],
+              });
+            },
+            templates,
+          },
+          {
+            sourceId: 'hits-separate',
+            getItems() {
+              return getResults3({
+                searchClient,
+                queries: [
+                  {
+                    indexName: 'indexName',
+                    query,
+                  },
+                ],
+              });
+            },
+            templates,
+          },
+        ];
+      },
+    });
+
+    const input = container.querySelector<HTMLInputElement>('.aa-Input');
+
+    fireEvent.input(input, { target: { value: 'a' } });
+
+    await waitFor(() => {
+      expect(
+        panelContainer.querySelector<HTMLElement>('.aa-Panel')
+      ).toBeInTheDocument();
+
+      expect(searchClient.search).toHaveBeenCalledTimes(2);
+    });
+  });
+
   test('transforms the response before forwarding it to the state', async () => {
     const container = document.createElement('div');
     const panelContainer = document.createElement('div');

diff --git a/packages/autocomplete-js/src/requesters/__tests__/getAlgoliaFacets.test.ts b/packages/autocomplete-js/src/requesters/__tests__/getAlgoliaFacets.test.ts
@@ -22,6 +22,7 @@ describe('getAlgoliaFacets', () => {
 
     expect(description).toEqual({
       execute: expect.any(Function),
+      requesterId: 'algolia',
       transformResponse: expect.any(Function),
       searchClient,
       queries: [

diff --git a/packages/autocomplete-js/src/requesters/__tests__/getAlgoliaResults.test.ts b/packages/autocomplete-js/src/requesters/__tests__/getAlgoliaResults.test.ts
@@ -22,6 +22,7 @@ describe('getAlgoliaResults', () => {
 
     expect(description).toEqual({
       execute: expect.any(Function),
+      requesterId: 'algolia',
       transformResponse: expect.any(Function),
       searchClient,
       queries: [

diff --git a/packages/autocomplete-js/src/requesters/createAlgoliaRequester.ts b/packages/autocomplete-js/src/requesters/createAlgoliaRequester.ts
@@ -5,9 +5,11 @@ import {
 
 import { userAgents } from '../userAgents';
 
-export const createAlgoliaRequester = createRequester((params) =>
-  fetchAlgoliaResults({
-    ...params,
-    userAgents,
-  })
+export const createAlgoliaRequester = createRequester(
+  (params) =>
+    fetchAlgoliaResults({
+      ...params,
+      userAgents,
+    }),
+  'algolia'
 );
diff --git a/packages/autocomplete-preset-algolia/src/requester/__tests__/createRequester.test.ts b/packages/autocomplete-preset-algolia/src/requester/__tests__/createRequester.test.ts
@@ -40,6 +40,7 @@ describe('createRequester', () => {
 
     expect(description).toEqual({
       execute: expect.any(Function),
+      requesterId: undefined,
       transformResponse,
       searchClient,
       queries: [

diff --git a/packages/autocomplete-preset-algolia/src/requester/__tests__/getAlgoliaFacets.test.ts b/packages/autocomplete-preset-algolia/src/requester/__tests__/getAlgoliaFacets.test.ts
@@ -22,6 +22,7 @@ describe('getAlgoliaFacets', () => {
 
     expect(description).toEqual({
       execute: expect.any(Function),
+      requesterId: 'algolia',
       transformResponse: expect.any(Function),
       searchClient,
       queries: [

diff --git a/packages/autocomplete-preset-algolia/src/requester/__tests__/getAlgoliaResults.test.ts b/packages/autocomplete-preset-algolia/src/requester/__tests__/getAlgoliaResults.test.ts
@@ -22,6 +22,7 @@ describe('getAlgoliaResults', () => {
 
     expect(description).toEqual({
       execute: expect.any(Function),
+      requesterId: 'algolia',
       transformResponse: expect.any(Function),
       searchClient,
       queries: [

diff --git a/packages/autocomplete-preset-algolia/src/requester/createAlgoliaRequester.ts b/packages/autocomplete-preset-algolia/src/requester/createAlgoliaRequester.ts
@@ -2,4 +2,7 @@ import { fetchAlgoliaResults } from '../search';
 
 import { createRequester } from './createRequester';
 
-export const createAlgoliaRequester = createRequester(fetchAlgoliaResults);
+export const createAlgoliaRequester = createRequester(
+  fetchAlgoliaResults,
+  'algolia'
+);
diff --git a/packages/autocomplete-preset-algolia/src/requester/createRequester.ts b/packages/autocomplete-preset-algolia/src/requester/createRequester.ts
@@ -77,13 +77,33 @@ export type RequestParams<THit> = FetcherParams & {
 };
 
 export type RequesterDescription<THit> = {
+  /**
+   * The search client used for this request. Multiple queries with the same client are batched (if `requesterId` is also the same).
+   */
   searchClient: SearchClient;
+  /**
+   * Identifies requesters to confirm their queries should be batched.
+   * This ensures that requesters with the same client but different
+   * post-processing functions don't get batched.
+   * When falsy, batching is disabled.
+   * For example, the Algolia requesters use "algolia".
+   */
+  requesterId?: string;
+  /**
+   * The search parameters used for this query.
+   */
   queries: MultipleQueriesQuery[];
+  /**
+   * Transforms the response of this search before returning it to the caller.
+   */
   transformResponse: TransformResponse<THit>;
+  /**
+   * Post-processing function for multi-queries.
+   */
   execute: Execute<THit>;
 };
 
-export function createRequester(fetcher: Fetcher) {
+export function createRequester(fetcher: Fetcher, requesterId?: string) {
   function execute<THit>(fetcherParams: ExecuteParams<THit>) {
     return fetcher<THit>({
       searchClient: fetcherParams.searchClient,
@@ -108,6 +128,7 @@ export function createRequester(fetcher: Fetcher) {
       requestParams: RequestParams<TTHit>
     ): RequesterDescription<TTHit> {
       return {
+        requesterId,
         execute,
         ...requesterParams,
         ...requestParams,