Feature: Inflight Request Cache for Document Types and Data Types (#19956)

* extend controller base

* extend controller base

* add package for management api

* add signalr as external package

* connect to server event hub

* do no act on undefined

* add event subject

* correct alias

* export token

* add helper methods

* cache server responses

* fix import

* use helpers

* add detail request manager

* implement for document type

* implement for data type

* add method for update

* add support for create method

* align code

* Update detail-request.manager.ts

* move explicit naming

* move into folder

* collect server code in folder

* add implementation for data type request manager

* implement for document type

* only cache when we have connection to the server events

* poc inflight request cache

* clean up

* update

* add management api inflight request cache

* Update document-type-detail.server.request-manager.ts

* Update src/Umbraco.Web.UI.Client/src/packages/management-api/detail/detail-data.request-manager.ts

Co-authored-by: Copilot <[email protected]>

---------

Co-authored-by: Copilot <[email protected]>

Author: madsrasmussen

src/Umbraco.Web.UI.Client/src/packages/data-type/repository/detail/server-data-source/data-type-detail.server.request-manager.ts

@@ -7,20 +7,26 @@ import {
 	type DataTypeResponseModel,
 	type UpdateDataTypeRequestModel,
 } from '@umbraco-cms/backoffice/external/backend-api';
-import { UmbManagementApiDetailDataRequestManager } from '@umbraco-cms/backoffice/management-api';
+import {
+	UmbManagementApiDetailDataRequestManager,
+	UmbManagementApiInflightRequestCache,
+} from '@umbraco-cms/backoffice/management-api';
 
 export class UmbManagementApiDataTypeDetailDataRequestManager extends UmbManagementApiDetailDataRequestManager<
 	DataTypeResponseModel,
 	UpdateDataTypeRequestModel,
 	CreateDataTypeRequestModel
 > {
+	static #inflightRequestCache = new UmbManagementApiInflightRequestCache<DataTypeResponseModel>();
+
 	constructor(host: UmbControllerHost) {
 		super(host, {
 			create: (body: CreateDataTypeRequestModel) => DataTypeService.postDataType({ body }),
 			read: (id: string) => DataTypeService.getDataTypeById({ path: { id } }),
 			update: (id: string, body: UpdateDataTypeRequestModel) => DataTypeService.putDataTypeById({ path: { id }, body }),
 			delete: (id: string) => DataTypeService.deleteDataTypeById({ path: { id } }),
 			dataCache: dataTypeDetailCache,
+			inflightRequestCache: UmbManagementApiDataTypeDetailDataRequestManager.#inflightRequestCache,
 		});
 	}
 }

src/Umbraco.Web.UI.Client/src/packages/documents/document-types/repository/detail/server-data-source/document-type-detail.server.request-manager.ts

@@ -7,13 +7,18 @@ import {
 	type DocumentTypeResponseModel,
 	type UpdateDocumentTypeRequestModel,
 } from '@umbraco-cms/backoffice/external/backend-api';
-import { UmbManagementApiDetailDataRequestManager } from '@umbraco-cms/backoffice/management-api';
+import {
+	UmbManagementApiDetailDataRequestManager,
+	UmbManagementApiInflightRequestCache,
+} from '@umbraco-cms/backoffice/management-api';
 
 export class UmbManagementApiDocumentTypeDetailDataRequestManager extends UmbManagementApiDetailDataRequestManager<
 	DocumentTypeResponseModel,
 	UpdateDocumentTypeRequestModel,
 	CreateDocumentTypeRequestModel
 > {
+	static #inflightRequestCache = new UmbManagementApiInflightRequestCache<DocumentTypeResponseModel>();
+
 	constructor(host: UmbControllerHost) {
 		super(host, {
 			create: (body: CreateDocumentTypeRequestModel) => DocumentTypeService.postDocumentType({ body }),
@@ -22,6 +27,7 @@ export class UmbManagementApiDocumentTypeDetailDataRequestManager extends UmbMan
 				DocumentTypeService.putDocumentTypeById({ path: { id }, body }),
 			delete: (id: string) => DocumentTypeService.deleteDocumentTypeById({ path: { id } }),
 			dataCache: documentTypeDetailCache,
+			inflightRequestCache: UmbManagementApiDocumentTypeDetailDataRequestManager.#inflightRequestCache,
 		});
 	}
 }

src/Umbraco.Web.UI.Client/src/packages/management-api/detail/detail-data.request-manager.ts

@@ -1,4 +1,5 @@
 import { UMB_MANAGEMENT_API_SERVER_EVENT_CONTEXT } from '../server-event/constants.js';
+import type { UmbManagementApiInflightRequestCache } from '../inflight-request/cache.js';
 import type { UmbManagementApiDetailDataCache } from './cache.js';
 import {
 	tryExecute,
@@ -20,6 +21,7 @@ export interface UmbManagementApiDetailDataRequestManagerArgs<
 	update: (id: string, data: UpdateRequestModelType) => Promise<UmbApiResponse<{ data: unknown }>>;
 	delete: (id: string) => Promise<UmbApiResponse<{ data: unknown }>>;
 	dataCache: UmbManagementApiDetailDataCache<DetailResponseModelType>;
+	inflightRequestCache: UmbManagementApiInflightRequestCache<DetailResponseModelType>;
 }
 
 export class UmbManagementApiDetailDataRequestManager<
@@ -28,6 +30,7 @@ export class UmbManagementApiDetailDataRequestManager<
 	UpdateRequestModelType,
 > extends UmbControllerBase {
 	#dataCache: UmbManagementApiDetailDataCache<DetailResponseModelType>;
+	#inflightRequestCache: UmbManagementApiInflightRequestCache<DetailResponseModelType>;
 
 	#create;
 	#read;
@@ -52,6 +55,7 @@ export class UmbManagementApiDetailDataRequestManager<
 		this.#delete = args.delete;
 
 		this.#dataCache = args.dataCache;
+		this.#inflightRequestCache = args.inflightRequestCache;
 
 		this.consumeContext(UMB_MANAGEMENT_API_SERVER_EVENT_CONTEXT, (context) => {
 			this.#serverEventContext = context;
@@ -73,18 +77,36 @@ export class UmbManagementApiDetailDataRequestManager<
 		let data: DetailResponseModelType | undefined;
 		let error: UmbApiError | UmbCancelError | undefined;
 
+		const inflightCacheKey = `read:${id}`;
+
 		// Only read from the cache when we are connected to the server events
 		if (this.#isConnectedToServerEvents && this.#dataCache.has(id)) {
 			data = this.#dataCache.get(id);
 		} else {
-			const { data: serverData, error: serverError } = await tryExecute(this, this.#read(id));
+			const hasInflightRequest = this.#inflightRequestCache.has(inflightCacheKey);
+
+			const request = hasInflightRequest
+				? this.#inflightRequestCache.get(inflightCacheKey)
+				: tryExecute(this, this.#read(id));
 
-			if (this.#isConnectedToServerEvents && serverData) {
-				this.#dataCache.set(id, serverData);
+			if (!request) {
+				throw new Error(`Failed to create or retrieve 'read' request for ID: ${id} (cache key: ${inflightCacheKey}). Aborting read.`);
 			}
 
-			data = serverData;
-			error = serverError;
+			this.#inflightRequestCache.set(inflightCacheKey, request);
+
+			try {
+				const { data: serverData, error: serverError } = await request;
+
+				if (this.#isConnectedToServerEvents && serverData) {
+					this.#dataCache.set(id, serverData);
+				}
+
+				data = serverData;
+				error = serverError;
+			} finally {
+				this.#inflightRequestCache.delete(inflightCacheKey);
+			}
 		}
 
 		return { data, error };

src/Umbraco.Web.UI.Client/src/packages/management-api/detail/index.ts

@@ -1,3 +1,3 @@
-export * from './detail-data.request-manager.js';
-export * from './cache.js';
 export * from './cache-invalidation.manager.js';
+export * from './cache.js';
+export * from './detail-data.request-manager.js';

src/Umbraco.Web.UI.Client/src/packages/management-api/index.ts

@@ -1,4 +1,5 @@
 export * from './detail/index.js';
 export * from './item/index.js';
 export * from './server-event/constants.js';
+export * from './inflight-request/cache.js';
 export type * from './types.js';

src/Umbraco.Web.UI.Client/src/packages/management-api/inflight-request/cache.ts

@@ -0,0 +1,60 @@
+import type { UmbApiResponse } from '@umbraco-cms/backoffice/resources';
+
+// Keep internal
+type RequestResolvedType<ResponseModelType> = UmbApiResponse<{ data?: ResponseModelType }>;
+
+/**
+ * A cache for inflight requests to the Management Api. Use this class to cache requests and avoid duplicate calls.
+ * @class UmbManagementApiInflightRequestCache
+ * @template ResponseModelType
+ */
+export class UmbManagementApiInflightRequestCache<ResponseModelType> {
+	#entries = new Map<string, Promise<RequestResolvedType<ResponseModelType>>>();
+
+	/**
+	 * Checks if an entry exists in the cache
+	 * @param {string} key - The ID of the entry to check
+	 * @returns {boolean} - True if the entry exists, false otherwise
+	 * @memberof UmbManagementApiInflightRequestCache
+	 */
+	has(key: string): boolean {
+		return this.#entries.has(key);
+	}
+
+	/**
+	 * Adds an entry to the cache
+	 * @param {string} key - A unique key representing the promise
+	 * @param {Promise<UmbApiResponse<RequestResolvedType<ResponseModelType>>>} promise - The promise to cache
+	 * @memberof UmbManagementApiInflightRequestCache
+	 */
+	set(key: string, promise: Promise<RequestResolvedType<ResponseModelType>>): void {
+		this.#entries.set(key, promise);
+	}
+
+	/**
+	 * Retrieves an entry from the cache
+	 * @param {string} key - The ID of the entry to retrieve
+	 * @returns {Promise<RequestResolvedType<ResponseModelType>> | undefined} - The cached promise or undefined if not found
+	 * @memberof UmbManagementApiInflightRequestCache
+	 */
+	get(key: string): Promise<RequestResolvedType<ResponseModelType>> | undefined {
+		return this.#entries.get(key);
+	}
+
+	/**
+	 * Deletes an entry from the cache
+	 * @param {string} key - The ID of the entry to delete
+	 * @memberof UmbManagementApiInflightRequestCache
+	 */
+	delete(key: string): void {
+		this.#entries.delete(key);
+	}
+
+	/**
+	 * Clears all entries from the cache
+	 * @memberof UmbManagementApiInflightRequestCache
+	 */
+	clear(): void {
+		this.#entries.clear();
+	}
+}