diff --git a/packages/components/package-lock.json b/packages/components/package-lock.json
index 88d5fa2172..41abb65a8c 100644
--- a/packages/components/package-lock.json
+++ b/packages/components/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@labkey/components",
-  "version": "7.13.1",
+  "version": "7.14.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@labkey/components",
-      "version": "7.13.1",
+      "version": "7.14.0",
       "license": "SEE LICENSE IN LICENSE.txt",
       "dependencies": {
         "@hello-pangea/dnd": "18.0.1",
diff --git a/packages/components/package.json b/packages/components/package.json
index ac1be00930..7b6e33ec3e 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@labkey/components",
-  "version": "7.13.1",
+  "version": "7.14.0",
   "description": "Components, models, actions, and utility functions for LabKey applications and pages",
   "sideEffects": false,
   "files": [
diff --git a/packages/components/releaseNotes/components.md b/packages/components/releaseNotes/components.md
index f91fa3da4e..a30bafbb87 100644
--- a/packages/components/releaseNotes/components.md
+++ b/packages/components/releaseNotes/components.md
@@ -1,6 +1,13 @@
 # @labkey/components
 Components, models, actions, and utility functions for LabKey applications and pages
 
+### version 7.14.0
+*Released*: 30 January 2026
+- Update `withQueryModels` to track and cancel requests for `loadRows`, `loadSelections` and `loadTotalCount`
+- Add `RequestHandler` handling for `selectRows` and `selectRowsDeprecated`
+- Skip error logging when request is aborted
+- Update a few endpoint wrappers to use `request()`
+
 ### version 7.13.1
 *Released*: 26 January 2026
 - Merge from release26.1-SNAPSHOT to develop
diff --git a/packages/components/src/internal/actions.ts b/packages/components/src/internal/actions.ts
index 675d31656a..cf2cee4f33 100644
--- a/packages/components/src/internal/actions.ts
+++ b/packages/components/src/internal/actions.ts
@@ -16,7 +16,7 @@
 import { fromJS, List } from 'immutable';
 import { ActionURL, Ajax, Filter, getServerContext, Query, Utils } from '@labkey/api';
 
-import { resolveKey, SchemaQuery } from '../public/SchemaQuery';
+import { SchemaQuery } from '../public/SchemaQuery';
 
 import { Actions } from '../public/QueryModel/withQueryModels';
 
@@ -38,9 +38,8 @@ import {
 } from './constants';
 import { DataViewInfo } from './DataViewInfo';
 
-import { handleRequestFailure } from './request';
+import { request, RequestHandler } from './request';
 import { resolveErrorMessage } from './util/messaging';
-import { buildURL } from './url/AppURL';
 
 import { ViewInfo } from './ViewInfo';
 import { createGridModelId } from './models';
@@ -56,52 +55,41 @@ export function selectAll(
     queryParameters?: Record<string, any>,
     containerFilter?: Query.ContainerFilter
 ): Promise<SelectResponse> {
-    return new Promise((resolve, reject) => {
-        return Ajax.request({
-            url: buildURL('query', 'selectAll.api', undefined, {
-                container: containerPath,
-            }),
-            method: 'POST',
-            params: buildQueryParams(key, schemaQuery, filterArray, queryParameters, containerPath, containerFilter),
-            success: Utils.getCallbackWrapper(response => {
-                resolve(response);
-            }),
-            failure: handleRequestFailure(
-                reject,
-                `Problem in selecting all items in the grid ${key} ${schemaQuery.schemaName} ${schemaQuery.queryName}`
-            ),
-        });
+    return request<SelectResponse>({
+        url: ActionURL.buildURL('query', 'selectAll.api', containerPath),
+        method: 'POST',
+        params: buildQueryParams(key, schemaQuery, filterArray, queryParameters, containerPath, containerFilter),
+        errorLogMsg: `Problem in selecting all items in the grid ${key} ${schemaQuery.schemaName} ${schemaQuery.queryName}`,
     });
 }
 
-export function getGridIdsFromTransactionId(
+export async function getGridIdsFromTransactionId(
     transactionAuditId: number | string,
     dataType: string,
     containerPath?: string
 ): Promise<string[]> {
-    if (!transactionAuditId) {
-        return;
-    }
-    const failureMsg = 'There was a problem retrieving the ' + dataType + ' from the last action.';
-    return new Promise((resolve, reject) => {
-        Ajax.request({
-            url: ActionURL.buildURL('audit', 'getTransactionRowIds.api'),
-            params: { transactionAuditId, dataType, containerFilter: getContainerFilterForFolder(containerPath) },
-            success: Utils.getCallbackWrapper(response => {
-                if (response.success) {
-                    // The server returns numbers, so we coerce to string; If we don't it can lead to bugs (and has).
-                    resolve(response.rowIds.map((rowId: number) => rowId.toString()));
-                } else {
-                    console.error(failureMsg + ' (transactionAuditId = ' + transactionAuditId + ')', response);
-                    reject(failureMsg);
-                }
-            }),
-            failure: Utils.getCallbackWrapper(error => {
-                console.error(failureMsg + ' (transactionAuditId = ' + transactionAuditId + ')', error);
-                reject(failureMsg);
-            }),
-        });
+    if (!transactionAuditId) return;
+
+    const failureMsg = `There was a problem retrieving the ${dataType} from the last action.`;
+    const errorLogMsg = `${failureMsg} (transactionAuditId = ${transactionAuditId})`;
+
+    const response = await request<{ rowIds: number[]; success: boolean }>({
+        url: ActionURL.buildURL('audit', 'getTransactionRowIds.api'),
+        params: {
+            containerFilter: getContainerFilterForFolder(containerPath),
+            dataType,
+            transactionAuditId,
+        },
+        errorLogMsg,
     });
+
+    if (!response.success) {
+        console.error(errorLogMsg, response);
+        throw new Error(failureMsg);
+    }
+
+    // The server returns numbers, so we coerce to string; If we don't, it can lead to bugs (and has).
+    return response.rowIds.map(rowId => rowId.toString());
 }
 
 export async function selectGridIdsFromTransactionId(
@@ -274,7 +262,8 @@ export function exportRows(type: EXPORT_TYPES, exportParams: Record<string, any>
         }
     });
 
-    let controller, action;
+    let action: string;
+    let controller: string;
     if (type === EXPORT_TYPES.CSV || type === EXPORT_TYPES.TSV || type === EXPORT_TYPES.LABEL_TEMPLATE) {
         controller = 'query';
         action = 'exportRowsTsv.post';
@@ -298,7 +287,7 @@ export function exportRows(type: EXPORT_TYPES, exportParams: Record<string, any>
 
     form.append('formDataEncoded', 'true');
     Ajax.request({
-        url: buildURL(controller, action, undefined, { container: containerPath, returnUrl: false }),
+        url: ActionURL.buildURL(controller, action, containerPath),
         method: 'POST',
         form,
         downloadFile: true,
@@ -380,29 +369,24 @@ export function getSelected(
     filterArray?: Filter.IFilter[],
     containerPath?: string,
     queryParameters?: Record<string, any>,
-    containerFilter?: Query.ContainerFilter
+    containerFilter?: Query.ContainerFilter,
+    requestHandler?: RequestHandler
 ): Promise<GetSelectedResponse> {
-    if (useSnapshotSelection) return getSnapshotSelections(key, containerPath);
+    if (useSnapshotSelection) return getSnapshotSelections(key, containerPath, requestHandler);
 
-    return new Promise((resolve, reject) => {
-        return Ajax.request({
-            url: buildURL('query', 'getSelected.api', undefined, {
-                container: containerPath,
-            }),
-            method: 'POST',
-            jsonData: getFilteredQueryParams(
-                key,
-                schemaQuery,
-                filterArray,
-                queryParameters,
-                containerPath,
-                containerFilter
-            ),
-            success: Utils.getCallbackWrapper(response => {
-                resolve(response);
-            }),
-            failure: handleRequestFailure(reject, 'Failed to get selected.'),
-        });
+    return request({
+        url: ActionURL.buildURL('query', 'getSelected.api', containerPath),
+        method: 'POST',
+        jsonData: getFilteredQueryParams(
+            key,
+            schemaQuery,
+            filterArray,
+            queryParameters,
+            containerPath,
+            containerFilter
+        ),
+        errorLogMsg: 'Failed to get selected.',
+        requestHandler,
     });
 }
 
@@ -419,7 +403,7 @@ export async function getSelectedDataDeprecated(
     viewName?: string,
     keyColumn = 'RowId'
 ): Promise<GridResponse> {
-    const { models, orderedModels } = await selectRowsDeprecated({
+    const { key, models, orderedModels } = await selectRowsDeprecated({
         schemaName,
         queryName,
         viewName,
@@ -430,11 +414,9 @@ export async function getSelectedDataDeprecated(
         offset: 0,
     });
 
-    const dataKey = resolveKey(schemaName, queryName);
-
     return {
-        data: fromJS(models[dataKey]),
-        dataIds: List(orderedModels[dataKey]),
+        data: fromJS(models[key]),
+        dataIds: orderedModels[key],
     };
 }
 
@@ -452,26 +434,18 @@ export type ClearSelectedOptions = {
 };
 
 export function clearSelected(options: ClearSelectedOptions): Promise<SelectResponse> {
-    return new Promise((resolve, reject) => {
-        return Ajax.request({
-            url: ActionURL.buildURL('query', 'clearSelected.api', options.containerPath),
-            method: 'POST',
-            jsonData: getFilteredQueryParams(
-                options.selectionKey,
-                options.schemaQuery,
-                options.filters,
-                options.queryParameters,
-                options.containerPath,
-                options.containerFilter
-            ),
-            success: Utils.getCallbackWrapper(response => {
-                resolve(response);
-            }),
-            failure: handleRequestFailure(
-                reject,
-                `Problem clearing the selection ${options.selectionKey} ${options.schemaQuery?.schemaName} ${options.schemaQuery?.queryName}`
-            ),
-        });
+    return request<SelectResponse>({
+        url: ActionURL.buildURL('query', 'clearSelected.api', options.containerPath),
+        method: 'POST',
+        jsonData: getFilteredQueryParams(
+            options.selectionKey,
+            options.schemaQuery,
+            options.filters,
+            options.queryParameters,
+            options.containerPath,
+            options.containerFilter
+        ),
+        errorLogMsg: `Problem clearing the selection ${options.selectionKey} ${options.schemaQuery?.schemaName} ${options.schemaQuery?.queryName}`,
     });
 }
 
@@ -490,7 +464,7 @@ export function clearSelected(options: ClearSelectedOptions): Promise<SelectResp
 export function setSelected(
     key: string,
     checked: boolean,
-    ids: string[] | string,
+    ids: string | string[],
     containerPath?: string,
     validateIds?: boolean,
     schemaName?: string,
@@ -498,47 +472,35 @@ export function setSelected(
     filters?: Filter.IFilter[],
     queryParameters?: Record<string, any>
 ): Promise<SelectResponse> {
-    return new Promise((resolve, reject) => {
-        return Ajax.request({
-            url: buildURL('query', 'setSelected.api', undefined, {
-                container: containerPath,
-            }),
-            method: 'POST',
-            jsonData: {
-                id: ids,
-                key,
-                checked,
-                validateIds,
-                schemaName,
-                queryName,
-                filterList: filters,
-                queryParameters,
-            },
-            success: Utils.getCallbackWrapper(response => {
-                resolve(response);
-            }),
-            failure: handleRequestFailure(reject, 'Failed to set selection.'),
-        });
+    return request<SelectResponse>({
+        url: ActionURL.buildURL('query', 'setSelected.api', containerPath),
+        method: 'POST',
+        jsonData: {
+            id: ids,
+            key,
+            checked,
+            validateIds,
+            schemaName,
+            queryName,
+            filterList: filters,
+            queryParameters,
+        },
+        errorLogMsg: 'Failed to set selection.',
     });
 }
 
 export type ReplaceSelectedOptions = {
     containerPath?: string;
-    id: string[] | string;
+    id: string | string[];
     selectionKey: string;
 };
 
 export function replaceSelected(options: ReplaceSelectedOptions): Promise<SelectResponse> {
-    return new Promise((resolve, reject) => {
-        return Ajax.request({
-            url: ActionURL.buildURL('query', 'replaceSelected.api', options.containerPath),
-            method: 'POST',
-            jsonData: { key: options.selectionKey, id: options.id },
-            success: Utils.getCallbackWrapper(response => {
-                resolve(response);
-            }),
-            failure: handleRequestFailure(reject, 'Failed to replace selection.'),
-        });
+    return request<SelectResponse>({
+        url: ActionURL.buildURL('query', 'replaceSelected.api', options.containerPath),
+        method: 'POST',
+        jsonData: { key: options.selectionKey, id: options.id },
+        errorLogMsg: 'Failed to replace selection.',
     });
 }
 
@@ -551,24 +513,14 @@ export function replaceSelected(options: ReplaceSelectedOptions): Promise<Select
  */
 export function setSnapshotSelections(
     key: string,
-    ids: string[] | string | number[],
+    ids: number[] | string | string[],
     containerPath?: string
 ): Promise<SelectResponse> {
-    return new Promise((resolve, reject) => {
-        return Ajax.request({
-            url: buildURL('query', 'setSnapshotSelection.api', undefined, {
-                container: containerPath,
-            }),
-            method: 'POST',
-            jsonData: {
-                key,
-                id: ids,
-            },
-            success: Utils.getCallbackWrapper(response => {
-                resolve(response);
-            }),
-            failure: handleRequestFailure(reject, 'Failed to set snapshot selection.'),
-        });
+    return request<SelectResponse>({
+        url: ActionURL.buildURL('query', 'setSnapshotSelection.api', containerPath),
+        method: 'POST',
+        jsonData: { key, id: ids },
+        errorLogMsg: 'Failed to set snapshot selection.',
     });
 }
 
@@ -577,55 +529,40 @@ export function setSnapshotSelections(
  * Get the snapshot selections for a grid
  * @param key the selection key for the grid
  * @param containerPath optional path to the container for this grid.  Default is the current container path
+ * @param requestHandler optional request handler to use for the request
  */
-export function getSnapshotSelections(key: string, containerPath?: string): Promise<GetSelectedResponse> {
-    return new Promise((resolve, reject) => {
-        return Ajax.request({
-            url: buildURL('query', 'getSnapshotSelection.api', undefined, {
-                container: containerPath,
-            }),
-            method: 'POST',
-            jsonData: {
-                key,
-            },
-            success: Utils.getCallbackWrapper(response => {
-                resolve(response);
-            }),
-            failure: handleRequestFailure(reject, 'Failed to get snapshot selection.'),
-        });
+export function getSnapshotSelections(
+    key: string,
+    containerPath?: string,
+    requestHandler?: RequestHandler
+): Promise<GetSelectedResponse> {
+    return request<GetSelectedResponse>({
+        url: ActionURL.buildURL('query', 'getSnapshotSelection.api', containerPath),
+        method: 'POST',
+        jsonData: { key },
+        errorLogMsg: 'Failed to get snapshot selection.',
+        requestHandler,
     });
 }
 
-export function fetchCharts(schemaQuery: SchemaQuery, containerPath?: string): Promise<DataViewInfo[]> {
-    return new Promise((resolve, reject) => {
-        Ajax.request({
-            url: buildURL(
-                'reports',
-                'getReportInfos.api',
-                {
-                    schemaName: schemaQuery.schemaName,
-                    queryName: schemaQuery.queryName,
-                },
-                {
-                    container: containerPath,
-                }
-            ),
-            success: Utils.getCallbackWrapper((response: any) => {
-                if (response && response.success) {
-                    resolve(response.reports.map(report => new DataViewInfo(report)));
-                } else {
-                    reject({
-                        error:
-                            'Unable to get report info for schema/query: ' +
-                            schemaQuery.schemaName +
-                            '/' +
-                            schemaQuery.queryName,
-                    });
-                }
-            }),
-            failure: handleRequestFailure(reject),
-        });
+export async function fetchCharts(schemaQuery: SchemaQuery, containerPath?: string): Promise<DataViewInfo[]> {
+    const { queryName, schemaName } = schemaQuery;
+    const errorLogMsg = `Unable to get report info for schema/query: ${schemaName}/${queryName}`;
+
+    const response = await request<{ reports: Partial<DataViewInfo[]>; success: boolean }>({
+        url: ActionURL.buildURL('reports', 'getReportInfos.api', containerPath, {
+            schemaName,
+            queryName,
+        }),
+        errorLogMsg,
     });
+
+    if (!response.success) {
+        console.error(errorLogMsg, response);
+        throw new Error(errorLogMsg);
+    }
+
+    return response.reports.map(report => new DataViewInfo(report));
 }
 
 /**
@@ -644,7 +581,7 @@ export function incrementClientSideMetricCount(featureArea: string, metricName:
     }
 
     Ajax.request({
-        url: buildURL('core', 'incrementClientSideMetricCount.api'),
+        url: ActionURL.buildURL('core', 'incrementClientSideMetricCount.api'),
         method: 'POST',
         jsonData: {
             featureArea,
@@ -829,9 +766,7 @@ export function renameGridView(
 ): Promise<void> {
     return new Promise((resolve, reject) => {
         Ajax.request({
-            url: buildURL('query', 'renameQueryView.api', undefined, {
-                container: containerPath,
-            }),
+            url: ActionURL.buildURL('query', 'renameQueryView.api', containerPath),
             method: 'POST',
             jsonData: {
                 schemaName: schemaQuery.schemaName,
diff --git a/packages/components/src/internal/query/api.ts b/packages/components/src/internal/query/api.ts
index 65aaaabf39..1bfe44871a 100644
--- a/packages/components/src/internal/query/api.ts
+++ b/packages/components/src/internal/query/api.ts
@@ -465,28 +465,28 @@ export interface ISelectRowsResult {
     rowCount: number;
 }
 
-export type SelectRowsDeprecatedOptions = Omit<
-    Query.SelectRowsOptions,
-    'failure' | 'method' | 'requiredVersion' | 'scope' | 'success'
->;
+export interface SelectRowsDeprecatedOptions
+    extends Omit<Query.SelectRowsOptions, 'failure' | 'method' | 'requiredVersion' | 'scope' | 'success'> {
+    requestHandler?: RequestHandler;
+}
 
 /**
  * @deprecated use selectRows() or executeSql() instead.
  * Fetches an API response and normalizes the result JSON according to schema.
  * This makes every API response have the same shape, regardless of how nested it was.
  */
-export async function selectRowsDeprecated(options: SelectRowsDeprecatedOptions): Promise<ISelectRowsResult> {
+export async function selectRowsDeprecated(options_: SelectRowsDeprecatedOptions): Promise<ISelectRowsResult> {
+    const { requestHandler, ...options } = options_;
     const schemaQuery = new SchemaQuery(options.schemaName, options.queryName, options.viewName);
 
     const columns = options.columns ? options.columns : '*';
     const [queryInfo, response] = await Promise.all([
         getQueryDetails(options),
         new Promise<Query.Response>((resolve, reject) => {
-            Query.selectRows({
+            const request_ = Query.selectRows({
                 ...options,
                 requiredVersion: 17.1,
                 method: 'POST',
-                // put on this another parameter!
                 columns,
                 containerFilter: options.containerFilter ?? getContainerFilter(options.containerPath),
                 includeMetadata: isSelectRowMetadataRequired(options.includeMetadata, columns),
@@ -495,7 +495,9 @@ export async function selectRowsDeprecated(options: SelectRowsDeprecatedOptions)
                     resolve(response_);
                 },
                 failure: (data, request) => {
-                    console.error('There was a problem retrieving the data', data);
+                    if (request.status !== 0) {
+                        console.error('There was a problem retrieving the data', data);
+                    }
                     reject({
                         exceptionClass: data.exceptionClass,
                         message: data.exception,
@@ -504,6 +506,7 @@ export async function selectRowsDeprecated(options: SelectRowsDeprecatedOptions)
                     });
                 },
             });
+            requestHandler?.(request_);
         }),
     ]);
 
diff --git a/packages/components/src/internal/query/selectRows.ts b/packages/components/src/internal/query/selectRows.ts
index cce5b3e001..705cf8f418 100644
--- a/packages/components/src/internal/query/selectRows.ts
+++ b/packages/components/src/internal/query/selectRows.ts
@@ -5,12 +5,14 @@ import { QueryInfo } from '../../public/QueryInfo';
 import { URLResolver } from '../url/URLResolver';
 
 import { getContainerFilter, getQueryDetails, isSelectRowMetadataRequired } from './api';
+import { RequestHandler } from '../request';
 
 export interface SelectRowsOptions
     extends Omit<
         Query.SelectRowsOptions,
         'failure' | 'queryName' | 'requiredVersion' | 'schemaName' | 'scope' | 'success'
     > {
+    requestHandler?: RequestHandler;
     schemaQuery: SchemaQuery;
 }
 
@@ -37,6 +39,7 @@ export async function selectRows(options: SelectRowsOptions): Promise<SelectRows
         includeMetadata,
         includeTotalCount = false, // default to false to improve performance
         method = 'POST',
+        requestHandler,
         schemaQuery,
         ...selectRowsOptions
     } = options;
@@ -46,7 +49,7 @@ export async function selectRows(options: SelectRowsOptions): Promise<SelectRows
     const [queryInfo, response] = await Promise.all([
         getQueryDetails({ containerPath: options.containerPath, schemaQuery }),
         new Promise<Query.Response>((resolve, reject) => {
-            Query.selectRows({
+            const request_ = Query.selectRows({
                 ...selectRowsOptions,
                 columns,
                 containerFilter,
@@ -61,7 +64,9 @@ export async function selectRows(options: SelectRowsOptions): Promise<SelectRows
                     resolve(response_);
                 },
                 failure: (data, request) => {
-                    console.error('There was a problem retrieving the data', data);
+                    if (request.status !== 0) {
+                        console.error('There was a problem retrieving the data', data);
+                    }
                     reject({
                         exceptionClass: data.exceptionClass,
                         message: data.exception,
@@ -70,6 +75,7 @@ export async function selectRows(options: SelectRowsOptions): Promise<SelectRows
                     });
                 },
             });
+            requestHandler?.(request_);
         }),
     ]);
 
diff --git a/packages/components/src/internal/request.ts b/packages/components/src/internal/request.ts
index c847f9f1ff..c4412eaa91 100644
--- a/packages/components/src/internal/request.ts
+++ b/packages/components/src/internal/request.ts
@@ -22,7 +22,7 @@ export function handleRequestFailure(reject: (error: any) => void, logMsg?: stri
         (error, response) => {
             // Appends the response's status code to the error object
             const errorWithStatus = { ...error, status: response?.status };
-            if (logMsg) {
+            if (logMsg && errorWithStatus.status !== 0) {
                 console.error(logMsg, errorWithStatus);
             }
             reject(errorWithStatus);
diff --git a/packages/components/src/public/QueryModel/QueryModelLoader.ts b/packages/components/src/public/QueryModel/QueryModelLoader.ts
index 6cffe493d5..006298ba40 100644
--- a/packages/components/src/public/QueryModel/QueryModelLoader.ts
+++ b/packages/components/src/public/QueryModel/QueryModelLoader.ts
@@ -13,6 +13,7 @@ import { isRReportsEnabled } from '../../internal/app/utils';
 import { DataViewInfoTypes, VISUALIZATION_REPORTS } from '../../internal/constants';
 
 import { DataViewInfo, IDataViewInfo } from '../../internal/DataViewInfo';
+import { RequestHandler } from '../../internal/request';
 import { getQueryColumnRenderers } from '../../internal/global';
 import { getQueryDetails, selectRowsDeprecated } from '../../internal/query/api';
 import { DefaultRenderer } from '../../internal/renderers/DefaultRenderer';
@@ -51,7 +52,7 @@ export interface RowsResponse {
     orderedRows: string[];
     rowCount: number;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    rows: { [key: string]: any };
+    rows: Record<string, any>;
 }
 
 export interface QueryModelLoader {
@@ -77,13 +78,13 @@ export interface QueryModelLoader {
      * Loads the current page of rows for the specified model.
      * @param model: QueryModel
      */
-    loadRows: (model: QueryModel) => Promise<RowsResponse>;
+    loadRows: (model: QueryModel, requestHandler?: RequestHandler) => Promise<RowsResponse>;
 
     /**
      * Loads the selected RowIds (or PK values) for the specified model.
      * @param model: QueryModel
      */
-    loadSelections: (model: QueryModel) => Promise<Set<string>>;
+    loadSelections: (model: QueryModel, requestHandler?: RequestHandler) => Promise<Set<string>>;
 
     /**
      * Replaces the currently selected items with the given set of selections.
@@ -118,13 +119,14 @@ export const DefaultQueryModelLoader: QueryModelLoader = {
         });
         return queryInfo.mutate({ columns: bindColumnRenderers(queryInfo.columns) });
     },
-    async loadRows(model) {
+    async loadRows(model, requestHandler) {
         const result = await selectRowsDeprecated({
             ...model.loadRowsConfig,
             schemaName: model.schemaName,
             queryName: model.queryName,
             includeTotalCount: false, // if requesting to includeTotalCount, it will be loaded separately via loadTotalCount
             includeStyle: true, // Issue 49100
+            requestHandler,
         });
         const { key, models, orderedModels, rowCount, messages } = result;
 
@@ -156,7 +158,7 @@ export const DefaultQueryModelLoader: QueryModelLoader = {
             });
         }
     },
-    async loadSelections(model) {
+    async loadSelections(model, requestHandler) {
         const { containerFilter, selectionKey, schemaQuery, filters, queryParameters, selectionContainerPath } = model;
         const result = await getSelected(
             selectionKey,
@@ -165,7 +167,8 @@ export const DefaultQueryModelLoader: QueryModelLoader = {
             filters,
             selectionContainerPath,
             queryParameters,
-            containerFilter
+            containerFilter,
+            requestHandler
         );
         return new Set(result?.selected ?? []);
     },
diff --git a/packages/components/src/public/QueryModel/withQueryModels.test.ts b/packages/components/src/public/QueryModel/withQueryModels.test.ts
new file mode 100644
index 0000000000..40f7c750a2
--- /dev/null
+++ b/packages/components/src/public/QueryModel/withQueryModels.test.ts
@@ -0,0 +1,87 @@
+import { RequestManager } from './withQueryModels';
+
+describe('RequestManager', () => {
+    let manager: RequestManager;
+    let mockXHR: any;
+
+    beforeEach(() => {
+        manager = new RequestManager();
+        mockXHR = () => ({
+            abort: jest.fn(),
+            addEventListener: jest.fn(),
+        });
+    });
+
+    const ID = 'some|model|id|123';
+    const REQUEST_TYPE = 'someLoadAction';
+
+    it('should abort an existing request when a new one of the same type starts', () => {
+        const handler = manager.getRequestHandler(ID, REQUEST_TYPE);
+        const req1 = mockXHR();
+        const req2 = mockXHR();
+
+        handler(req1);
+        handler(req2);
+
+        expect(req1.abort).toHaveBeenCalledTimes(1);
+        expect(manager._requests[ID][REQUEST_TYPE]).toBe(req2);
+    });
+
+    it('should clean up references on loadend', () => {
+        const handler = manager.getRequestHandler(ID, REQUEST_TYPE);
+        const req = mockXHR();
+
+        let cleanup: () => void;
+        req.addEventListener.mockImplementation((event: string, cb: () => void) => {
+            if (event === 'loadend') cleanup = cb;
+        });
+
+        handler(req);
+        expect(manager._requests[ID]).toBeDefined();
+
+        // Simulate the request finishing
+        cleanup();
+
+        expect(manager._requests[ID]).toBeUndefined();
+    });
+
+    it('should not delete a new request if an old request finishes', () => {
+        const handler = manager.getRequestHandler(ID, REQUEST_TYPE);
+
+        const req1 = mockXHR();
+        let cleanup: () => void;
+        req1.addEventListener.mockImplementation((event: string, cb: () => void) => {
+            if (event === 'loadend') cleanup = cb;
+        });
+
+        handler(req1);
+
+        const req2 = mockXHR();
+        handler(req2);
+
+        // Simulate request 1 finally finishing its 'loadend' event
+        cleanup();
+
+        // Validate request 2 is still there
+        expect(manager._requests[ID][REQUEST_TYPE]).toBe(req2);
+    });
+
+    it('should handle requests object mutation during abort', () => {
+        const manager = new RequestManager();
+        const handler = manager.getRequestHandler(ID, REQUEST_TYPE);
+        const req1 = mockXHR();
+        handler(req1);
+
+        // Mock abort() so that the moment we try to start Req 2,
+        // the manager deletes the whole ID entry (simulating a concurrent loadend cleanup).
+        req1.abort.mockImplementation(() => {
+            delete manager._requests[ID];
+        });
+
+        const req2 = mockXHR();
+
+        // The manager should have correctly re-attached the ID to the state
+        expect(() => handler(req2)).not.toThrow();
+        expect(manager._requests[ID][REQUEST_TYPE]).toBe(req2);
+    });
+});
diff --git a/packages/components/src/public/QueryModel/withQueryModels.tsx b/packages/components/src/public/QueryModel/withQueryModels.tsx
index 8799b32682..34ee95a32a 100644
--- a/packages/components/src/public/QueryModel/withQueryModels.tsx
+++ b/packages/components/src/public/QueryModel/withQueryModels.tsx
@@ -19,6 +19,7 @@ import { incrementClientSideMetricCount } from '../../internal/actions';
 
 import { filterArraysEqual, getSelectRowCountColumnsStr, sortArraysEqual } from './utils';
 import { DefaultQueryModelLoader, QueryModelLoader } from './QueryModelLoader';
+import { RequestHandler } from '../../internal/request';
 import {
     getSettingsFromLocalStorage,
     GridMessage,
@@ -274,6 +275,56 @@ function applySavedSettings(id: string, model: QueryModel): QueryModel {
     return model;
 }
 
+// N.B. This is similar to useRequestHandler() but we cannot use a hook here, so we have to use class
+// variables instead. Additionally, we cannot make use of React.createRef() since that returns an immutable
+// reference unlike React.useRef() which is mutable.
+// Exported for unit tests
+export class RequestManager {
+    _requests: Record<string, Record<string, undefined | XMLHttpRequest>> = {};
+
+    public cancelAllRequests = (): void => {
+        Object.values(this._requests).forEach(allReq => {
+            Object.values(allReq).forEach(req => {
+                req?.abort();
+            });
+        });
+        this._requests = {};
+    };
+
+    public getRequestHandler(id: string, requestType: string): RequestHandler {
+        return request => {
+            const bucket = this._requests[id] || (this._requests[id] = {});
+
+            // Abort in-flight request
+            bucket[requestType]?.abort();
+
+            // If the bucket was detached during the abort() call,
+            // then re-attach it before assigning the new request.
+            if (this._requests[id] !== bucket) {
+                this._requests[id] = bucket;
+            }
+
+            bucket[requestType] = request;
+
+            // Remove the request once the request has completed
+            request.addEventListener(
+                'loadend',
+                () => {
+                    const bucket_ = this._requests[id];
+                    if (bucket_?.[requestType] === request) {
+                        delete bucket_[requestType];
+
+                        if (Object.keys(bucket_).length === 0) {
+                            delete this._requests[id];
+                        }
+                    }
+                },
+                { once: true }
+            );
+        };
+    }
+}
+
 /**
  * A wrapper for LabKey selectRows API. For in-depth documentation and examples see components/docs/QueryModel.md.
  * @param ComponentToWrap A component that implements generic Props and InjectedQueryModels.
@@ -311,6 +362,8 @@ export function withQueryModels<Props>(
     class ComponentWithQueryModels extends PureComponent<WrappedProps, State> {
         static defaultProps;
 
+        private requestManager = new RequestManager();
+
         constructor(props: WrappedProps) {
             super(props);
 
@@ -414,6 +467,10 @@ export function withQueryModels<Props>(
             }
         }
 
+        componentWillUnmount(): void {
+            this.requestManager.cancelAllRequests();
+        }
+
         actions: Actions;
 
         bindURL = (id: string): void => {
@@ -500,7 +557,10 @@ export function withQueryModels<Props>(
             );
 
             try {
-                const selections = await loadSelections(this.state.queryModels[id]);
+                const selections = await loadSelections(
+                    this.state.queryModels[id],
+                    this.requestManager.getRequestHandler(id, 'loadSelections')
+                );
 
                 this.setState(
                     produce<State>((draft: WritableDraft<State>) => {
@@ -511,6 +571,7 @@ export function withQueryModels<Props>(
                     })
                 );
             } catch (error) {
+                if (error?.status === 0) return;
                 this.setSelectionsError(id, error, 'loading');
             }
         };
@@ -736,7 +797,13 @@ export function withQueryModels<Props>(
             );
 
             try {
-                const result = await loadRows(this.state.queryModels[id]);
+                // If we have selectionsForReplace, then skip request cancellation optimization
+                let requestHandler: RequestHandler | undefined;
+                if (!selectionsForReplace) {
+                    requestHandler = this.requestManager.getRequestHandler(id, 'loadRows');
+                }
+
+                const result = await loadRows(this.state.queryModels[id], requestHandler);
                 const { messages, rows, orderedRows, rowCount } = result;
 
                 this.setState(
@@ -753,6 +820,7 @@ export function withQueryModels<Props>(
                     () => this.maybeLoad(id, false, false, loadSelections, false, selectionsForReplace)
                 );
             } catch (error) {
+                if (error?.status === 0) return;
                 let viewDoesNotExist = false;
                 this.setState(
                     produce<State>((draft: WritableDraft<State>) => {
@@ -845,6 +913,7 @@ export function withQueryModels<Props>(
                     loadRowsConfig.filterArray,
                     queryInfo?.getPkCols()
                 );
+
                 const { rowCount } = await selectRows({
                     ...loadRowsConfig,
                     columns,
@@ -855,6 +924,7 @@ export function withQueryModels<Props>(
                     maxRows: 1,
                     offset: 0,
                     sort: undefined,
+                    requestHandler: this.requestManager.getRequestHandler(id, 'loadTotalCount'),
                 });
 
                 this.setState(
@@ -866,6 +936,7 @@ export function withQueryModels<Props>(
                     })
                 );
             } catch (error) {
+                if (error?.status === 0) return;
                 this.setState(
                     produce<State>((draft: WritableDraft<State>) => {
                         const model = draft.queryModels[id];