feat: fetch objects on the client side (#43)

Author: raed667

bundlesize.config.json

@@ -2,11 +2,11 @@
   "files": [
     {
       "path": "packages/generative-experiences-api-client/dist/index.js",
-      "maxSize": "27.46 kB"
+      "maxSize": "27.57 kB"
     },
     {
       "path": "packages/generative-experiences-api-client/dist/index.umd.js",
-      "maxSize": "11.43 kB"
+      "maxSize": "11.53 kB"
     },
     {
       "path": "packages/generative-experiences-vdom/dist/index.js",

packages/generative-experiences-api-client/src/client.ts

@@ -2,6 +2,7 @@ import { algoliasearch } from 'algoliasearch';
 import type { FacetFilters } from 'algoliasearch';
 import type { PlainSearchParameters } from 'algoliasearch-helper';
 
+import { getObjectIDs, getObjects } from './helpers/records';
 import {
   GenerationSource,
   ProductsComparisonOptions,
@@ -277,9 +278,30 @@ export function createClient(opts: CreateClientOptions) {
       });
 
       const record = res?.hits?.at(0);
+
       if (record?.content) {
+        /**
+         * For backward compatibility, we need to ensure that the objectIDs array is filled.
+         * This can be dropped at the next major release.
+         */
+        if (Boolean(record.objects?.length) && !record.objectIDs?.length) {
+          record.objectIDs = getObjectIDs(record.objects);
+        }
+
+        /**
+         * Fetch records from objectIDs, this used to be done on the API side. But the records could get too large, so this logic is now done on the client side.
+         */
+        if (Boolean(record.objectIDs?.length) && !record.objects?.length) {
+          record.objects = await getObjects(
+            record.objectIDs,
+            this.options.indexName,
+            searchClient
+          );
+        }
+
         return record;
       }
+
       return null;
     },
 

packages/generative-experiences-api-client/src/helpers/records.ts

@@ -0,0 +1,21 @@
+import type { Hit } from '@algolia/client-search';
+import type { Algoliasearch } from 'algoliasearch';
+
+export const getObjects = async (
+  objectIDs: Array<Hit['objectID']>,
+  indexName: string,
+  searchClient: Algoliasearch
+): Promise<Hit[]> => {
+  const response = await searchClient.getObjects<Hit>({
+    requests: objectIDs.map((objectID) => ({
+      indexName,
+      objectID,
+      attributesToRetrieve: ['*'],
+    })),
+  });
+
+  return response.results;
+};
+
+export const getObjectIDs = (objects: Hit[]): Array<Hit['objectID']> =>
+  objects.map((object) => object.objectID);

packages/generative-experiences-api-client/src/types/shopping-guide.ts

@@ -13,6 +13,7 @@ export type CategoryGuide = BaseShoppingGuide & {
   description: string;
   category: string;
   objects: Hit[];
+  objectIDs: string[];
   content: Array<{
     type: 'conclusion' | 'factor' | 'introduction';
     title: string;
@@ -26,13 +27,15 @@ export type ShoppingGuideType = BaseShoppingGuide & {
   description: string;
   category: string;
   objects: Hit[];
+  objectIDs: string[];
   content: Array<{ title: string; content: string }>;
   score_headline: number;
 };
 
 export type ComparisonGuide = BaseShoppingGuide & {
   type: 'comparison';
   objects: Hit[];
+  objectIDs: string[];
   content: Array<{
     title: string;
     type: 'conclusion' | 'introduction' | 'product';

packages/generative-experiences-js/src/hooks/useShoppingGuidesContent.ts

@@ -17,6 +17,7 @@ const defaultState: ShoppingGuideType = {
   description: '',
   category: '',
   objects: [],
+  objectIDs: [],
   content: [
     {
       title: '',

packages/generative-experiences-react/src/useShoppingGuidesContent.ts

@@ -17,6 +17,7 @@ const defaultState: ShoppingGuideType = {
   description: '',
   category: '',
   objects: [],
+  objectIDs: [],
   content: [
     {
       title: '',

packages/generative-experiences-vdom/src/types/ShoppingGuideContentProps.ts

@@ -14,6 +14,7 @@ export const defaultState: ShoppingGuideType = {
   description: '',
   category: '',
   objects: [],
+  objectIDs: [],
   content: [
     {
       title: '',