feat(recommend): leverage the new Recommend API client

examples/demo/package.json

@@ -14,7 +14,8 @@
     "@algolia/recommend-react": "1.0.0-experimental.4",
     "@algolia/ui-components-horizontal-slider-react": "1.0.0-experimental.4",
     "@algolia/ui-components-horizontal-slider-theme": "1.0.0-experimental.4",
-    "algoliasearch": "4.9.1",
+    "algoliasearch": "4.10.2",
+    "@algolia/recommend": "4.10.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "search-insights": "2.0.0"

examples/demo/src/App.js

@@ -1,3 +1,4 @@
+import algoliarecommend from '@algolia/recommend';
 import {
   FrequentlyBoughtTogether,
   RelatedProducts,
@@ -22,6 +23,7 @@ const apiKey = '28cf6d38411215e2eef188e635216508';
 const indexName = 'gstar_demo_test';
 
 const searchClient = algoliasearch(appId, apiKey);
+const recommendClient = algoliarecommend(appId, apiKey);
 
 insights('init', { appId, apiKey });
 
@@ -147,12 +149,12 @@ function App() {
           </div>
 
           <FrequentlyBoughtTogether
-            searchClient={searchClient}
+            recommendClient={recommendClient}
             indexName={indexName}
             objectIDs={[selectedProduct.objectID]}
             itemComponent={BundleItem}
             maxRecommendations={2}
-            searchParameters={{
+            queryParameters={{
               analytics: true,
               clickAnalytics: true,
             }}
@@ -161,7 +163,7 @@ function App() {
             )}
             fallbackComponent={() => (
               <RelatedProducts
-                searchClient={searchClient}
+                recommendClient={recommendClient}
                 indexName={indexName}
                 objectIDs={[selectedProduct.objectID]}
                 itemComponent={RecommendedItem}
@@ -170,10 +172,12 @@ function App() {
                 translations={{
                   title: 'Related products (fallback)',
                 }}
-                fallbackFilters={[
-                  `hierarchical_categories.lvl2:${selectedProduct.hierarchical_categories.lvl2}`,
-                ]}
-                searchParameters={{
+                fallbackParameters={{
+                  facetFilters: [
+                    `hierarchical_categories.lvl2:${selectedProduct.hierarchical_categories.lvl2}`,
+                  ],
+                }}
+                queryParameters={{
                   analytics: true,
                   clickAnalytics: true,
                   facetFilters: [
@@ -185,7 +189,7 @@ function App() {
           />
 
           <RelatedProducts
-            searchClient={searchClient}
+            recommendClient={recommendClient}
             indexName={indexName}
             objectIDs={[selectedProduct.objectID]}
             itemComponent={RecommendedItem}
@@ -194,10 +198,12 @@ function App() {
             translations={{
               title: 'Related products',
             }}
-            fallbackFilters={[
-              `hierarchical_categories.lvl2:${selectedProduct.hierarchical_categories.lvl2}`,
-            ]}
-            searchParameters={{
+            fallbackParameters={{
+              facetFilters: [
+                `hierarchical_categories.lvl2:${selectedProduct.hierarchical_categories.lvl2}`,
+              ],
+            }}
+            queryParameters={{
               analytics: true,
               clickAnalytics: true,
               facetFilters: [

examples/js-demo/RelatedItem.js

@@ -27,7 +27,7 @@ export function RelatedItem({ item, insights, onSelect }) {
         <img src={item.image_link} alt={item.name} className="max-w-full" />
 
         <div className="RelatedItem-info">
-          {item.__recommendScore && (
+          {item._score && (
             <div
               className="flex items-center absolute right-0 top-0 text-gray-500 font-semibold text-xs rounded-lg m-2 py-1 px-2"
               style={{ background: 'rgb(255 255 255 / 92%)' }}
@@ -38,7 +38,7 @@ export function RelatedItem({ item, insights, onSelect }) {
                   d="M18.984 9.984h2.016v4.031h-2.016v-4.031zM15 18v-12h2.016v12h-2.016zM3 14.016v-4.031h2.016v4.031h-2.016zM11.016 21.984v-19.969h1.969v19.969h-1.969zM6.984 18v-12h2.016v12h-2.016z"
                 ></path>
               </svg>
-              {item.__recommendScore}
+              {item._score}
             </div>
           )}
           <div

examples/js-demo/app.js

@@ -1,5 +1,6 @@
 /** @jsx h */
 import { autocomplete, getAlgoliaResults } from '@algolia/autocomplete-js';
+import algoliarecommend from '@algolia/recommend';
 import {
   frequentlyBoughtTogether,
   relatedProducts,
@@ -19,6 +20,7 @@ const apiKey = '28cf6d38411215e2eef188e635216508';
 const indexName = 'gstar_demo_test';
 
 const searchClient = algoliasearch(appId, apiKey);
+const recommendClient = algoliarecommend(appId, apiKey);
 
 insights('init', { appId, apiKey });
 insights('setUserToken', 'user-token-1');
@@ -144,7 +146,7 @@ function ReferenceItem({ item }) {
 function renderRecommendations(selectedProduct) {
   frequentlyBoughtTogether({
     container: '#frequentlyBoughtTogether',
-    searchClient,
+    recommendClient,
     indexName,
     objectIDs: [selectedProduct.objectID],
     itemComponent({ item }) {
@@ -157,13 +159,13 @@ function renderRecommendations(selectedProduct) {
       );
     },
     maxRecommendations: 3,
-    searchParameters: {
+    queryParameters: {
       analytics: true,
       clickAnalytics: true,
     },
     fallbackComponent() {
       return relatedProducts({
-        searchClient,
+        recommendClient,
         indexName,
         objectIDs: [selectedProduct.objectID],
         itemComponent({ item }) {
@@ -180,10 +182,12 @@ function renderRecommendations(selectedProduct) {
         translations: {
           title: 'Related products (fallback)',
         },
-        fallbackFilters: [
-          `hierarchical_categories.lvl2:${selectedProduct.hierarchical_categories.lvl2}`,
-        ],
-        searchParameters: {
+        fallbackParameters: {
+          facetFilters: [
+            `hierarchical_categories.lvl2:${selectedProduct.hierarchical_categories.lvl2}`,
+          ],
+        },
+        queryParameters: {
           analytics: true,
           clickAnalytics: true,
           facetFilters: [
@@ -196,7 +200,7 @@ function renderRecommendations(selectedProduct) {
 
   relatedProducts({
     container: '#relatedProducts',
-    searchClient,
+    recommendClient,
     indexName,
     objectIDs: [selectedProduct.objectID],
     itemComponent({ item }) {
@@ -213,10 +217,12 @@ function renderRecommendations(selectedProduct) {
     translations: {
       title: 'Related products',
     },
-    fallbackFilters: [
-      `hierarchical_categories.lvl2:${selectedProduct.hierarchical_categories.lvl2}`,
-    ],
-    searchParameters: {
+    fallbackParameters: {
+      facetFilters: [
+        `hierarchical_categories.lvl2:${selectedProduct.hierarchical_categories.lvl2}`,
+      ],
+    },
+    queryParameters: {
       analytics: true,
       clickAnalytics: true,
       facetFilters: [

examples/js-demo/package.json

@@ -15,7 +15,8 @@
     "@algolia/ui-components-horizontal-slider-js": "1.0.0-experimental.4",
     "@algolia/ui-components-horizontal-slider-theme": "1.0.0-experimental.4",
     "@babel/runtime": "7.14.5",
-    "algoliasearch": "4.9.1",
+    "algoliasearch": "4.10.2",
+    "@algolia/recommend": "4.10.2",
     "preact": "10.5.13",
     "search-insights": "2.0.0"
   },

packages/recommend-core/package.json

@@ -28,7 +28,7 @@
     "prepare": "yarn build:esm && yarn build:types"
   },
   "peerDependencies": {
-    "algoliasearch": "^4.9.1"
+    "@algolia/recommend": "4.10.2"
   },
   "devDependencies": {
     "@algolia/client-search": "4.9.1"

packages/recommend-core/src/__tests__/getRecommendations.test.ts

@@ -1,9 +1,9 @@
 import {
   createMultiSearchResponse,
-  createSearchClient,
+  createRecommendClient,
 } from '../../../../test/utils';
 import { getRecommendations } from '../getRecommendations';
-import { RecommendationModel } from '../types';
+import { RecommendModel } from '../types';
 
 const hit = {
   name: 'Landoh 4-Pocket Jumpsuit',
@@ -34,13 +34,22 @@ const hit = {
 };
 
 function createRecommendationsClient() {
-  const index = {
-    getObjects: jest.fn(() => Promise.resolve({ results: [hit] })),
-  };
-  const searchClient = createSearchClient({
-    // @ts-expect-error `initIndex` is not part of the lite bundle
-    initIndex: jest.fn(() => index),
-    search: jest.fn(() =>
+  const recommendClient = createRecommendClient({
+    getFrequentlyBoughtTogether: jest.fn(() =>
+      Promise.resolve(
+        createMultiSearchResponse({
+          hits: [hit],
+        })
+      )
+    ),
+    getRelatedProducts: jest.fn(() =>
+      Promise.resolve(
+        createMultiSearchResponse({
+          hits: [hit],
+        })
+      )
+    ),
+    getRecommendations: jest.fn(() =>
       Promise.resolve(
         createMultiSearchResponse({
           hits: [hit],
@@ -50,111 +59,74 @@ function createRecommendationsClient() {
   });
 
   return {
-    index,
-    searchClient,
+    recommendClient,
   };
 }
 
 describe('getRecommendations', () => {
   test('calls the correct index for "related-products"', async () => {
-    const { index, searchClient } = createRecommendationsClient();
+    const { recommendClient } = createRecommendationsClient();
     const props = {
-      model: 'related-products' as RecommendationModel,
-      searchClient: searchClient as any,
+      model: 'related-products' as RecommendModel,
+      recommendClient,
       indexName: 'indexName',
       objectIDs: ['objectID'],
-      searchParameters: {
+      queryParameters: {
         facetFilters: [['brand:Apple']],
         optionalFilters: ['category:Laptops'],
       },
     };
 
     await getRecommendations(props);
 
-    expect(searchClient.initIndex).toHaveBeenCalledTimes(1);
-    expect(searchClient.initIndex).toHaveBeenCalledWith(
-      'ai_recommend_related-products_indexName'
-    );
-
-    expect(index.getObjects).toHaveBeenCalledTimes(1);
-    expect(index.getObjects).toHaveBeenCalledWith(['objectID']);
-
-    expect(searchClient.search).toHaveBeenCalledTimes(1);
-    expect(searchClient.search).toHaveBeenCalledWith([
+    expect(recommendClient.getRecommendations).toHaveBeenCalledTimes(1);
+    expect(recommendClient.getRecommendations).toHaveBeenCalledWith([
       {
+        model: 'related-products',
         indexName: 'indexName',
-        params: {
-          analytics: false,
-          analyticsTags: ['alg-recommend_related-products'],
-          clickAnalytics: false,
-          enableABTest: false,
+        objectID: 'objectID',
+        queryParameters: {
           facetFilters: [['brand:Apple']],
-          filters: 'NOT objectID:objectID',
-          hitsPerPage: 3,
-          optionalFilters: [
-            'objectID:1<score=199>',
-            'objectID:2<score=299>',
-            'objectID:3<score=399>',
-            'category:Laptops',
-          ],
-          ruleContexts: ['alg-recommend_related-products_objectID'],
-          typoTolerance: false,
+          optionalFilters: ['category:Laptops'],
         },
       },
     ]);
   });
 
   test('calls the correct index for "bought-together"', async () => {
-    const { index, searchClient } = createRecommendationsClient();
+    const { recommendClient } = createRecommendationsClient();
     const props = {
-      model: 'bought-together' as RecommendationModel,
-      searchClient: searchClient as any,
+      model: 'bought-together' as RecommendModel,
+      recommendClient,
       indexName: 'indexName',
       objectIDs: ['objectID'],
-      searchParameters: {
+      queryParameters: {
         facetFilters: [['brand:Apple']],
         optionalFilters: ['category:Laptops'],
       },
     };
 
     await getRecommendations(props);
 
-    expect(searchClient.initIndex).toHaveBeenCalledTimes(1);
-    expect(searchClient.initIndex).toHaveBeenCalledWith(
-      'ai_recommend_bought-together_indexName'
-    );
-
-    expect(index.getObjects).toHaveBeenCalledTimes(1);
-    expect(index.getObjects).toHaveBeenCalledWith(['objectID']);
-
-    expect(searchClient.search).toHaveBeenCalledTimes(1);
-    expect(searchClient.search).toHaveBeenCalledWith([
+    expect(recommendClient.getRecommendations).toHaveBeenCalledTimes(1);
+    expect(recommendClient.getRecommendations).toHaveBeenCalledWith([
       {
+        model: 'bought-together',
         indexName: 'indexName',
-        params: {
-          analytics: false,
-          analyticsTags: ['alg-recommend_bought-together'],
-          clickAnalytics: false,
-          enableABTest: false,
-          facetFilters: [
-            ['objectID:1', 'objectID:2', 'objectID:3'],
-            ['brand:Apple'],
-          ],
-          filters: 'NOT objectID:objectID',
-          hitsPerPage: 3,
+        objectID: 'objectID',
+        queryParameters: {
+          facetFilters: [['brand:Apple']],
           optionalFilters: ['category:Laptops'],
-          ruleContexts: ['alg-recommend_bought-together_objectID'],
-          typoTolerance: false,
         },
       },
     ]);
   });
 
   test('returns recommended hits', async () => {
-    const { searchClient } = createRecommendationsClient();
+    const { recommendClient } = createRecommendationsClient();
     const props = {
-      model: 'related-products' as RecommendationModel,
-      searchClient: searchClient as any,
+      model: 'related-products' as RecommendModel,
+      recommendClient,
       indexName: 'indexName',
       objectIDs: ['objectID'],
     };
@@ -163,10 +135,6 @@ describe('getRecommendations', () => {
 
     expect(recommendations).toEqual([
       {
-        __indexName: 'indexName',
-        __position: 1,
-        __queryID: undefined,
-        __recommendScore: null,
         category: 'Women - Jumpsuits-Overalls',
         hierarchical_categories: {
           lvl0: 'women',