@wordpress/api-fetch 7.29.1-next.e256d081a.0 → 7.30.0

package/build-types/utils/response.d.ts

@@ -6,13 +6,13 @@
  *
  * @return Parsed response.
  */
-export declare const parseResponseAndNormalizeError: (response: Response, shouldParseResponse?: boolean) => Promise<any>;
+export declare function parseResponseAndNormalizeError(response: Response, shouldParseResponse?: boolean): Promise<any>;
 /**
  * Parses a response, throwing an error if parsing the response fails.
  *
  * @param response
  * @param shouldParseResponse
- * @return Parsed response.
+ * @return Never returns, always throws.
  */
-export declare function parseAndThrowError(response: Response, shouldParseResponse?: boolean): Promise<never>;
+export declare function parseAndThrowError(response: Response, shouldParseResponse?: boolean): Promise<void>;
 //# sourceMappingURL=response.d.ts.map

package/build-types/utils/response.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"response.d.ts","sourceRoot":"","sources":["../../src/utils/response.ts"],"names":[],"mappings":"AA+CA;;;;;;;GAOG;AACH,eAAO,MAAM,8BAA8B,aAChC,QAAQ,gDAMlB,CAAC;AAEF;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CACjC,QAAQ,EAAE,QAAQ,EAClB,mBAAmB,UAAO,kBAc1B"}
+{"version":3,"file":"response.d.ts","sourceRoot":"","sources":["../../src/utils/response.ts"],"names":[],"mappings":"AAuBA;;;;;;;GAOG;AACH,wBAAsB,8BAA8B,CACnD,QAAQ,EAAE,QAAQ,EAClB,mBAAmB,UAAO,gBAW1B;AAED;;;;;;GAMG;AACH,wBAAsB,kBAAkB,CACvC,QAAQ,EAAE,QAAQ,EAClB,mBAAmB,UAAO,iBAQ1B"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/api-fetch",
-	"version": "7.29.1-next.e256d081a.0",
+	"version": "7.30.0",
 	"description": "Utility to make WordPress REST API requests.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -30,11 +30,11 @@
 	"types": "build-types",
 	"dependencies": {
 		"@babel/runtime": "7.25.7",
-		"@wordpress/i18n": "^6.2.1-next.e256d081a.0",
-		"@wordpress/url": "^4.29.1-next.e256d081a.0"
+		"@wordpress/i18n": "^6.3.0",
+		"@wordpress/url": "^4.30.0"
 	},
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "7d529ba9a461795d5f1572d3856de33f744287c2"
+	"gitHead": "c66cb089eed19d4f4956962fa7b4c81abe6dd513"
 }

package/src/index.ts

@@ -61,21 +61,6 @@ function registerMiddleware( middleware: APIFetchMiddleware ) {
 	middlewares.unshift( middleware );
 }
 
