Default batch processor: Respect the batch endpoint's maxItems (#34280)

This updates the default batch processor to make multiple batch requests
if the number of requests to process exceeds the number of requests that
the batch endpoint can handle.

We determine the number of requests that the batch endpoint can handle
by making a preflight OPTIONS request to /batch/v1. By default it is 25
requests.

See https://make.wordpress.org/core/2020/11/20/rest-api-batch-framework-in-wordpress-5-6/.

packages/core-data/src/batch/default-processor.js

@@ -1,10 +1,23 @@
+/**
+ * External dependencies
+ */
+import { chunk } from 'lodash';
+
 /**
  * WordPress dependencies
  */
 import apiFetch from '@wordpress/api-fetch';
 
 /**
- * Default batch processor. Sends its input requests to /v1/batch.
+ * Maximum number of requests to place in a single batch request. Obtained by
+ * sending a preflight OPTIONS request to /batch/v1/.
+ *
+ * @type {number?}
+ */
+let maxItems = null;
+
+/**
+ * Default batch processor. Sends its input requests to /batch/v1.
  *
  * @param {Array} requests List of API requests to perform at once.
  *
@@ -13,33 +26,51 @@ import apiFetch from '@wordpress/api-fetch';
  *                   (if not ).
  */
 export default async function defaultProcessor( requests ) {
-	const batchResponse = await apiFetch( {
-		path: '/batch/v1',
-		method: 'POST',
-		data: {
-			validation: 'require-all-validate',
-			requests: requests.map( ( request ) => ( {
-				path: request.path,
-				body: request.data, // Rename 'data' to 'body'.
-				method: request.method,
-				headers: request.headers,
-			} ) ),
-		},
-	} );
-
-	if ( batchResponse.failed ) {
-		return batchResponse.responses.map( ( response ) => ( {
-			error: response?.body,
-		} ) );
+	if ( maxItems === null ) {
+		const preflightResponse = await apiFetch( {
+			path: '/batch/v1',
+			method: 'OPTIONS',
+		} );
+		maxItems = preflightResponse.endpoints[ 0 ].args.requests.maxItems;
 	}
 
-	return batchResponse.responses.map( ( response ) => {
-		const result = {};
-		if ( response.status >= 200 && response.status < 300 ) {
-			result.output = response.body;
+	const results = [];
+
+	for ( const batchRequests of chunk( requests, maxItems ) ) {
+		const batchResponse = await apiFetch( {
+			path: '/batch/v1',
+			method: 'POST',
+			data: {
+				validation: 'require-all-validate',
+				requests: batchRequests.map( ( request ) => ( {
+					path: request.path,
+					body: request.data, // Rename 'data' to 'body'.
+					method: request.method,
+					headers: request.headers,
+				} ) ),
+			},
+		} );
+
+		let batchResults;
+
+		if ( batchResponse.failed ) {
+			batchResults = batchResponse.responses.map( ( response ) => ( {
+				error: response?.body,
+			} ) );
 		} else {
-			result.error = response.body;
+			batchResults = batchResponse.responses.map( ( response ) => {
+				const result = {};
+				if ( response.status >= 200 && response.status < 300 ) {
+					result.output = response.body;
+				} else {
+					result.error = response.body;
+				}
+				return result;
+			} );
 		}
-		return result;
-	} );
+
+		results.push( ...batchResults );
+	}
+
+	return results;
 }

packages/core-data/src/batch/test/default-processor.js

@@ -11,6 +11,18 @@ import defaultProcessor from '../default-processor';
 jest.mock( '@wordpress/api-fetch' );
 
 describe( 'defaultProcessor', () => {
+	const preflightResponse = {
+		endpoints: [
+			{
+				args: {
+					requests: {
+						maxItems: 25,
+					},
+				},
+			},
+		],
+	};
+
 	const requests = [
 		{
 			path: '/v1/cricketers',
@@ -26,7 +38,12 @@ describe( 'defaultProcessor', () => {
 		},
 	];
 
-	const expectedFetchOptions = {
+	const expectedPreflightOptions = {
+		path: '/batch/v1',
+		method: 'OPTIONS',
+	};
+
+	const expectedBatchOptions = {
 		path: '/batch/v1',
 		method: 'POST',
 		data: {
@@ -49,40 +66,50 @@ describe( 'defaultProcessor', () => {
 	};
 
 	it( 'handles a successful request', async () => {
-		apiFetch.mockImplementation( async () => ( {
-			failed: false,
-			responses: [
-				{
-					status: 200,
-					body: 'Lyon',
-				},
-				{
-					status: 400,
-					body: 'Error!',
-				},
-			],
-		} ) );
+		apiFetch.mockImplementation( async ( { method } ) =>
+			method === 'OPTIONS'
+				? preflightResponse
+				: {
+						failed: false,
+						responses: [
+							{
+								status: 200,
+								body: 'Lyon',
+							},
+							{
+								status: 400,
+								body: 'Error!',
+							},
+						],
+				  }
+		);
 		const results = await defaultProcessor( requests );
-		expect( apiFetch ).toHaveBeenCalledWith( expectedFetchOptions );
+		expect( apiFetch ).toHaveBeenCalledWith( expectedPreflightOptions );
+		expect( apiFetch ).toHaveBeenCalledWith( expectedBatchOptions );
 		expect( results ).toEqual( [
 			{ output: 'Lyon' },
 			{ error: 'Error!' },
 		] );
 	} );
 
 	it( 'handles a failed request', async () => {
-		apiFetch.mockImplementation( async () => ( {
-			failed: true,
-			responses: [
-				null,
-				{
-					status: 400,
-					body: 'Error!',
-				},
-			],
-		} ) );
+		apiFetch.mockImplementation( async ( { method } ) =>
+			method === 'OPTIONS'
+				? preflightResponse
+				: {
+						failed: true,
+						responses: [
+							null,
+							{
+								status: 400,
+								body: 'Error!',
+							},
+						],
+				  }
+		);
 		const results = await defaultProcessor( requests );
-		expect( apiFetch ).toHaveBeenCalledWith( expectedFetchOptions );
+		expect( apiFetch ).toHaveBeenCalledWith( expectedPreflightOptions );
+		expect( apiFetch ).toHaveBeenCalledWith( expectedBatchOptions );
 		expect( results ).toEqual( [
 			{ error: undefined },
 			{ error: 'Error!' },