Remove hydration hocs in favour of apiFetch Middlewares (woocommerce#…

…5022)

* Remove withRestApiHydration

* Preload checkout data via setting - server data is required for this block

* Handle cart hydration using createPreloadingMiddleware which removes the need for HOCs

* Rename variable

* Remove withStoreCartApiHydration and timestamp checking

* Empty test file

assets/js/base/context/providers/cart-checkout/checkout-state/constants.ts

@@ -26,15 +26,15 @@ export enum STATUS {
 	AFTER_PROCESSING = 'after_processing',
 }
 
-const preloadedApiRequests = getSetting( 'preloadedApiRequests', {} ) as Record<
+const preloadedCheckoutData = getSetting( 'checkoutData', {} ) as Record<
 	string,
-	{ body: Record< string, unknown > }
+	unknown
 >;
 
 const checkoutData = {
 	order_id: 0,
 	customer_id: 0,
-	...( preloadedApiRequests[ '/wc/store/checkout' ]?.body || {} ),
+	...( preloadedCheckoutData || {} ),
 };
 
 export const DEFAULT_CHECKOUT_STATE_DATA: CheckoutStateContextType = {

assets/js/blocks/active-filters/frontend.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { withRestApiHydration } from '@woocommerce/block-hocs';
 import { renderFrontend } from '@woocommerce/base-utils';
 
 /**
@@ -21,6 +20,6 @@ const getProps = ( el ) => {
 
 renderFrontend( {
 	selector: '.wp-block-woocommerce-active-filters',
-	Block: withRestApiHydration( Block ),
+	Block,
 	getProps,
 } );

assets/js/blocks/attribute-filter/frontend.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { withRestApiHydration } from '@woocommerce/block-hocs';
 import { renderFrontend } from '@woocommerce/base-utils';
 
 /**
@@ -25,6 +24,6 @@ const getProps = ( el ) => {
 
 renderFrontend( {
 	selector: '.wp-block-woocommerce-attribute-filter',
-	Block: withRestApiHydration( Block ),
+	Block,
 	getProps,
 } );

assets/js/blocks/cart-checkout/cart/frontend.js

@@ -1,10 +1,6 @@
 /**
  * External dependencies
  */
-import {
-	withStoreCartApiHydration,
-	withRestApiHydration,
-} from '@woocommerce/block-hocs';
 import { getValidBlockAttributes } from '@woocommerce/base-utils';
 import { Children, cloneElement, isValidElement } from '@wordpress/element';
 import { useStoreCart } from '@woocommerce/base-context';
@@ -45,7 +41,7 @@ const Wrapper = ( { children } ) => {
 };
 
 renderParentBlock( {
-	Block: withStoreCartApiHydration( withRestApiHydration( Block ) ),
+	Block,
 	blockName,
 	selector: '.wp-block-woocommerce-cart',
 	getProps,

assets/js/blocks/cart-checkout/checkout/checkout-order-error/index.js

@@ -27,6 +27,8 @@ const cartItemErrorCodes = [
 	GENERIC_CART_ITEM_ERROR,
 ];
 
+const preloadedCheckoutData = getSetting( 'checkoutData', {} );
+
 /**
  * When an order was not created for the checkout, for example, when an item
  * was out of stock, this component will be shown instead of the checkout form.
@@ -35,11 +37,10 @@ const cartItemErrorCodes = [
  * checkout block.
  */
 const CheckoutOrderError = () => {
-	const preloadedApiRequests = getSetting( 'preloadedApiRequests', {} );
 	const checkoutData = {
 		code: '',
 		message: '',
-		...( preloadedApiRequests[ '/wc/store/checkout' ]?.body || {} ),
+		...( preloadedCheckoutData || {} ),
 	};
 
 	const errorData = {

assets/js/blocks/cart-checkout/checkout/frontend.tsx

@@ -9,10 +9,6 @@ import {
 	useValidation,
 } from '@woocommerce/base-context/hooks';
 import { getRegisteredBlockComponents } from '@woocommerce/blocks-registry';
-import {
-	withStoreCartApiHydration,
-	withRestApiHydration,
-} from '@woocommerce/block-hocs';
 import { renderParentBlock } from '@woocommerce/atomic-utils';
 
 /**
@@ -57,7 +53,7 @@ const Wrapper = ( {
 };
 
 renderParentBlock( {
-	Block: withStoreCartApiHydration( withRestApiHydration( Block ) ),
+	Block,
 	blockName,
 	selector: '.wp-block-woocommerce-checkout',
 	getProps,

assets/js/blocks/cart-checkout/mini-cart/component-frontend.tsx

@@ -6,7 +6,6 @@ import { renderFrontend } from '@woocommerce/base-utils';
 /**
  * Internal dependencies
  */
-import withMiniCartConditionalHydration from './with-mini-cart-conditional-hydration';
 import MiniCartBlock from './block';
 import './style.scss';
 
@@ -28,7 +27,7 @@ const renderMiniCartFrontend = () => {
 
 	renderFrontend( {
 		selector: '.wc-block-mini-cart',
-		Block: withMiniCartConditionalHydration( MiniCartBlock ),
+		Block: MiniCartBlock,
 		getProps: ( el: HTMLElement ) => ( {
 			isDataOutdated: el.dataset.isDataOutdated,
 			isInitiallyOpen: el.dataset.isInitiallyOpen === 'true',

assets/js/blocks/price-filter/frontend.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { withRestApiHydration } from '@woocommerce/block-hocs';
 import { renderFrontend } from '@woocommerce/base-utils';
 
 /**
@@ -20,6 +19,6 @@ const getProps = ( el ) => {
 
 renderFrontend( {
 	selector: '.wp-block-woocommerce-price-filter',
-	Block: withRestApiHydration( Block ),
+	Block,
 	getProps,
 } );

assets/js/blocks/products/all-products/frontend.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { withRestApiHydration } from '@woocommerce/block-hocs';
 import { StoreNoticesProvider } from '@woocommerce/base-context';
 import { renderFrontend } from '@woocommerce/base-utils';
 
@@ -29,6 +28,6 @@ const getProps = ( el ) => ( {
 
 renderFrontend( {
 	selector: '.wp-block-woocommerce-all-products',
-	Block: withRestApiHydration( AllProductsFrontend ),
+	Block: AllProductsFrontend,
 	getProps,
 } );

assets/js/blocks/stock-filter/frontend.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { withRestApiHydration } from '@woocommerce/block-hocs';
 import { renderFrontend } from '@woocommerce/base-utils';
 
 /**
@@ -22,6 +21,6 @@ const getProps = ( el ) => {
 
 renderFrontend( {
 	selector: '.wp-block-woocommerce-stock-filter',
-	Block: withRestApiHydration( Block ),
+	Block,
 	getProps,
 } );

assets/js/data/cart/constants.ts

@@ -14,4 +14,3 @@ export const CART_API_ERROR = {
 		status: 500,
 	},
 };
-export const LAST_CART_UPDATE_TIMESTAMP_KEY = 'wc-blocks_cart_update_timestamp';

assets/js/hocs/index.js

@@ -5,5 +5,3 @@ export { default as withProduct } from './with-product';
 export { default as withProductVariations } from './with-product-variations';
 export { default as withSearchedProducts } from './with-searched-products';
 export { default as withTransformSingleSelectToMultipleSelect } from './with-transform-single-select-to-multiple-select';
-export { default as withStoreCartApiHydration } from './with-store-cart-api-hydration';
-export { default as withRestApiHydration } from './with-rest-api-hydration';