Try: Collect async resolver calls

client/dashboard/task-list/tasks/payments/square.js

@@ -145,16 +145,14 @@ class Square extends Component {
 
 export default compose(
 	withSelect( ( select ) => {
-		const { getOptions, isGetOptionsRequesting } = select(
+		const { getOptions, isRequesting } = select(
 			OPTIONS_STORE_NAME
 		);
 		const options = getOptions( [
 			'woocommerce_square_credit_card_settings',
 		] );
 		const optionsIsRequesting = Boolean(
-			isGetOptionsRequesting( [
-				'woocommerce_square_credit_card_settings',
-			] )
+			isRequesting( 'woocommerce_square_credit_card_settings' )
 		);
 
 		return {

client/dashboard/task-list/tasks/payments/wcpay.js

@@ -127,16 +127,14 @@ class WCPay extends Component {
 
 export default compose(
 	withSelect( ( select ) => {
-		const { getOptions, isGetOptionsRequesting } = select(
+		const { getOptions, isRequesting } = select(
 			OPTIONS_STORE_NAME
 		);
 		const options = getOptions( [
 			'woocommerce_woocommerce_payments_settings',
 		] );
 		const optionsIsRequesting = Boolean(
-			isGetOptionsRequesting( [
-				'woocommerce_woocommerce_payments_settings',
-			] )
+			isRequesting( 'woocommerce_woocommerce_payments_settings' )
 		);
 
 		return {

client/homepage/index.js

@@ -3,11 +3,13 @@
  */
 import { compose } from '@wordpress/compose';
 import { Suspense, lazy } from '@wordpress/element';
+import { identity } from 'lodash';
 
 /**
  * WooCommerce dependencies
  */
 import { Spinner } from '@woocommerce/components';
+import { withOptionsHydration, OPTIONS_STORE_NAME } from '@woocommerce/data';
 
 /**
  * Internal dependencies
@@ -19,7 +21,9 @@ const ProfileWizard = lazy( () =>
 	import( /* webpackChunkName: "profile-wizard" */ '../profile-wizard' )
 );
 
-const Homepage = ( { profileItems, query } ) => {
+const Homepage = ( { profileItems, query, blogname, blogdescription } ) => {
+	console.log( blogname );
+	console.log( blogdescription );
 	if ( isOnboardingEnabled() && ! profileItems.completed ) {
 		return (
 			<Suspense fallback={ <Spinner /> }>
@@ -32,6 +36,11 @@ const Homepage = ( { profileItems, query } ) => {
 };
 
 export default compose(
+	window.wcSettings.preloadOptions
+		? withOptionsHydration( {
+				...window.wcSettings.preloadOptions,
+		  } )
+		: identity,
 	withSelect( ( select ) => {
 		if ( ! isOnboardingEnabled() ) {
 			return;
@@ -40,6 +49,19 @@ export default compose(
 		const { getProfileItems } = select( 'wc-api' );
 		const profileItems = getProfileItems();
 
-		return { profileItems };
+		const { getOption, isRequesting } = select( OPTIONS_STORE_NAME );
+		const blogname = getOption( 'blogname' );
+		const blogdescription = getOption( 'blogdescription' );
+
+		console.log(
+			'isRequesting blogname',
+			isRequesting( 'blogname' )
+		);
+		console.log(
+			'isRequesting blogdescription',
+			isRequesting( 'blogdescription' )
+		);
+
+		return { profileItems, blogname, blogdescription };
 	} )
 )( Homepage );

packages/data/src/options/actions.js

@@ -17,10 +17,10 @@ export function receiveOptions( options ) {
 	};
 }
 
-export function setIsRequesting( isRequesting ) {
+export function setIsRequesting( optionName ) {
 	return {
 		type: TYPES.SET_IS_REQUESTING,
-		isRequesting,
+		optionName
 	};
 }
 

packages/data/src/options/controls.js

@@ -0,0 +1,31 @@
+/**
+ * External dependencies
+ */
+import { controls as dataControls } from '@wordpress/data-controls';
+
+let optionNames = [];
+
+export const getOptionsToRequest = ( optionName ) => {
+	return {
+		type: 'GET_OPTIONS_TO_REQUEST',
+		optionName,
+	};
+};
+
+export const controls = {
+	...dataControls,
+	GET_OPTIONS_TO_REQUEST( { optionName } ) {
+		optionNames.push( optionName );
+
+		return new Promise( resolve => {
+			setTimeout( () => {
+				resolve( optionNames.join(',') );
+
+				// Clear option names after all resolved;
+				setTimeout( () => {
+					optionNames = [];
+				}, 1 )
+			}, 1 );
+		} );
+	},
+};

packages/data/src/options/index.js

@@ -3,7 +3,6 @@
  */
 
 import { registerStore } from '@wordpress/data';
-import { controls } from '@wordpress/data-controls';
 
 /**
  * Internal dependencies
@@ -12,6 +11,7 @@ import { STORE_NAME } from './constants';
 import * as selectors from './selectors';
 import * as actions from './actions';
 import * as resolvers from './resolvers';
+import { controls } from './controls';
 import reducer from './reducer';
 
 registerStore( STORE_NAME, {

packages/data/src/options/reducer.js

@@ -4,21 +4,31 @@
 import TYPES from './action-types';
 
 const optionsReducer = (
-	state = { isRequesting: false, isUpdating: false },
-	{ type, options, isRequesting, error, isUpdating }
+	state = { isRequesting: {}, isUpdating: false },
+	{ type, options, error, isUpdating, optionName }
 ) => {
 	switch ( type ) {
 		case TYPES.RECEIVE_OPTIONS:
+			const resolvedOptions = {};
+			Object.keys( options ).forEach( name => {
+				resolvedOptions[ name ] = false;
+			} );
 			state = {
 				...state,
 				...options,
-				isRequesting: false,
+				isRequesting: {
+					...state.isRequesting,
+					...resolvedOptions
+				},
 			};
 			break;
 		case TYPES.SET_IS_REQUESTING:
 			state = {
 				...state,
-				isRequesting,
+				isRequesting: {
+					...state.isRequesting,
+					[ optionName ]: true,
+				},
 			};
 			break;
 		case TYPES.SET_IS_UPDATING:

packages/data/src/options/resolvers.js

@@ -1,8 +1,8 @@
 /**
  * External Dependencies
  */
-
 import { apiFetch } from '@wordpress/data-controls';
+import { getOptionsToRequest } from './controls';
 
 /**
  * Internal dependencies
@@ -23,3 +23,23 @@ export function* getOptionsWithRequest( names ) {
 		return error;
 	}
 }
+
+const fetches = {};
+
+export function* getOption( name ) {
+	yield setIsRequesting( name );
+	const names = yield getOptionsToRequest( name );
+
+	const fetchInProgress = fetches[ names ];
+	if ( fetchInProgress ) {
+		return;
+	}
+
+	const url = WC_ADMIN_NAMESPACE + '/options?options=' + names;
+	fetches[ names ] = true;
+	const result = yield apiFetch( { path: url } );
+	yield receiveOptions( result );
+
+	// Delete the fetch after to allow wp data to handle cache invalidation.
+	delete fetches[ names ];
+}

packages/data/src/options/selectors.js

@@ -27,6 +27,10 @@ export const getOptions = ( state, names ) => {
 	}, {} );
 };
 
+export const getOption = ( state, name ) => {
+	return state[ name ];
+};
+
 /**
  * Get options from state tree or make a request if unresolved.
  *
@@ -44,9 +48,10 @@ export const getOptionsWithRequest = ( state, names ) => {
  * Determine if options are being requested.
  *
  * @param {Object} state - Reducer state
+ * @param {string} optionName - Option name
  */
-export const isGetOptionsRequesting = ( state ) => {
-	return state.isRequesting || false;
+export const isRequesting = ( state, optionName ) => {
+	return state.isRequesting[ optionName ] || false;
 };
 
 /**

packages/data/src/options/with-options-hydration.js

@@ -26,14 +26,16 @@ export const withOptionsHydration = ( data ) => ( OriginalComponent ) => {
 			} = registry.dispatch( STORE_NAME );
 			const names = Object.keys( dataRef.current );
 
-			if (
-				! isResolving( 'getOptionsWithRequest', names ) &&
-				! hasFinishedResolution( 'getOptionsWithRequest', names )
-			) {
-				startResolution( 'getOptionsWithRequest', names );
-				receiveOptions( dataRef.current );
-				finishResolution( 'getOptionsWithRequest', names );
-			}
+			names.forEach( ( name ) => {
+				if (
+					! isResolving( 'getOption', [ name ] ) &&
+					! hasFinishedResolution( 'getOption', [ name ] )
+				) {
+					startResolution( 'getOption', [ name ] );
+					receiveOptions( { [ name ]: dataRef.current[ name ] } );
+					finishResolution( 'getOption', [ name ] );
+				}
+			} );
 		}, [] );
 
 		return <OriginalComponent { ...props } />;