Add a new @wordpress/api-request package (#7018)

* Add a wordpress/api-request package * Add the middlewares API * Fix unit tests * Adding unit tests * Adding internal dependencies comment * Improve unit tests * Restore wpApiSettings global for wp-api * Lint package.json * Align jQuery versions
WordPress · Jun 8, 2018 · 8ec748a · 8ec748a
1 parent a60b0f2
commit 8ec748a
Show file tree

Hide file tree

Showing 34 changed files with 580 additions and 197 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -38,6 +38,10 @@ module.exports = {
 				selector: 'ImportDeclaration[source.value=/^@wordpress\\u002F.+\\u002F/]',
 				message: 'Path access on WordPress dependencies is not allowed.',
 			},
+			{
+				selector: 'ImportDeclaration[source.value=/^api-request$/]',
+				message: 'Use @wordpress/api-request as import path instead.',
+			},
 			{
 				selector: 'ImportDeclaration[source.value=/^blob$/]',
 				message: 'Use @wordpress/blob as import path instead.',

diff --git a/components/higher-order/with-api-data/request.js b/components/higher-order/with-api-data/request.js
@@ -4,6 +4,11 @@
 import memoize from 'memize';
 import { mapKeys } from 'lodash';
 
+/**
+ * WordPress dependencies
+ */
+import apiRequest from '@wordpress/api-request';
+
 export const getStablePath = memoize( ( path ) => {
 	const [ base, query ] = path.split( '?' );
 	if ( ! query ) {
@@ -75,7 +80,7 @@ export function getCachedResponse( request ) {
 }
 
 export function getResponseFromNetwork( request ) {
-	const promise = wp.apiRequest( request )
+	const promise = apiRequest( request )
 		.then( ( body, status, xhr ) => {
 			return {
 				body,

diff --git a/components/higher-order/with-api-data/test/request.js b/components/higher-order/with-api-data/test/request.js
@@ -1,3 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import apiRequest from '@wordpress/api-request';
+
 /**
  * Internal dependencies
  */
@@ -25,15 +30,13 @@ describe( 'request', () => {
 		),
 	};
 
-	let wpApiRequest;
 	beforeEach( () => {
 		getStablePath.clear();
 		for ( const key in cache ) {
 			delete cache[ key ];
 		}
 
-		wpApiRequest = wp.apiRequest;
-		wp.apiRequest = jest.fn( () => ( {
+		apiRequest.mockReturnValue = {
 			// jQuery.Deferred aren't true promises, particularly in their
 			// treatment of resolved arguments. $.ajax will spread resolved
 			// arguments, but this is not valid for Promise (only single).
@@ -43,11 +46,7 @@ describe( 'request', () => {
 				'success',
 				xhr
 			) ),
-		} ) );
-	} );
-
-	afterEach( () => {
-		wp.apiRequest = wpApiRequest;
+		};
 	} );
 
 	describe( 'getResponseHeaders()', () => {
@@ -97,7 +96,7 @@ describe( 'request', () => {
 			} );
 
 			return awaitResponse.then( ( data ) => {
-				expect( wp.apiRequest ).toHaveBeenCalled();
+				expect( apiRequest ).toHaveBeenCalled();
 				expect( data ).toEqual( actualResponse );
 			} );
 		} );
@@ -129,6 +128,10 @@ describe( 'request', () => {
 	} );
 
 	describe( 'request()', () => {
+		beforeEach( () => {
+			apiRequest.mockClear();
+		} );
+
 		it( 'should try from cache for GET', () => {
 			cache[ getStablePath( '/wp?c=5&a=5&b=5' ) ] = actualResponse;
 			const awaitResponse = request( {
@@ -137,7 +140,7 @@ describe( 'request', () => {
 			} );
 
 			return awaitResponse.then( ( data ) => {
-				expect( wp.apiRequest ).not.toHaveBeenCalled();
+				expect( apiRequest ).not.toHaveBeenCalled();
 				expect( data ).toEqual( actualResponse );
 			} );
 		} );
@@ -150,7 +153,7 @@ describe( 'request', () => {
 			} );
 
 			return awaitResponse.then( ( data ) => {
-				expect( wp.apiRequest ).toHaveBeenCalled();
+				expect( apiRequest ).toHaveBeenCalled();
 				expect( data ).toEqual( actualResponse );
 			} );
 		} );
@@ -162,7 +165,7 @@ describe( 'request', () => {
 			} );
 
 			return awaitResponse.then( ( data ) => {
-				expect( wp.apiRequest ).toHaveBeenCalled();
+				expect( apiRequest ).toHaveBeenCalled();
 				expect( data ).toEqual( actualResponse );
 			} );
 		} );

diff --git a/core-blocks/embed/index.js b/core-blocks/embed/index.js
@@ -19,6 +19,7 @@ import {
 	BlockAlignmentToolbar,
 	RichText,
 } from '@wordpress/editor';
+import apiRequest from '@wordpress/api-request';
 
 /**
  * Internal dependencies
@@ -30,7 +31,7 @@ import './editor.scss';
 const HOSTS_NO_PREVIEWS = [ 'facebook.com' ];
 
 // Caches the embed API calls, so if blocks get transformed, or deleted and added again, we don't spam the API.
-const wpEmbedAPI = memoize( ( url ) => wp.apiRequest( { path: `/oembed/1.0/proxy?${ stringify( { url } ) }` } ) );
+const wpEmbedAPI = memoize( ( url ) => apiRequest( { path: `/oembed/1.0/proxy?${ stringify( { url } ) }` } ) );
 
 const matchesPatterns = ( url, patterns = [] ) => {
 	return patterns.some( ( pattern ) => {

diff --git a/edit-post/index.js b/edit-post/index.js
@@ -14,16 +14,6 @@ import store from './store';
 import { initializeMetaBoxState } from './store/actions';
 import Editor from './editor';
 
-/**
- * Configure heartbeat to refresh the wp-api nonce, keeping the editor
- * authorization intact.
- */
-window.jQuery( document ).on( 'heartbeat-tick', ( event, response ) => {
-	if ( response[ 'rest-nonce' ] ) {
-		window.wpApiSettings.nonce = response[ 'rest-nonce' ];
-	}
-} );
-
 /**
  * Reinitializes the editor after the user chooses to reboot the editor after
  * an unhandled error occurs, replacing previously mounted editor element using

diff --git a/edit-post/store/effects.js b/edit-post/store/effects.js
@@ -9,6 +9,7 @@ import { reduce, some } from 'lodash';
 import { select, subscribe } from '@wordpress/data';
 import { speak } from '@wordpress/a11y';
 import { __ } from '@wordpress/i18n';
+import apiRequest from '@wordpress/api-request';
 
 /**
  * Internal dependencies
@@ -98,7 +99,7 @@ const effects = {
 		additionalData.forEach( ( [ key, value ] ) => formData.append( key, value ) );
 
 		// Save the metaboxes
-		wp.apiRequest( {
+		apiRequest( {
 			url: window._wpMetaBoxUrl,
 			method: 'POST',
 			processData: false,

diff --git a/editor/components/autocompleters/user.js b/editor/components/autocompleters/user.js
@@ -1,3 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import apiRequest from '@wordpress/api-request';
+
 /**
 * A user mentions completer.
 *
@@ -12,7 +17,7 @@ export default {
 		if ( search ) {
 			payload = '?search=' + encodeURIComponent( search );
 		}
-		return wp.apiRequest( { path: '/wp/v2/users' + payload } );
+		return apiRequest( { path: '/wp/v2/users' + payload } );
 	},
 	isDebounced: true,
 	getOptionKeywords( user ) {

diff --git a/editor/components/post-taxonomies/flat-term-selector.js b/editor/components/post-taxonomies/flat-term-selector.js
@@ -11,6 +11,7 @@ import { __, _x, sprintf } from '@wordpress/i18n';
 import { Component, compose } from '@wordpress/element';
 import { FormTokenField, withAPIData } from '@wordpress/components';
 import { withSelect, withDispatch } from '@wordpress/data';
+import apiRequest from '@wordpress/api-request';
 
 /**
  * Module constants
@@ -75,7 +76,7 @@ class FlatTermSelector extends Component {
 	fetchTerms( params = {} ) {
 		const query = { ...DEFAULT_QUERY, ...params };
 		const basePath = wp.api.getTaxonomyRoute( this.props.slug );
-		const request = wp.apiRequest( { path: `/wp/v2/${ basePath }?${ stringify( query ) }` } );
+		const request = apiRequest( { path: `/wp/v2/${ basePath }?${ stringify( query ) }` } );
 		request.then( ( terms ) => {
 			this.setState( ( state ) => ( {
 				availableTerms: state.availableTerms.concat(
@@ -106,15 +107,15 @@ class FlatTermSelector extends Component {
 		return new Promise( ( resolve, reject ) => {
 			// Tries to create a term or fetch it if it already exists
 			const basePath = wp.api.getTaxonomyRoute( this.props.slug );
-			wp.apiRequest( {
+			apiRequest( {
 				path: `/wp/v2/${ basePath }`,
 				method: 'POST',
 				data: { name: termName },
 			} ).then( resolve, ( xhr ) => {
 				const errorCode = xhr.responseJSON && xhr.responseJSON.code;
 				if ( errorCode === 'term_exists' ) {
 					// search the new category created since last fetch
-					this.addRequest = wp.apiRequest( {
+					this.addRequest = apiRequest( {
 						path: `/wp/v2/${ basePath }?${ stringify( { ...DEFAULT_QUERY, search: termName } ) }`,
 					} );
 					return this.addRequest.then( ( searchResult ) => {

diff --git a/editor/components/post-taxonomies/hierarchical-term-selector.js b/editor/components/post-taxonomies/hierarchical-term-selector.js
@@ -12,6 +12,7 @@ import { Component, compose } from '@wordpress/element';
 import { TreeSelect, withAPIData, withInstanceId, withSpokenMessages, Button } from '@wordpress/components';
 import { buildTermsTree } from '@wordpress/utils';
 import { withSelect, withDispatch } from '@wordpress/data';
+import apiRequest from '@wordpress/api-request';
 
 /**
  * Module Constants
@@ -103,7 +104,7 @@ class HierarchicalTermSelector extends Component {
 			} );
 			// Tries to create a term or fetch it if it already exists
 			const basePath = wp.api.getTaxonomyRoute( this.props.slug );
-			this.addRequest = wp.apiRequest( {
+			this.addRequest = apiRequest( {
 				path: `/wp/v2/${ basePath }`,
 				method: 'POST',
 				data: {
@@ -116,7 +117,7 @@ class HierarchicalTermSelector extends Component {
 					const errorCode = xhr.responseJSON && xhr.responseJSON.code;
 					if ( errorCode === 'term_exists' ) {
 						// search the new category created since last fetch
-						this.addRequest = wp.apiRequest( {
+						this.addRequest = apiRequest( {
 							path: `/wp/v2/${ basePath }?${ stringify( { ...DEFAULT_QUERY, parent: formParent || 0, search: formName } ) }`,
 						} );
 						return this.addRequest.then( ( searchResult ) => {
@@ -161,7 +162,7 @@ class HierarchicalTermSelector extends Component {
 
 	componentDidMount() {
 		const basePath = wp.api.getTaxonomyRoute( this.props.slug );
-		this.fetchRequest = wp.apiRequest( { path: `/wp/v2/${ basePath }?${ stringify( DEFAULT_QUERY ) }` } );
+		this.fetchRequest = apiRequest( { path: `/wp/v2/${ basePath }?${ stringify( DEFAULT_QUERY ) }` } );
 		this.fetchRequest.then(
 			( terms ) => { // resolve
 				const availableTermsTree = buildTermsTree( terms );

diff --git a/editor/components/url-input/index.js b/editor/components/url-input/index.js
@@ -13,6 +13,7 @@ import { __, sprintf, _n } from '@wordpress/i18n';
 import { Component, Fragment } from '@wordpress/element';
 import { keycodes, decodeEntities } from '@wordpress/utils';
 import { Spinner, withInstanceId, withSpokenMessages, Popover } from '@wordpress/components';
+import apiRequest from '@wordpress/api-request';
 
 const { UP, DOWN, ENTER } = keycodes;
 
@@ -68,7 +69,7 @@ class UrlInput extends Component {
 			selectedSuggestion: null,
 			loading: true,
 		} );
-		this.suggestionsRequest = wp.apiRequest( {
+		this.suggestionsRequest = apiRequest( {
 			path: `/wp/v2/posts?${ stringify( {
 				search: value,
 				per_page: 20,

diff --git a/editor/store/effects.js b/editor/store/effects.js
@@ -20,6 +20,7 @@ import {
 } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
 import { speak } from '@wordpress/a11y';
+import apiRequest from '@wordpress/api-request';
 
 /**
  * Internal dependencies
@@ -130,7 +131,7 @@ export default {
 				parent: post.id,
 			};
 
-			request = wp.apiRequest( {
+			request = apiRequest( {
 				path: `/wp/v2/${ basePath }/${ post.id }/autosaves`,
 				method: 'POST',
 				data: toSend,
@@ -145,7 +146,7 @@ export default {
 			dispatch( removeNotice( SAVE_POST_NOTICE_ID ) );
 			dispatch( removeNotice( AUTOSAVE_POST_NOTICE_ID ) );
 
-			request = wp.apiRequest( {
+			request = apiRequest( {
 				path: `/wp/v2/${ basePath }/${ post.id }`,
 				method: 'PUT',
 				data: toSend,
@@ -251,7 +252,7 @@ export default {
 		const { postId } = action;
 		const basePath = wp.api.getPostTypeRoute( getCurrentPostType( getState() ) );
 		dispatch( removeNotice( TRASH_POST_NOTICE_ID ) );
-		wp.apiRequest( { path: `/wp/v2/${ basePath }/${ postId }`, method: 'DELETE' } ).then(
+		apiRequest( { path: `/wp/v2/${ basePath }/${ postId }`, method: 'DELETE' } ).then(
 			() => {
 				dispatch( {
 					...action,
@@ -294,7 +295,7 @@ export default {
 			context: 'edit',
 		};
 
-		wp.apiRequest( { path: `/wp/v2/${ basePath }/${ post.id }`, data } ).then(
+		apiRequest( { path: `/wp/v2/${ basePath }/${ post.id }`, data } ).then(
 			( newPost ) => {
 				dispatch( resetPost( newPost ) );
 			}
@@ -439,9 +440,9 @@ export default {
 
 		let result;
 		if ( id ) {
-			result = wp.apiRequest( { path: `/wp/v2/${ basePath }/${ id }` } );
+			result = apiRequest( { path: `/wp/v2/${ basePath }/${ id }` } );
 		} else {
-			result = wp.apiRequest( { path: `/wp/v2/${ basePath }?per_page=-1` } );
+			result = apiRequest( { path: `/wp/v2/${ basePath }?per_page=-1` } );
 		}
 
 		result.then(
@@ -494,7 +495,7 @@ export default {
 		const path = isTemporary ? `/wp/v2/${ basePath }` : `/wp/v2/${ basePath }/${ id }`;
 		const method = isTemporary ? 'POST' : 'PUT';
 
-		wp.apiRequest( { path, data, method } ).then(
+		apiRequest( { path, data, method } ).then(
 			( updatedSharedBlock ) => {
 				dispatch( {
 					type: 'SAVE_SHARED_BLOCK_SUCCESS',
@@ -550,7 +551,7 @@ export default {
 			sharedBlock.uid,
 		] ) );
 
-		wp.apiRequest( { path: `/wp/v2/${ basePath }/${ id }`, method: 'DELETE' } ).then(
+		apiRequest( { path: `/wp/v2/${ basePath }/${ id }`, method: 'DELETE' } ).then(
 			() => {
 				dispatch( {
 					type: 'DELETE_SHARED_BLOCK_SUCCESS',