-/**
- * Checks the status of a response, throwing the Response as an error if
- * it is outside the 200 range.
- *
- * @param response
- * @return The response if the status is in the 200 range.
- */
-const checkStatus = ( response: Response ) => {
-	if ( response.status >= 200 && response.status < 300 ) {
-		return response;
-	}
-
-	throw response;
-};
-
 const defaultFetchHandler: FetchHandler = ( nextOptions ) => {
 	const { url, path, data, parse = true, ...remainingOptions } = nextOptions;
 	let { body, headers } = nextOptions;
@@ -89,7 +74,7 @@ const defaultFetchHandler: FetchHandler = ( nextOptions ) => {
 		headers[ 'Content-Type' ] = 'application/json';
 	}
 
-	const responsePromise = window.fetch(
+	const responsePromise = globalThis.fetch(
 		// Fall back to explicitly passing `window.location` which is the behavior if `undefined` is passed.
 		url || path || window.location.href,
 		{
@@ -101,24 +86,38 @@ const defaultFetchHandler: FetchHandler = ( nextOptions ) => {
 	);
 
 	return responsePromise.then(
-		( value ) =>
-			Promise.resolve( value )
-				.then( checkStatus )
-				.catch( ( response ) => parseAndThrowError( response, parse ) )
-				.then( ( response ) =>
-					parseResponseAndNormalizeError( response, parse )
-				),
+		( response ) => {
+			// If the response is not 2xx, still parse the response body as JSON
+			// but throw the JSON as error.
+			if ( ! response.ok ) {
+				return parseAndThrowError( response, parse );
+			}
+
+			return parseResponseAndNormalizeError( response, parse );
+		},
 		( err ) => {
 			// Re-throw AbortError for the users to handle it themselves.
 			if ( err && err.name === 'AbortError' ) {
 				throw err;
 			}
 
-			// Otherwise, there is most likely no network connection.
-			// Unfortunately the message might depend on the browser.
+			// If the browser reports being offline, we'll just assume that
+			// this is why the request failed.
+			if ( ! globalThis.navigator.onLine ) {
+				throw {
+					code: 'offline_error',
+					message: __(
+						'Unable to connect. Please check your Internet connection.'
+					),
+				};
+			}
+
+			// Hard to diagnose further due to how Window.fetch reports errors.
 			throw {
 				code: 'fetch_error',
-				message: __( 'You are probably offline.' ),
+				message: __(
+					'Could not get a valid response from the server.'
+				),
 			};
 		}
 	);
@@ -177,10 +176,17 @@ const apiFetch: apiFetch = ( options ) => {
 		}
 
 		// If the nonce is invalid, refresh it and try again.
-		return window
+		return globalThis
 			.fetch( apiFetch.nonceEndpoint! )
-			.then( checkStatus )
-			.then( ( data ) => data.text() )
+			.then( ( response ) => {
+				// If the nonce refresh fails, it means we failed to recover from the original
+				// `rest_cookie_invalid_nonce` error and that it's time to finally re-throw it.
+				if ( ! response.ok ) {
+					return Promise.reject( error );
+				}
+
+				return response.text();
+			} )
 			.then( ( text ) => {
 				apiFetch.nonceMiddleware!.nonce = text;
 				return apiFetch( options );

package/src/middlewares/media-upload.ts

@@ -63,9 +63,9 @@ const mediaUploadMiddleware: APIFetchMiddleware = ( options, next ) => {
 	};
 
 	return next( { ...options, parse: false } )
-		.catch( ( response ) => {
+		.catch( ( response: Response ) => {
 			// `response` could actually be an error thrown by `defaultFetchHandler`.
-			if ( ! response.headers ) {
+			if ( ! ( response instanceof globalThis.Response ) ) {
 				return Promise.reject( response );
 			}
 
@@ -92,7 +92,7 @@ const mediaUploadMiddleware: APIFetchMiddleware = ( options, next ) => {
 			}
 			return parseAndThrowError( response, options.parse );
 		} )
-		.then( ( response ) =>
+		.then( ( response: Response ) =>
 			parseResponseAndNormalizeError( response, options.parse )
 		);
 };

package/src/test/index.js

@@ -1,56 +1,57 @@
 /**
- * Internal dependencies
- */
-import apiFetch from '../';
-
-/**
- * Mock return value for a successful fetch JSON return value.
+ * Mock response value for a successful fetch.
  *
- * @return {Promise} Mock return value.
+ * @return {Response} Mock return value.
  */
-const DEFAULT_FETCH_MOCK_RETURN = Promise.resolve( {
+const DEFAULT_FETCH_MOCK_RETURN = {
+	ok: true,
 	status: 200,
 	json: () => Promise.resolve( {} ),
-} );
+};
 
 describe( 'apiFetch', () => {
-	const originalFetch = window.fetch;
+	let apiFetch;
+	const originalFetch = globalThis.fetch;
+
+	beforeEach( async () => {
+		// Reset the `apiFetch` module before each test to clear
+		// internal variables (middlewares, fetch handler, etc.).
+		jest.resetModules();
+		apiFetch = ( await import( '../' ) ).default;
 
-	beforeEach( () => {
-		window.fetch = jest.fn();
+		globalThis.fetch = jest.fn();
 	} );
 
 	afterAll( () => {
-		window.fetch = originalFetch;
+		globalThis.fetch = originalFetch;
 	} );
 
-	it( 'should call the API properly', () => {
-		window.fetch.mockReturnValue(
-			Promise.resolve( {
-				status: 200,
-				json() {
-					return Promise.resolve( { message: 'ok' } );
-				},
-			} )
-		);
+	it( 'should call the API properly', async () => {
+		globalThis.fetch.mockResolvedValue( {
+			ok: true,
+			status: 200,
+			async json() {
+				return { message: 'ok' };
+			},
+		} );
 
-		return apiFetch( { path: '/random' } ).then( ( body ) => {
-			expect( body ).toEqual( { message: 'ok' } );
+		await expect( apiFetch( { path: '/random' } ) ).resolves.toEqual( {
+			message: 'ok',
 		} );
 	} );
 
-	it( 'should fetch with non-JSON body', () => {
-		window.fetch.mockReturnValue( DEFAULT_FETCH_MOCK_RETURN );
+	it( 'should fetch with non-JSON body', async () => {
+		globalThis.fetch.mockResolvedValue( DEFAULT_FETCH_MOCK_RETURN );
 
 		const body = 'FormData';
 
-		apiFetch( {
+		await apiFetch( {
 			path: '/wp/v2/media',
 			method: 'POST',
 			body,
 		} );
 
-		expect( window.fetch ).toHaveBeenCalledWith(
+		expect( globalThis.fetch ).toHaveBeenCalledWith(
 			'/wp/v2/media?_locale=user',
 			{
 				credentials: 'include',
@@ -63,10 +64,10 @@ describe( 'apiFetch', () => {
 		);
 	} );
 
-	it( 'should fetch with a JSON body', () => {
-		window.fetch.mockReturnValue( DEFAULT_FETCH_MOCK_RETURN );
+	it( 'should fetch with a JSON body', async () => {
+		globalThis.fetch.mockResolvedValue( DEFAULT_FETCH_MOCK_RETURN );
 
-		apiFetch( {
+		await apiFetch( {
 			path: '/wp/v2/posts',
 			method: 'POST',
 			headers: {
@@ -75,7 +76,7 @@ describe( 'apiFetch', () => {
 			data: {},
 		} );
 
-		expect( window.fetch ).toHaveBeenCalledWith(
+		expect( globalThis.fetch ).toHaveBeenCalledWith(
 			'/wp/v2/posts?_locale=user',
 			{
 				body: '{}',
@@ -89,17 +90,17 @@ describe( 'apiFetch', () => {
 		);
 	} );
 
-	it( 'should respect developer-provided options', () => {
-		window.fetch.mockReturnValue( DEFAULT_FETCH_MOCK_RETURN );
+	it( 'should respect developer-provided options', async () => {
+		globalThis.fetch.mockResolvedValue( DEFAULT_FETCH_MOCK_RETURN );
 
-		apiFetch( {
+		await apiFetch( {
 			path: '/wp/v2/posts',
 			method: 'POST',
 			data: {},
 			credentials: 'omit',
 		} );
 
-		expect( window.fetch ).toHaveBeenCalledWith(
+		expect( globalThis.fetch ).toHaveBeenCalledWith(
 			'/wp/v2/posts?_locale=user',
 			{
 				body: '{}',
@@ -113,83 +114,86 @@ describe( 'apiFetch', () => {
 		);
 	} );
 
-	it( 'should return the error message properly', () => {
-		window.fetch.mockReturnValue(
-			Promise.resolve( {
-				status: 400,
-				json() {
-					return Promise.resolve( {
-						code: 'bad_request',
-						message: 'Bad Request',
-					} );
-				},
-			} )
-		);
+	it( 'should return the error message properly', async () => {
+		globalThis.fetch.mockResolvedValue( {
+			ok: false,
+			status: 400,
+			async json() {
+				return {
+					code: 'bad_request',
+					message: 'Bad Request',
+				};
+			},
+		} );
 
-		return apiFetch( { path: '/random' } ).catch( ( body ) => {
-			// eslint-disable-next-line jest/no-conditional-expect
-			expect( body ).toEqual( {
-				code: 'bad_request',
-				message: 'Bad Request',
-			} );
+		await expect( apiFetch( { path: '/random' } ) ).rejects.toEqual( {
+			code: 'bad_request',
+			message: 'Bad Request',
 		} );
 	} );
 
-	it( 'should return invalid JSON error if no json response', () => {
-		window.fetch.mockReturnValue(
-			Promise.resolve( {
-				status: 200,
-			} )
-		);
+	it( 'should return invalid JSON error if no json response', async () => {
+		globalThis.fetch.mockResolvedValue( {
+			ok: true,
+			status: 200,
+			async json() {
+				return JSON.parse( '' );
+			},
+		} );
 
-		return apiFetch( { path: '/random' } ).catch( ( body ) => {
-			// eslint-disable-next-line jest/no-conditional-expect
-			expect( body ).toEqual( {
-				code: 'invalid_json',
-				message: 'The response is not a valid JSON response.',
-			} );
+		await expect( apiFetch( { path: '/random' } ) ).rejects.toEqual( {
+			code: 'invalid_json',
+			message: 'The response is not a valid JSON response.',
 		} );
 	} );
 
-	it( 'should return invalid JSON error if response is not valid', () => {
-		window.fetch.mockReturnValue(
-			Promise.resolve( {
-				status: 200,
-				json() {
-					return Promise.reject();
-				},
-			} )
-		);
+	it( 'should return invalid JSON error if response is not valid', async () => {
+		globalThis.fetch.mockResolvedValue( {
+			ok: true,
+			status: 200,
+			async json() {
+				return JSON.parse( '' );
+			},
+		} );
 
-		return apiFetch( { path: '/random' } ).catch( ( body ) => {
-			// eslint-disable-next-line jest/no-conditional-expect
-			expect( body ).toEqual( {
-				code: 'invalid_json',
-				message: 'The response is not a valid JSON response.',
-			} );
+		await expect( apiFetch( { path: '/random' } ) ).rejects.toEqual( {
+			code: 'invalid_json',
+			message: 'The response is not a valid JSON response.',
 		} );
 	} );
 
-	it( 'should return offline error when fetch errors', () => {
-		window.fetch.mockReturnValue( Promise.reject() );
+	it( 'should return offline error when fetch errors', async () => {
+		globalThis.fetch.mockRejectedValue(
+			new TypeError( 'Failed to fetch' )
+		);
 
-		return apiFetch( { path: '/random' } ).catch( ( body ) => {
-			// eslint-disable-next-line jest/no-conditional-expect
-			expect( body ).toEqual( {
-				code: 'fetch_error',
-				message: 'You are probably offline.',
-			} );
+		await expect( apiFetch( { path: '/random' } ) ).rejects.toEqual( {
+			code: 'fetch_error',
+			message: 'Could not get a valid response from the server.',
 		} );
 	} );
 
 	it( 'should throw AbortError when fetch aborts', async () => {
-		const abortError = new Error();
-		abortError.name = 'AbortError';
-		abortError.code = 20;
-
-		window.fetch.mockReturnValue( Promise.reject( abortError ) );
+		globalThis.fetch.mockImplementation(
+			( path, { signal } ) =>
+				new Promise( ( _, reject ) => {
+					if ( ! signal ) {
+						reject( new Error( 'Expected signal as argument' ) );
+						return;
+					}
+
+					signal.throwIfAborted();
+					signal.addEventListener(
+						'abort',
+						( e ) => {
+							reject( e.target.reason );
+						},
+						{ once: true }
+					);
+				} )
+		);
 
-		const controller = new window.AbortController();
+		const controller = new globalThis.AbortController();
 
 		const promise = apiFetch( {
 			path: '/random',
@@ -198,85 +202,149 @@ describe( 'apiFetch', () => {
 
 		controller.abort();
 
-		let error;
+		await expect( promise ).rejects.toMatchObject( {
+			name: 'AbortError',
+		} );
+	} );
+
+	it( 'should return null if response has no content status code', async () => {
+		globalThis.fetch.mockResolvedValue( {
+			ok: true,
+			status: 204,
+		} );
+
+		await expect( apiFetch( { path: '/random' } ) ).resolves.toBe( null );
+	} );
+
+	it( 'should not try to parse the response', async () => {
+		const mockResponse = {
+			ok: true,
+			status: 200,
+		};
 
-		try {
-			await promise;
-		} catch ( err ) {
-			error = err;
-		}
+		globalThis.fetch.mockResolvedValue( mockResponse );
 
-		expect( error.name ).toBe( 'AbortError' );
+		await expect(
+			apiFetch( { path: '/random', parse: false } )
+		).resolves.toBe( mockResponse );
 	} );
 
-	it( 'should return null if response has no content status code', () => {
-		window.fetch.mockReturnValue(
-			Promise.resolve( {
-				status: 204,
-			} )
-		);
+	it( 'should not try to parse the error', async () => {
+		const mockResponse = {
+			ok: false,
+			status: 400,
+		};
 
-		return apiFetch( { path: '/random' } ).catch( ( body ) => {
-			// eslint-disable-next-line jest/no-conditional-expect
-			expect( body ).toEqual( null );
-		} );
+		globalThis.fetch.mockResolvedValue( mockResponse );
+
+		await expect(
+			apiFetch( { path: '/random', parse: false } )
+		).rejects.toBe( mockResponse );
 	} );
 
-	it( 'should not try to parse the response', () => {
-		window.fetch.mockReturnValue(
-			Promise.resolve( {
-				status: 200,
-			} )
-		);
+	it( 'should refetch after successful nonce refresh', async () => {
+		apiFetch.nonceMiddleware =
+			apiFetch.createNonceMiddleware( 'old-nonce' );
+		apiFetch.use( apiFetch.nonceMiddleware );
+		apiFetch.nonceEndpoint = '/rest-nonce';
+
+		globalThis.fetch.mockImplementation( async ( path, options ) => {
+			if ( path.startsWith( '/random' ) ) {
+				if ( options?.headers[ 'X-WP-Nonce' ] === 'new-nonce' ) {
+					return {
+						ok: true,
+						status: 200,
+						json: async () => ( { code: 'success' } ),
+					};
+				}
+
+				return {
+					ok: false,
+					status: 403,
+					json: async () => ( { code: 'rest_cookie_invalid_nonce' } ),
+				};
+			}
 
-		return apiFetch( { path: '/random', parse: false } ).then(
-			( response ) => {
-				expect( response ).toEqual( {
+			if ( path.startsWith( '/rest-nonce' ) ) {
+				return {
+					ok: true,
 					status: 200,
-				} );
+					text: async () => 'new-nonce',
+				};
 			}
-		);
+
+			return {
+				ok: false,
+				status: 404,
+				json: async () => ( { code: 'rest_no_route' } ),
+			};
+		} );
+
+		await expect( apiFetch( { path: '/random' } ) ).resolves.toEqual( {
+			code: 'success',
+		} );
 	} );
 
-	it( 'should not try to parse the error', () => {
-		window.fetch.mockReturnValue(
-			Promise.resolve( {
-				status: 400,
-			} )
-		);
+	it( 'should fail with rest_cookie_invalid_nonce after failed nonce refresh', async () => {
+		apiFetch.nonceMiddleware =
+			apiFetch.createNonceMiddleware( 'old-nonce' );
+		apiFetch.use( apiFetch.nonceMiddleware );
+		apiFetch.nonceEndpoint = '/rest-nonce';
+
+		globalThis.fetch.mockImplementation( async ( path, options ) => {
+			if ( path.startsWith( '/random' ) ) {
+				if ( options?.headers[ 'X-WP-Nonce' ] === 'new-nonce' ) {
+					return {
+						ok: true,
+						status: 200,
+						json: async () => ( { code: 'success' } ),
+					};
+				}
+
+				return {
+					ok: false,
+					status: 403,
+					json: async () => ( { code: 'rest_cookie_invalid_nonce' } ),
+				};
+			}
 
-		return apiFetch( { path: '/random', parse: false } ).catch(
-			( response ) => {
-				// eslint-disable-next-line jest/no-conditional-expect
-				expect( response ).toEqual( {
+			if ( path.startsWith( '/rest-nonce' ) ) {
+				return {
+					ok: false,
 					status: 400,
-				} );
+					text: async () => '0',
+				};
 			}
-		);
+
+			return {
+				ok: false,
+				status: 404,
+				json: async () => ( { code: 'rest_no_route' } ),
+			};
+		} );
+
+		await expect( apiFetch( { path: '/random' } ) ).rejects.toEqual( {
+			code: 'rest_cookie_invalid_nonce',
+		} );
 	} );
 
-	it( 'should not use the default fetch handler when using a custom fetch handler', () => {
+	it( 'should not use the default fetch handler when using a custom fetch handler', async () => {
 		const customFetchHandler = jest.fn();
 
 		apiFetch.setFetchHandler( customFetchHandler );
 
-		apiFetch( { path: '/random' } );
+		await apiFetch( { path: '/random' } );
 
-		expect( window.fetch ).not.toHaveBeenCalled();
+		expect( globalThis.fetch ).not.toHaveBeenCalled();
 
 		expect( customFetchHandler ).toHaveBeenCalledWith( {
 			path: '/random?_locale=user',
 		} );
 	} );
 
-	it( 'should run the last-registered user-defined middleware first', () => {
-		// This could potentially impact other tests in that a lingering
-		// middleware is left. For the purposes of this test, it is sufficient
-		// to ensure that the last-registered middleware receives the original
-		// options object. It also assumes that some built-in middleware would
-		// either mutate or clone the original options if the extra middleware
-		// had been pushed to the stack.
-		expect.assertions( 1 );
+	it( 'should run the last-registered user-defined middleware first', async () => {
+		// The test assumes that some built-in middleware will either mutate or clone
+		// the original options if the extra middleware had been pushed to the stack.
 
 		const expectedOptions = {};
 
@@ -286,6 +354,9 @@ describe( 'apiFetch', () => {
 			return next( actualOptions );
 		} );
 
-		apiFetch( expectedOptions );
+		// Set a custom fetch handler to avoid using the default fetch handler.
+		apiFetch.setFetchHandler( jest.fn() );
+
+		await apiFetch( expectedOptions );
 	} );
 } );