API Fetch: Expose nonce on created middleware function (#13451)

lib/client-assets.php

@@ -185,10 +185,31 @@ function gutenberg_register_scripts_and_styles() {
 	gutenberg_register_packages_scripts();
 
 	// Inline scripts.
+	global $wp_scripts;
+	if ( isset( $wp_scripts->registered['wp-api-fetch'] ) ) {
+		$wp_scripts->registered['wp-api-fetch']->deps[] = 'wp-hooks';
+	}
 	wp_add_inline_script(
 		'wp-api-fetch',
 		sprintf(
-			'wp.apiFetch.use( wp.apiFetch.createNonceMiddleware( "%s" ) );',
+			implode(
+				"\n",
+				array(
+					'( function() {',
+					'	var nonceMiddleware = wp.apiFetch.createNonceMiddleware( "%s" );',
+					'	wp.apiFetch.use( nonceMiddleware );',
+					'	wp.hooks.addAction(',
+					'		"heartbeat.tick",',
+					'		"core/api-fetch/create-nonce-middleware",',
+					'		function( response ) {',
+					'			if ( response[ "rest_nonce" ] ) {',
+					'				nonceMiddleware.nonce = response[ "rest_nonce" ];',
+					'			}',
+					'		}',
+					'	)',
+					'} )()',
+				)
+			),
 			( wp_installing() && ! is_multisite() ) ? '' : wp_create_nonce( 'wp_rest' )
 		),
 		'after'

lib/packages-dependencies.php

@@ -16,7 +16,6 @@
 		'wp-rich-text',
 	),
 	'wp-api-fetch'                          => array(
-		'wp-hooks',
 		'wp-i18n',
 		'wp-url',
 	),

packages/api-fetch/CHANGELOG.md

@@ -1,7 +1,12 @@
-## 2.3.0 (Unreleased)
+## 3.0.0 (Unreleased)
+
+### Breaking Changes
+
+- A created nonce middleware will no longer automatically listen for `heartbeat.tick` actions. Assign to the new `nonce` middleware property instead.
 
 ### New Feature
 
+- The function returned by `createNonceMiddleware` includes an assignable `nonce` property corresponding to the active nonce to be used.
 - Default fetch handler can be overridden with a custom fetch handler
 
 ## 2.2.6 (2018-12-12)

packages/api-fetch/README.md

@@ -76,6 +76,8 @@ const nonce = "nonce value";
 apiFetch.use( apiFetch.createNonceMiddleware( nonce ) );
 ```
 
+The function returned by `createNonceMiddleware` includes a `nonce` property corresponding to the actively used nonce. You may also assign to this property if you have a fresh nonce value to use.
+
 **Root URL middleware**
 
 ```js

packages/api-fetch/package.json

@@ -22,7 +22,6 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.0.0",
-		"@wordpress/hooks": "file:../hooks",
 		"@wordpress/i18n": "file:../i18n",
 		"@wordpress/url": "file:../url"
 	},

packages/api-fetch/src/middlewares/nonce.js

@@ -1,50 +1,27 @@
-/**
- * External dependencies
- */
-import { addAction } from '@wordpress/hooks';
+function createNonceMiddleware( nonce ) {
+	function middleware( options, next ) {
+		const { headers = {} } = options;
 
-const createNonceMiddleware = ( nonce ) => {
-	let usedNonce = nonce;
-
-	/**
-	 * This is not ideal but it's fine for now.
-	 *
-	 * Configure heartbeat to refresh the wp-api nonce, keeping the editor
-	 * authorization intact.
-	 */
-	addAction( 'heartbeat.tick', 'core/api-fetch/create-nonce-middleware', ( response ) => {
-		if ( response[ 'rest-nonce' ] ) {
-			usedNonce = response[ 'rest-nonce' ];
-		}
-	} );
-
-	return function( options, next ) {
-		let headers = options.headers || {};
 		// If an 'X-WP-Nonce' header (or any case-insensitive variation
 		// thereof) was specified, no need to add a nonce header.
-		let addNonceHeader = true;
 		for ( const headerName in headers ) {
-			if ( headers.hasOwnProperty( headerName ) ) {
-				if ( headerName.toLowerCase() === 'x-wp-nonce' ) {
-					addNonceHeader = false;
-					break;
-				}
+			if ( headerName.toLowerCase() === 'x-wp-nonce' ) {
+				return next( options );
 			}
 		}
 
-		if ( addNonceHeader ) {
-			// Do not mutate the original headers object, if any.
-			headers = {
-				...headers,
-				'X-WP-Nonce': usedNonce,
-			};
-		}
-
 		return next( {
 			...options,
-			headers,
+			headers: {
+				...headers,
+				'X-WP-Nonce': middleware.nonce,
+			},
 		} );
-	};
-};
+	}
+
+	middleware.nonce = nonce;
+
+	return middleware;
+}
 
 export default createNonceMiddleware;

packages/api-fetch/src/middlewares/test/nonce.js

@@ -31,6 +31,7 @@ describe( 'Nonce middleware', () => {
 			headers: { 'X-WP-Nonce': 'existing nonce' },
 		};
 		const callback = ( options ) => {
+			expect( options ).toBe( requestOptions );
 			expect( options.headers[ 'X-WP-Nonce' ] ).toBe( 'existing nonce' );
 		};