fix(algoliasearch): correctly retrieve headers for v5 (#1263)

Author: dhayab

examples/react-17/src/Highlight.tsx

@@ -11,7 +11,7 @@ type HighlightHitParams<THit> = {
    *
    * You can use the array syntax to reference nested attributes.
    */
-  attribute: keyof THit | (string | number)[];
+  attribute: keyof THit | Array<string | number>;
   /**
    * The tag name to use for highlighted parts.
    *

package.json

@@ -45,6 +45,7 @@
     "@typescript-eslint/eslint-plugin": "2.34.0",
     "@typescript-eslint/parser": "2.34.0",
     "algoliasearch": "4.16.0",
+    "algoliasearch-v5": "npm:[email protected]",
     "autoprefixer": "10.4.14",
     "babel-eslint": "10.1.0",
     "babel-loader": "8.2.3",

packages/autocomplete-preset-algolia/src/highlight/ParseAlgoliaHitParams.ts

@@ -1,4 +1,4 @@
 export type ParseAlgoliaHitParams<TItem> = {
   hit: TItem;
-  attribute: keyof TItem | (string | number)[];
+  attribute: keyof TItem | Array<string | number>;
 };

packages/autocomplete-preset-algolia/src/highlight/__tests__/parseAlgoliaHitHighlight.test.ts

@@ -175,16 +175,19 @@ describe('parseAlgoliaHitHighlight', () => {
           objectID: '1',
           titles: ['Hello', 'world'],
           _highlightResult: {
-            titles: [{
-              value: 'Hello',
-              matchLevel: 'none',
-              matchedWords: [],
-            }, {
-              value: '__aa-highlight__world__/aa-highlight__',
-              matchLevel: 'full',
-              matchedWords: ['world'],
-              fullyHighlighted: true,
-            }]
+            titles: [
+              {
+                value: 'Hello',
+                matchLevel: 'none',
+                matchedWords: [],
+              },
+              {
+                value: '__aa-highlight__world__/aa-highlight__',
+                matchLevel: 'full',
+                matchedWords: ['world'],
+                fullyHighlighted: true,
+              },
+            ],
           },
         },
       })

packages/autocomplete-preset-algolia/src/highlight/__tests__/parseAlgoliaHitReverseHighlight.test.ts

@@ -172,16 +172,19 @@ describe('parseAlgoliaHitReverseHighlight', () => {
           objectID: '1',
           titles: ['Hello', 'world'],
           _highlightResult: {
-            titles: [{
-              value: 'Hello',
-              matchLevel: 'none',
-              matchedWords: [],
-            }, {
-              value: '__aa-highlight__world__/aa-highlight__',
-              matchLevel: 'full',
-              matchedWords: ['world'],
-              fullyHighlighted: true,
-            }]
+            titles: [
+              {
+                value: 'Hello',
+                matchLevel: 'none',
+                matchedWords: [],
+              },
+              {
+                value: '__aa-highlight__world__/aa-highlight__',
+                matchLevel: 'full',
+                matchedWords: ['world'],
+                fullyHighlighted: true,
+              },
+            ],
           },
         },
       })

packages/autocomplete-preset-algolia/src/highlight/__tests__/parseAlgoliaHitReverseSnippet.test.ts

@@ -163,13 +163,16 @@ describe('parseAlgoliaHitReverseSnippet', () => {
           objectID: '1',
           titles: ['Hello', 'world'],
           _snippetResult: {
-            titles: [{
-              value: 'Hello',
-              matchLevel: 'none',
-            }, {
-              value: '__aa-highlight__world__/aa-highlight__',
-              matchLevel: 'full',
-            }]
+            titles: [
+              {
+                value: 'Hello',
+                matchLevel: 'none',
+              },
+              {
+                value: '__aa-highlight__world__/aa-highlight__',
+                matchLevel: 'full',
+              },
+            ],
           },
         },
       })

packages/autocomplete-preset-algolia/src/highlight/__tests__/parseAlgoliaHitSnippet.test.ts

@@ -163,13 +163,16 @@ describe('parseAlgoliaHitSnippet', () => {
           objectID: '1',
           titles: ['Hello', 'world'],
           _snippetResult: {
-            titles: [{
-              value: 'Hello',
-              matchLevel: 'none',
-            }, {
-              value: '__aa-highlight__world__/aa-highlight__',
-              matchLevel: 'full',
-            }]
+            titles: [
+              {
+                value: 'Hello',
+                matchLevel: 'none',
+              },
+              {
+                value: '__aa-highlight__world__/aa-highlight__',
+                matchLevel: 'full',
+              },
+            ],
           },
         },
       })

packages/autocomplete-preset-algolia/src/utils/__tests__/getAppIdAndApiKey.test.ts

@@ -1,23 +1,30 @@
 import algoliasearchV4 from 'algoliasearch';
+import { liteClient as algoliasearchV5 } from 'algoliasearch-v5/lite';
 
 import { getAppIdAndApiKey } from '../getAppIdAndApiKey';
 
 const APP_ID = 'myAppId';
 const API_KEY = 'myApiKey';
 
 describe('getAppIdAndApiKey', () => {
-  it('gets appId and apiKey from searchClient', () => {
+  it('gets appId and apiKey from searchClient@v4', () => {
     const searchClient = algoliasearchV4(APP_ID, API_KEY);
     const { appId, apiKey } = getAppIdAndApiKey(searchClient);
     expect(appId).toEqual(APP_ID);
     expect(apiKey).toEqual(API_KEY);
   });
 
+  it('gets appId and apiKey from searchClient@v5', () => {
+    const searchClient = algoliasearchV5(APP_ID, API_KEY);
+    const { appId, apiKey } = getAppIdAndApiKey(searchClient);
+    expect(appId).toEqual(APP_ID);
+    expect(apiKey).toEqual(API_KEY);
+  });
+
   it('gets undefined appId and apiKey from broken search client', () => {
     const searchClient = {
       search: algoliasearchV4(APP_ID, API_KEY).search,
     };
-    // @ts-expect-error
     const { appId, apiKey } = getAppIdAndApiKey(searchClient);
     expect(appId).toEqual(undefined);
     expect(apiKey).toEqual(undefined);

packages/autocomplete-preset-algolia/src/utils/getAppIdAndApiKey.ts

@@ -1,10 +1,12 @@
-import type { SearchClient } from '../types';
-
-export function getAppIdAndApiKey(searchClient: SearchClient): {
+// typed as any, since it accepts the _real_ js clients, not the interface we otherwise expect
+export function getAppIdAndApiKey(searchClient: any): {
   appId: string;
   apiKey: string;
 } {
-  const { headers = {}, queryParameters = {} } = searchClient.transporter || {};
+  const transporter = searchClient.transporter || {};
+  const headers = transporter.headers || transporter.baseHeaders || {};
+  const queryParameters =
+    transporter.queryParameters || transporter.baseQueryParameters || {};
   const APP_ID = 'x-algolia-application-id';
   const API_KEY = 'x-algolia-api-key';
   const appId = headers[APP_ID] || queryParameters[APP_ID];

packages/autocomplete-shared/src/getAttributeValueByPath.ts

@@ -1,6 +1,6 @@
 export function getAttributeValueByPath<TRecord>(
   record: TRecord,
-  path: (string | number)[]
+  path: Array<string | number>
 ): any {
   return path.reduce((current, key) => current && current[key], record);
 }