Only print wp.apiFetch.createPreloadingMiddleware() when needed

[Aljullu]

Part of #7176 (this specific PR doesn't reduce the number of requests of the Mini Cart block, but might pave the way to do so in the future).

In some pages, we were printing a script that called wp.apiFetch.createPreloadingMiddleware() even if the array of requests to preload was empty. This PR refactors that code so that function is only called if there is something to preload.

@mikejolley I would appreciate your review as well as this PR is closely related to #5022.

Testing

User Facing Testing

This PR shouldn't produce any changes, so testing is focused on making sure there are no regressions:

1. Add the Mini Cart block to a post or page.
2. Create a post or page with the Cart block and another one with the Checkout block.
3. In the frontend, add some products to your cart and open the Mini Cart. Verify you can change the quantity of products and you can remove them.
4. Go to the Cart page and check that there are no extra fetch requests to wc/store/cart in the Network tab of your browser devtools (you can open them with F12).
5. Go to the Checkout page and make sure there is no error and you can place an order (checkout works as normal).

Testing stale data:

1. Go to the Cart page.
2. Change cart item quantities. Take note of the amounts.
3. Browse to a different page
4. Use the browser back button.
5. Confirm amounts are still correct and not stale.

Some of these steps have been copied and adapted from #5022.

• Do not include in the Testing Notes

WooCommerce Visibility

• WooCommerce Core
• Feature plugin
• Experimental

Changelog

Only call wp.apiFetch.createPreloadingMiddleware() when necessary.

[github-actions]

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-8647.zip

Script Dependencies Report

The compare-assets action has detected some changed script dependencies between this branch and trunk. Please review and confirm the following are correct before merging.

Script Handle	Added	Removed
wc-blocks.js	wp-blocks, wp-compose, wp-element, wp-hooks, wp-i18n, wp-polyfill, wp-primitives		⚠️
active-filters.js	lodash, wc-blocks-data-store, wc-price-format, wc-settings, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url		⚠️
all-products.js	lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-context, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-escape-html, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount		⚠️
all-reviews.js	lodash, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives		⚠️
attribute-filter.js	lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning		⚠️
breadcrumbs.js	wc-settings, wp-block-editor, wp-blocks, wp-components, wp-element, wp-i18n, wp-polyfill, wp-primitives		⚠️
cart.js	lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-context, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-core-data, wp-data, wp-deprecated, wp-dom, wp-editor, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-plugins, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount		⚠️
catalog-sorting.js	wp-block-editor, wp-blocks, wp-components, wp-element, wp-i18n, wp-polyfill, wp-primitives		⚠️
checkout.js	lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-core-data, wp-data, wp-deprecated, wp-dom, wp-editor, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-plugins, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount		⚠️
customer-account.js	wc-settings, wp-block-editor, wp-blocks, wp-components, wp-element, wp-i18n, wp-polyfill, wp-primitives		⚠️
featured-category.js	lodash, react, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url		⚠️
featured-product.js	lodash, react, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url		⚠️
filter-wrapper.js	wp-block-editor, wp-blocks, wp-element, wp-i18n, wp-polyfill, wp-primitives		⚠️
handpicked-products.js	lodash, react, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url		⚠️
legacy-template.js	wc-settings, wp-block-editor, wp-blocks, wp-components, wp-data, wp-element, wp-i18n, wp-polyfill, wp-primitives		⚠️
mini-cart.js	react, wc-price-format, wc-settings, wp-block-editor, wp-blocks, wp-components, wp-dom, wp-element, wp-i18n, wp-polyfill, wp-primitives		⚠️
mini-cart-contents.js	lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-price-format, wc-settings, wp-a11y, wp-autop, wp-block-editor, wp-blocks, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount		⚠️
store-notices.js	wp-block-editor, wp-blocks, wp-components, wp-element, wp-i18n, wp-polyfill, wp-primitives		⚠️
price-filter.js	lodash, react, wc-blocks-data-store, wc-price-format, wc-settings, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url		⚠️
product-best-sellers.js	lodash, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url		⚠️
product-category.js	lodash, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url		⚠️
product-categories.js	wp-block-editor, wp-blocks, wp-components, wp-element, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render		⚠️
product-new.js	lodash, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url		⚠️
product-on-sale.js	lodash, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url		⚠️
product-query.js	lodash, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-data, wp-element, wp-hooks, wp-i18n, wp-polyfill, wp-primitives, wp-url		⚠️
product-results-count.js	wp-block-editor, wp-blocks, wp-element, wp-i18n, wp-polyfill, wp-primitives		⚠️
product-search.js	wc-settings, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-i18n, wp-polyfill, wp-primitives		⚠️
product-tag.js	lodash, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url		⚠️
product-top-rated.js	lodash, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url		⚠️
products-by-attribute.js	lodash, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url		⚠️
rating-filter.js	lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning		⚠️
reviews-by-category.js	lodash, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url		⚠️
reviews-by-product.js	lodash, react, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url		⚠️
single-product.js	lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-context, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-api-fetch, wp-autop, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-escape-html, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount		⚠️
stock-filter.js	lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning		⚠️

