Batch item rest requests (#19233)

Author: madsrasmussen

src/Umbraco.Web.UI.Client/src/packages/core/entity-item/index.ts

@@ -1 +1,2 @@
+export * from './item-data-api-get-request-controller/index.js';
 export * from './entity-item-ref/index.js';

src/Umbraco.Web.UI.Client/src/packages/core/entity-item/item-data-api-get-request-controller/index.ts

@@ -0,0 +1 @@
+export * from './item-data-api-get-request.controller.js';

src/Umbraco.Web.UI.Client/src/packages/core/entity-item/item-data-api-get-request-controller/item-data-api-get-request.controller.ts

@@ -0,0 +1,66 @@
+import type { UmbItemDataApiGetRequestControllerArgs } from './types.js';
+import {
+	batchTryExecute,
+	tryExecute,
+	UmbError,
+	type UmbApiError,
+	type UmbCancelError,
+	type UmbDataApiResponse,
+} from '@umbraco-cms/backoffice/resources';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import { batchArray } from '@umbraco-cms/backoffice/utils';
+import { umbPeekError } from '@umbraco-cms/backoffice/notification';
+import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
+
+export class UmbItemDataApiGetRequestController<
+	ResponseModelType extends UmbDataApiResponse,
+> extends UmbControllerBase {
+	#apiCallback: (args: { uniques: Array<string> }) => Promise<ResponseModelType>;
+	#uniques: Array<string>;
+	#batchSize: number = 40;
+
+	constructor(host: UmbControllerHost, args: UmbItemDataApiGetRequestControllerArgs<ResponseModelType>) {
+		super(host);
+		this.#apiCallback = args.api;
+		this.#uniques = args.uniques;
+	}
+
+	async request() {
+		if (!this.#uniques) throw new Error('Uniques are missing');
+
+		let data: ResponseModelType['data'] | undefined;
+		let error: UmbError | UmbApiError | UmbCancelError | Error | undefined;
+
+		if (this.#uniques.length > this.#batchSize) {
+			const chunks = batchArray<string>(this.#uniques, this.#batchSize);
+			const results = await batchTryExecute(this, chunks, (chunk) => this.#apiCallback({ uniques: chunk }));
+
+			const errors = results.filter((promiseResult) => promiseResult.status === 'rejected');
+
+			if (errors.length > 0) {
+				error = await this.#getAndHandleErrorResult(errors);
+			}
+
+			data = results
+				.filter((promiseResult) => promiseResult.status === 'fulfilled')
+				.flatMap((promiseResult) => promiseResult.value.data);
+		} else {
+			const result = await tryExecute(this, this.#apiCallback({ uniques: this.#uniques }));
+			data = result.data;
+			error = result.error;
+		}
+
+		return { data, error };
+	}
+
+	async #getAndHandleErrorResult(errors: Array<PromiseRejectedResult>) {
+		// TODO: We currently expect all the errors to be the same, but we should handle this better in the future.
+		const error = errors[0];
+		await umbPeekError(this, {
+			headline: 'Error fetching items',
+			message: 'An error occurred while fetching items.',
+		});
+
+		return new UmbError(error.reason);
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/core/entity-item/item-data-api-get-request-controller/types.ts

@@ -0,0 +1,6 @@
+import type { UmbDataApiResponse } from '@umbraco-cms/backoffice/resources';
+
+export interface UmbItemDataApiGetRequestControllerArgs<ResponseModelType extends UmbDataApiResponse> {
+	api: (args: { uniques: Array<string> }) => Promise<ResponseModelType>;
+	uniques: Array<string>;
+}

src/Umbraco.Web.UI.Client/src/packages/core/entity-item/types.ts

@@ -1,4 +1,5 @@
 import type { UmbNamedEntityModel } from '@umbraco-cms/backoffice/entity';
+export type * from './item-data-api-get-request-controller/types.js';
 
 export interface UmbDefaultItemModel extends UmbNamedEntityModel {
 	icon?: string;

src/Umbraco.Web.UI.Client/src/packages/core/repository/item/item-server-data-source-base.ts

@@ -1,10 +1,11 @@
+import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
 import type { UmbDataSourceResponse } from '../data-source-response.interface.js';
 import type { UmbItemDataSource } from './item-data-source.interface.js';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { tryExecute } from '@umbraco-cms/backoffice/resources';
 
 export interface UmbItemServerDataSourceBaseArgs<ServerItemType, ClientItemType extends { unique: string }> {
-	getItems: (uniques: Array<string>) => Promise<UmbDataSourceResponse<Array<ServerItemType>>>;
+	getItems?: (uniques: Array<string>) => Promise<UmbDataSourceResponse<Array<ServerItemType>>>;
 	mapper: (item: ServerItemType) => ClientItemType;
 }
 
@@ -14,10 +15,10 @@ export interface UmbItemServerDataSourceBaseArgs<ServerItemType, ClientItemType
  * @implements {DocumentTreeDataSource}
  */
 export abstract class UmbItemServerDataSourceBase<ServerItemType, ClientItemType extends { unique: string }>
+	extends UmbControllerBase
 	implements UmbItemDataSource<ClientItemType>
 {
-	#host: UmbControllerHost;
-	#getItems: (uniques: Array<string>) => Promise<UmbDataSourceResponse<Array<ServerItemType>>>;
+	#getItems?: (uniques: Array<string>) => Promise<UmbDataSourceResponse<Array<ServerItemType>>>;
 	#mapper: (item: ServerItemType) => ClientItemType;
 
 	/**
@@ -27,7 +28,7 @@ export abstract class UmbItemServerDataSourceBase<ServerItemType, ClientItemType
 	 * @memberof UmbItemServerDataSourceBase
 	 */
 	constructor(host: UmbControllerHost, args: UmbItemServerDataSourceBaseArgs<ServerItemType, ClientItemType>) {
-		this.#host = host;
+		super(host);
 		this.#getItems = args.getItems;
 		this.#mapper = args.mapper;
 	}
@@ -39,14 +40,17 @@ export abstract class UmbItemServerDataSourceBase<ServerItemType, ClientItemType
 	 * @memberof UmbItemServerDataSourceBase
 	 */
 	async getItems(uniques: Array<string>) {
+		if (!this.#getItems) throw new Error('getItems is not implemented');
 		if (!uniques) throw new Error('Uniques are missing');
-		const { data, error } = await tryExecute(this.#host, this.#getItems(uniques));
 
-		if (data) {
-			const items = data.map((item) => this.#mapper(item));
-			return { data: items };
-		}
+		const { data, error } = await tryExecute(this, this.#getItems(uniques));
 
-		return { error };
+		return { data: this._getMappedItems(data), error };
+	}
+
+	protected _getMappedItems(items: Array<ServerItemType> | undefined): Array<ClientItemType> | undefined {
+		if (!items) return undefined;
+		if (!this.#mapper) throw new Error('Mapper is not implemented');
+		return items.map((item) => this.#mapper(item));
 	}
 }

src/Umbraco.Web.UI.Client/src/packages/core/resources/data-api/types.ts

@@ -0,0 +1,3 @@
+export interface UmbDataApiResponse<ResponseType extends { data: unknown } = { data: unknown }> {
+	data: ResponseType['data'];
+}

src/Umbraco.Web.UI.Client/src/packages/core/resources/index.ts

@@ -1,12 +1,9 @@
 export * from './api-interceptor.controller.js';
-export * from './resource.controller.js';
-export * from './try-execute.controller.js';
-export * from './tryExecute.function.js';
-export * from './tryExecuteAndNotify.function.js';
-export * from './tryXhrRequest.function.js';
-export * from './extractUmbNotificationColor.function.js';
+export * from './apiTypeValidators.function.js';
 export * from './extractUmbColorVariable.function.js';
+export * from './extractUmbNotificationColor.function.js';
 export * from './isUmbNotifications.function.js';
-export * from './apiTypeValidators.function.js';
+export * from './resource.controller.js';
+export * from './try-execute/index.js';
 export * from './umb-error.js';
 export type * from './types.js';

src/Umbraco.Web.UI.Client/src/packages/core/resources/try-execute/batch-try-execute.function.ts

@@ -0,0 +1,17 @@
+import { tryExecute } from './tryExecute.function.js';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+
+/**
+ * Batches promises and returns a promise that resolves to an array of results
+ * @param {UmbControllerHost} host - The host to use for the request and where notifications will be shown
+ * @param {Array<Array<BatchEntryType>>} chunks - The array of chunks to process
+ * @param {(chunk: Array<BatchEntryType>) => Promise<PromiseResult>} callback - The function to call for each chunk
+ * @returns {Promise<PromiseSettledResult<PromiseResult>[]>} - A promise that resolves to an array of results
+ */
+export function batchTryExecute<BatchEntryType, PromiseResult>(
+	host: UmbControllerHost,
+	chunks: Array<Array<BatchEntryType>>,
+	callback: (chunk: Array<BatchEntryType>) => Promise<PromiseResult>,
+): Promise<PromiseSettledResult<PromiseResult>[]> {
+	return Promise.allSettled(chunks.map((chunk) => tryExecute(host, callback(chunk), { disableNotifications: true })));
+}

src/Umbraco.Web.UI.Client/src/packages/core/resources/try-execute/index.ts

@@ -0,0 +1,5 @@
+export * from './batch-try-execute.function.js';
+export * from './try-execute.controller.js';
+export * from './tryExecute.function.js';
+export * from './tryExecuteAndNotify.function.js';
+export * from './tryXhrRequest.function.js';

src/Umbraco.Web.UI.Client/src/packages/core/resources/try-execute.controller.ts renamed to src/Umbraco.Web.UI.Client/src/packages/core/resources/try-execute/try-execute.controller.ts

@@ -1,7 +1,7 @@
-import { isProblemDetailsLike } from './apiTypeValidators.function.js';
-import { UmbResourceController } from './resource.controller.js';
-import type { UmbApiResponse, UmbTryExecuteOptions } from './types.js';
-import { UmbApiError, UmbCancelError } from './umb-error.js';
+import { isProblemDetailsLike } from '../apiTypeValidators.function.js';
+import { UmbResourceController } from '../resource.controller.js';
+import type { UmbApiResponse, UmbTryExecuteOptions } from '../types.js';
+import { UmbApiError, UmbCancelError } from '../umb-error.js';
 
 export class UmbTryExecuteController<T> extends UmbResourceController<T> {
 	#abortSignal?: AbortSignal;

src/Umbraco.Web.UI.Client/src/packages/core/resources/tryExecute.function.ts renamed to src/Umbraco.Web.UI.Client/src/packages/core/resources/try-execute/tryExecute.function.ts

@@ -1,5 +1,5 @@
+import type { UmbApiResponse, UmbTryExecuteOptions } from '../types.js';
 import { UmbTryExecuteController } from './try-execute.controller.js';
-import type { UmbApiResponse, UmbTryExecuteOptions } from './types.js';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 
 /**

src/Umbraco.Web.UI.Client/src/packages/core/resources/tryExecuteAndNotify.function.ts renamed to src/Umbraco.Web.UI.Client/src/packages/core/resources/try-execute/tryExecuteAndNotify.function.ts

@@ -1,5 +1,5 @@
+import type { UmbApiResponse } from '../types.js';
 import { UmbTryExecuteController } from './try-execute.controller.js';
-import type { UmbApiResponse } from './types.js';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { UmbDeprecation } from '@umbraco-cms/backoffice/utils';
 

src/Umbraco.Web.UI.Client/src/packages/core/resources/tryXhrRequest.function.ts renamed to src/Umbraco.Web.UI.Client/src/packages/core/resources/try-execute/tryXhrRequest.function.ts

@@ -1,8 +1,8 @@
+import { UmbCancelablePromise } from '../cancelable-promise.js';
+import { UmbApiError } from '../umb-error.js';
+import { isProblemDetailsLike } from '../apiTypeValidators.function.js';
+import type { UmbApiResponse, XhrRequestOptions } from '../types.js';
 import { UmbTryExecuteController } from './try-execute.controller.js';
-import { UmbCancelablePromise } from './cancelable-promise.js';
-import { UmbApiError } from './umb-error.js';
-import { isProblemDetailsLike } from './apiTypeValidators.function.js';
-import type { UmbApiResponse, XhrRequestOptions } from './types.js';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { umbHttpClient } from '@umbraco-cms/backoffice/http-client';
 

src/Umbraco.Web.UI.Client/src/packages/core/resources/types.ts

@@ -1,4 +1,5 @@
 import type { UmbApiError, UmbCancelError, UmbError } from './umb-error.js';
+export type * from './data-api/types.js';
 
 export interface XhrRequestOptions extends UmbTryExecuteOptions {
 	baseUrl?: string;

src/Umbraco.Web.UI.Client/src/packages/core/utils/array/batch-array.test.ts

@@ -0,0 +1,25 @@
+import { expect } from '@open-wc/testing';
+import { batchArray } from './batch-array.js';
+
+describe('batchArray', () => {
+	it('should split an array into chunks of the specified size', () => {
+		const array = [1, 2, 3, 4, 5];
+		const batchSize = 2;
+		const result = batchArray(array, batchSize);
+		expect(result).to.deep.equal([[1, 2], [3, 4], [5]]);
+	});
+
+	it('should handle arrays smaller than the batch size', () => {
+		const array = [1];
+		const batchSize = 2;
+		const result = batchArray(array, batchSize);
+		expect(result).to.deep.equal([[1]]);
+	});
+
+	it('should handle empty arrays', () => {
+		const array: number[] = [];
+		const batchSize = 2;
+		const result = batchArray(array, batchSize);
+		expect(result).to.deep.equal([]);
+	});
+});

src/Umbraco.Web.UI.Client/src/packages/core/utils/array/batch-array.ts

@@ -0,0 +1,16 @@
+/**
+ * Splits an array into chunks of a specified size
+ * @param { Array<BatchEntryType> } array - The array to split
+ * @param {number }batchSize - The size of each chunk
+ * @returns {Array<Array<T>>} - An array of chunks
+ */
+export function batchArray<BatchEntryType>(
+	array: Array<BatchEntryType>,
+	batchSize: number,
+): Array<Array<BatchEntryType>> {
+	const chunks: Array<Array<BatchEntryType>> = [];
+	for (let i = 0; i < array.length; i += batchSize) {
+		chunks.push(array.slice(i, i + batchSize));
+	}
+	return chunks;
+}

src/Umbraco.Web.UI.Client/src/packages/core/utils/array/index.ts

@@ -0,0 +1 @@
+export * from './batch-array.js';

src/Umbraco.Web.UI.Client/src/packages/core/utils/index.ts

@@ -1,3 +1,4 @@
+export * from './array/index.js';
 export * from './bytes/bytes.function.js';
 export * from './debounce/debounce.function.js';
 export * from './deprecation/index.js';

src/Umbraco.Web.UI.Client/src/packages/data-type/repository/item/data-type-item.server.data-source.ts

@@ -6,6 +6,7 @@ import { DataTypeService } from '@umbraco-cms/backoffice/external/backend-api';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
 import type { ManifestPropertyEditorUi } from '@umbraco-cms/backoffice/property-editor';
+import { UmbItemDataApiGetRequestController } from '@umbraco-cms/backoffice/entity-item';
 
 let manifestPropertyEditorUis: Array<ManifestPropertyEditorUi> = [];
 
@@ -26,7 +27,6 @@ export class UmbDataTypeItemServerDataSource extends UmbItemServerDataSourceBase
 
 	constructor(host: UmbControllerHost) {
 		super(host, {
-			getItems,
 			mapper,
 		});
 
@@ -37,10 +37,21 @@ export class UmbDataTypeItemServerDataSource extends UmbItemServerDataSourceBase
 			})
 			.unsubscribe();
 	}
-}
 
-/* eslint-disable local-rules/no-direct-api-import */
-const getItems = (uniques: Array<string>) => DataTypeService.getItemDataType({ query: { id: uniques } });
+	override async getItems(uniques: Array<string>) {
+		if (!uniques) throw new Error('Uniques are missing');
+
+		const itemRequestManager = new UmbItemDataApiGetRequestController(this, {
+			// eslint-disable-next-line local-rules/no-direct-api-import
+			api: (args) => DataTypeService.getItemDataType({ query: { id: args.uniques } }),
+			uniques,
+		});
+
+		const { data, error } = await itemRequestManager.request();
+
+		return { data: this._getMappedItems(data), error };
+	}
+}
 
 const mapper = (item: DataTypeItemResponseModel): UmbDataTypeItemModel => {
 	return {

src/Umbraco.Web.UI.Client/src/packages/dictionary/repository/item/dictionary-item.server.data-source.ts

@@ -4,6 +4,7 @@ import { UmbItemServerDataSourceBase } from '@umbraco-cms/backoffice/repository'
 import type { DictionaryItemItemResponseModel } from '@umbraco-cms/backoffice/external/backend-api';
 import { DictionaryService } from '@umbraco-cms/backoffice/external/backend-api';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import { UmbItemDataApiGetRequestController } from '@umbraco-cms/backoffice/entity-item';
 
 /**
  * A server data source for Dictionary items
@@ -21,14 +22,24 @@ export class UmbDictionaryItemServerDataSource extends UmbItemServerDataSourceBa
 	 */
 	constructor(host: UmbControllerHost) {
 		super(host, {
-			getItems,
 			mapper,
 		});
 	}
-}
 
-/* eslint-disable local-rules/no-direct-api-import */
-const getItems = (uniques: Array<string>) => DictionaryService.getItemDictionary({ query: { id: uniques } });
+	override async getItems(uniques: Array<string>) {
+		if (!uniques) throw new Error('Uniques are missing');
+
+		const itemRequestManager = new UmbItemDataApiGetRequestController(this, {
+			// eslint-disable-next-line local-rules/no-direct-api-import
+			api: (args) => DictionaryService.getItemDictionary({ query: { id: args.uniques } }),
+			uniques,
+		});
+
+		const { data, error } = await itemRequestManager.request();
+
+		return { data: this._getMappedItems(data), error };
+	}
+}
 
 const mapper = (item: DictionaryItemItemResponseModel): UmbDictionaryItemModel => {
 	return {