Enhancements for useApiFetchCallback.

js/src/components/google-mc-account-card/reclaim-url-card/index.js

@@ -46,14 +46,15 @@ const ReclaimUrlCard = ( { id, websiteUrl, onSwitchAccount = noop } ) => {
 			path: `/wc/gla/mc/accounts/claim-overwrite`,
 			method: 'POST',
 			data: { id },
+			parse: false,
 		} );
 	const homeUrl = getSetting( 'homeUrl' );
 	const { data: existingGoogleMCAccounts } = useExistingGoogleMCAccounts();
 	const hasExistingGoogleMCAccounts = existingGoogleMCAccounts?.length > 0;
 
 	const handleReclaimClick = async () => {
 		reset();
-		await fetchClaimOverwrite( { parse: false } );
+		await fetchClaimOverwrite();
 		invalidateResolution( 'getGoogleMCAccount', [] );
 	};
 

js/src/components/google-mc-account-card/switch-url-card/index.js

@@ -50,12 +50,13 @@ const SwitchUrlCard = ( {
 			path: `/wc/gla/mc/accounts/switch-url`,
 			method: 'POST',
 			data: { id },
+			parse: false,
 		} );
 	const homeUrl = getSetting( 'homeUrl' );
 
 	const handleSwitch = async () => {
 		try {
-			await fetchMCAccountSwitchUrl( { parse: false } );
+			await fetchMCAccountSwitchUrl();
 			invalidateResolution( 'getGoogleMCAccount', [] );
 		} catch ( e ) {
 			if ( e.status !== 403 ) {

js/src/hooks/useApiFetchCallback.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { useCallback, useReducer } from '@wordpress/element';
+import { useCallback, useMemo, useReducer } from '@wordpress/element';
 import apiFetch from '@wordpress/api-fetch';
 
 /**
@@ -85,7 +85,7 @@ const shouldReturnResponseBody = ( options ) => {
  * const handleSwitch = async () => {
  * 		// make the apiFetch call here.
  * 		// account is the response body.
- * 		// you can provide option in the function call and it will be merged with the original option.
+ * 		// you can provide `data` and `query` to override those options for this specific call.
  * 		const account = await fetchMCAccountSwitchUrl();
  *
  * 		receiveMCAccount( account );
@@ -112,29 +112,38 @@ const shouldReturnResponseBody = ( options ) => {
  * ```
  *
  * @param {import('@wordpress/api-fetch').APIFetchOptions} [options] options to be forwarded to `apiFetch`.
- * @param {defaultState} initialState overwrite default state.
+ * @param {Object} [initialState] initial state values merged with the default state `{ loading, error, data, response, options }`.
  * @return {Array} `[ apiFetchCallback, fetchResult ]`
  * 		- `apiFetchCallback` is the function to be called to trigger `apiFetch`.
  * 							You call apiFetchCallback in your event handler.
  * 		- `fetchResult` is an object containing things about the `apiFetchCallback` that you called:
  * 							`{ loading, error, data, response, options, reset }`.
  * 							`reset` is a function to reset things to initial state (clearing error, data, response and options).
  * 							You can optionally pass in a reset state and it will be merged with the initial state.
+ * 		`apiFetchCallback` accepts an optional `overwriteOptions` argument with only `data` and `query` properties.
+ * 		- `data` overrides the request body for the call.
+ * 		- `query` overrides the URL query parameters for the call.
  */
 const useApiFetchCallback = ( options, initialState = defaultState ) => {
 	const optionsRefValue = useIsEqualRefValue( options );
-	const mergedState = {
-		...defaultState,
-		...initialState,
-	};
+	const initialStateRefValue = useIsEqualRefValue( initialState );
+	const mergedState = useMemo(
+		() => ( { ...defaultState, ...initialStateRefValue } ),
+		[ initialStateRefValue ]
+	);
 	const [ state, dispatch ] = useReducer( reducer, mergedState );
 
 	const enhancedApiFetch = useCallback(
 		async ( overwriteOptions ) => {
-			const mergedOptions = {
-				...optionsRefValue,
-				...overwriteOptions,
-			};
+			const mergedOptions = { ...optionsRefValue };
+			if ( overwriteOptions ) {
+				if ( 'data' in overwriteOptions ) {
+					mergedOptions.data = overwriteOptions.data;
+				}
+				if ( 'query' in overwriteOptions ) {
+					mergedOptions.query = overwriteOptions.query;
+				}
+			}
 
 			dispatch( { type: TYPES.START, options: mergedOptions } );
 
@@ -200,12 +209,15 @@ const useApiFetchCallback = ( options, initialState = defaultState ) => {
 		[ optionsRefValue ]
 	);
 
-	const reset = ( resetState ) => {
-		dispatch( {
-			type: TYPES.RESET,
-			state: { ...mergedState, ...resetState },
-		} );
-	};
+	const reset = useCallback(
+		( resetState ) => {
+			dispatch( {
+				type: TYPES.RESET,
+				state: { ...mergedState, ...resetState },
+			} );
+		},
+		[ mergedState ]
+	);
 
 	const fetchResult = {
 		...state,

js/src/hooks/useConnectMCAccount.js

@@ -18,6 +18,7 @@ const useConnectMCAccount = ( value ) => {
 		path: `/wc/gla/mc/accounts`,
 		method: 'POST',
 		data: { id: value },
+		parse: false,
 	} );
 	const {
 		invalidateResolution,
@@ -34,7 +35,7 @@ const useConnectMCAccount = ( value ) => {
 			clearDetailedErrorBySlots( [
 				ERROR_SLOTS.GOOGLE_MC_CONNECTION_ERROR_SLOT,
 			] );
-			await fetchMCAccounts( { parse: false } );
+			await fetchMCAccounts();
 			invalidateResolution( 'getGoogleMCAccount', [] );
 		} catch ( e ) {
 			if ( e?.code === 'fetch_error' ) {

js/src/hooks/useCreateMCAccount.js

@@ -18,13 +18,13 @@ const useCreateMCAccount = () => {
 	const [ fetchCreateMCAccount, result ] = useApiFetchCallback( {
 		path: `/wc/gla/mc/accounts`,
 		method: 'POST',
+		parse: false,
 	} );
 
 	const handleCreateAccount = async () => {
 		try {
 			await fetchCreateMCAccount( {
 				data: result.error?.id && { id: result.error.id },
-				parse: false,
 			} );
 			invalidateResolution( 'getGoogleMCAccount', [] );
 		} catch ( e ) {

js/src/hooks/useUpsertAdsAccount.js

@@ -41,13 +41,14 @@ const useUpsertAdsAccount = () => {
 		data: {
 			id: googleAdsAccount?.id || undefined,
 		},
+		parse: false,
 	} );
 
 	const upsertAdsAccount = useCallback( async () => {
 		setCurrentAction( isCreation ? 'create' : 'update' );
 
 		try {
-			await fetchCreateAccount( { parse: false } );
+			await fetchCreateAccount();
 		} catch ( e ) {
 			// For status code 428, we want to allow users to continue and proceed,
 			// so we swallow the error for status code 428,