This comment was automatically generated by the ./github/compare-assets action.

TypeScript Errors Report

• Files with errors: 486
• Total errors: 2313

🎉 🎉 This PR does not introduce new TS errors.

_{comments-aggregator}

[github-actions]

Size Change: 0 B

Total Size: 1.1 MB

ℹ️ View Unchanged

Filename	Size
build/active-filters-frontend.js	7.97 kB
build/active-filters-wrapper-frontend.js	5.98 kB
build/active-filters.js	7.31 kB
build/all-products-frontend.js	11.7 kB
build/all-products.js	36.8 kB
build/all-reviews.js	7.65 kB
build/attribute-filter-frontend.js	22.4 kB
build/attribute-filter-wrapper--stock-filter-wrapper-frontend.js	3.36 kB
build/attribute-filter-wrapper-frontend.js	4.46 kB
build/attribute-filter.js	12.4 kB
build/blocks-checkout.js	41.2 kB
build/breadcrumbs.js	2.04 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js	1.38 kB
build/cart-blocks/cart-cross-sells-frontend.js	253 B
build/cart-blocks/cart-cross-sells-products-frontend.js	9.75 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js	5.19 kB
build/cart-blocks/cart-express-payment-frontend.js	719 B
build/cart-blocks/cart-items-frontend.js	302 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js	5.36 kB
build/cart-blocks/cart-line-items-frontend.js	1.07 kB
build/cart-blocks/cart-order-summary-frontend.js	1.24 kB
build/cart-blocks/cart-totals-frontend.js	308 B
build/cart-blocks/empty-cart-frontend.js	345 B
build/cart-blocks/filled-cart-frontend.js	655 B
build/cart-blocks/order-summary-coupon-form-frontend.js	1.62 kB
build/cart-blocks/order-summary-discount-frontend.js	2.12 kB
build/cart-blocks/order-summary-fee-frontend.js	274 B
build/cart-blocks/order-summary-heading-frontend.js	455 B
build/cart-blocks/order-summary-shipping-frontend.js	14.8 kB
build/cart-blocks/order-summary-subtotal-frontend.js	275 B
build/cart-blocks/order-summary-taxes-frontend.js	434 B
build/cart-blocks/proceed-to-checkout-frontend.js	1.24 kB
build/cart-frontend.js	28.9 kB
build/cart.js	47.5 kB
build/catalog-sorting.js	1.7 kB
build/checkout-blocks/actions-frontend.js	1.85 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js	3.92 kB
build/checkout-blocks/billing-address-frontend.js	1.18 kB
build/checkout-blocks/contact-information-frontend.js	2.05 kB
build/checkout-blocks/express-payment-frontend.js	1.13 kB
build/checkout-blocks/fields-frontend.js	331 B
build/checkout-blocks/order-note-frontend.js	1.14 kB
build/checkout-blocks/order-summary-cart-items-frontend.js	3.67 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js	1.79 kB
build/checkout-blocks/order-summary-discount-frontend.js	2.29 kB
build/checkout-blocks/order-summary-fee-frontend.js	277 B
build/checkout-blocks/order-summary-frontend.js	1.24 kB
build/checkout-blocks/order-summary-shipping-frontend.js	14.9 kB
build/checkout-blocks/order-summary-subtotal-frontend.js	275 B
build/checkout-blocks/order-summary-taxes-frontend.js	435 B
build/checkout-blocks/payment-frontend.js	8.42 kB
build/checkout-blocks/pickup-options-frontend.js	2.8 kB
build/checkout-blocks/shipping-address-frontend.js	1.14 kB
build/checkout-blocks/shipping-method-frontend.js	2.28 kB
build/checkout-blocks/shipping-methods-frontend.js	4.58 kB
build/checkout-blocks/terms-frontend.js	1.56 kB
build/checkout-blocks/totals-frontend.js	310 B
build/checkout-frontend.js	30.4 kB
build/checkout.js	44.2 kB
build/customer-account.js	3.17 kB
build/featured-category.js	13.3 kB
build/featured-product.js	13.6 kB
build/filter-wrapper-frontend.js	14.1 kB
build/filter-wrapper.js	2.39 kB
build/general-style-rtl.css	1.31 kB
build/general-style.css	1.31 kB
build/handpicked-products.js	7.24 kB
build/legacy-template.js	5.28 kB
build/mini-cart-component-frontend.js	28 kB
build/mini-cart-contents-block/empty-cart-frontend.js	360 B
build/mini-cart-contents-block/filled-cart-frontend.js	268 B
build/mini-cart-contents-block/footer-frontend.js	2.86 kB
build/mini-cart-contents-block/items-frontend.js	237 B
build/mini-cart-contents-block/products-table-frontend.js	588 B
build/mini-cart-contents-block/shopping-button-frontend.js	575 B
build/mini-cart-contents-block/title-frontend.js	367 B
build/mini-cart-contents.js	16.6 kB
build/mini-cart-frontend.js	2 kB
build/mini-cart.js	4.29 kB
build/price-filter-frontend.js	13.9 kB
build/price-filter-wrapper-frontend.js	6.99 kB
build/price-filter.js	8.38 kB
build/price-format.js	1.19 kB
build/product-add-to-cart--product-button--product-category-list--product-image--product-price--product-r--a0326d00.js	253 B
build/product-add-to-cart--product-button--product-image--product-rating--product-title.js	151 B
build/product-add-to-cart-frontend.js	6.7 kB
build/product-add-to-cart.js	8.61 kB
build/product-best-sellers.js	7.6 kB
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js	500 B
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-title.js	262 B
build/product-button-frontend.js	2.22 kB
build/product-button.js	3.99 kB
build/product-categories.js	2.36 kB
build/product-category-list-frontend.js	1.19 kB
build/product-category-list.js	501 B
build/product-category.js	8.58 kB
build/product-image-frontend.js	2.23 kB
build/product-image.js	4.09 kB
build/product-new.js	7.59 kB
build/product-on-sale.js	7.91 kB
build/product-price-frontend.js	2.38 kB
build/product-price.js	1.64 kB
build/product-query.js	6.6 kB
build/product-rating-frontend.js	1.65 kB
build/product-rating.js	920 B
build/product-results-count.js	1.65 kB
build/product-sale-badge-frontend.js	1.45 kB
build/product-sale-badge.js	818 B
build/product-search.js	2.63 kB
build/product-sku-frontend.js	629 B
build/product-sku.js	376 B
build/product-stock-indicator-frontend.js	1.31 kB
build/product-stock-indicator.js	645 B
build/product-summary-frontend.js	1.58 kB
build/product-summary.js	920 B
build/product-tag-list-frontend.js	1.18 kB
build/product-tag-list.js	497 B
build/product-tag.js	8.07 kB
build/product-title-frontend.js	1.65 kB
build/product-title.js	3.46 kB
build/product-top-rated.js	7.82 kB
build/products-by-attribute.js	8.53 kB
build/rating-filter-frontend.js	20.9 kB
build/rating-filter-wrapper-frontend.js	5.61 kB
build/rating-filter.js	7.42 kB
build/reviews-by-category.js	11.2 kB
build/reviews-by-product.js	12.3 kB
build/reviews-frontend.js	7.12 kB
build/single-product-frontend.js	17.9 kB
build/single-product.js	9.97 kB
build/stock-filter-frontend.js	21.1 kB
build/stock-filter-wrapper-frontend.js	3.15 kB
build/stock-filter.js	8.14 kB
build/store-notices.js	1.69 kB
build/vendors--attribute-filter-wrapper--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary--82e4ed06-frontend.js	6.86 kB
build/vendors--attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js	7.69 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--3c5fe802-frontend.js	5.26 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary-shipping--checkout-blocks--18f9376a-frontend.js	19.4 kB
build/vendors--cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js	7.25 kB
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js	3.14 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--5b8feb0b-frontend.js	4.83 kB
build/vendors--checkout-blocks/shipping-method-frontend.js	12 kB
build/vendors--checkout-blocks/shipping-methods-frontend.js	8.84 kB
build/wc-blocks-data.js	21.5 kB
build/wc-blocks-editor-style-rtl.css	5.74 kB
build/wc-blocks-editor-style.css	5.75 kB
build/wc-blocks-google-analytics.js	1.56 kB
build/wc-blocks-middleware.js	933 B
build/wc-blocks-registry.js	3.15 kB
build/wc-blocks-shared-context.js	1.52 kB
build/wc-blocks-shared-hocs.js	1.73 kB
build/wc-blocks-style-rtl.css	26.8 kB
build/wc-blocks-style.css	26.7 kB
build/wc-blocks-vendors-style-rtl.css	1.96 kB
build/wc-blocks-vendors-style.css	1.96 kB
build/wc-blocks-vendors.js	64.4 kB
build/wc-blocks.js	2.63 kB
build/wc-payment-method-bacs.js	816 B
build/wc-payment-method-cheque.js	811 B
build/wc-payment-method-cod.js	909 B
build/wc-payment-method-paypal.js	837 B
build/wc-settings.js	2.6 kB
build/wc-shipping-method-pickup-location.js	29.7 kB
build/woo-directives-runtime.js	2.73 kB
build/woo-directives-vendors.js	7.91 kB

_{compressed-size-action}

[mikejolley]

@Aljullu not tested this, but the code change looks sound and makes sense 👍🏻

[imanish003]

I have tested the changes, and it's working as expected. LGTM 🚀