How to use the @wordpress/data-controls.apiFetch function in @wordpress/data-controls

export function* getTemplates(
	// Resolver has the same signature as corresponding selector without the initial state argument
	verticalId: Parameters< typeof import('./selectors')[ 'getTemplates' ] >[ 1 ]
) {
	const resp = yield apiFetch( {
		url: `https://public-api.wordpress.com/wpcom/v2/verticals/${ verticalId }/templates`,
	} );

	return receiveTemplates( verticalId, resp.templates );
}

export function* __internalGetDomainSuggestions(
	// Resolver has the same signature as corresponding selector without the initial state argument
	queryObject: Parameters< typeof import('./selectors').__internalGetDomainSuggestions >[ 1 ]
) {
	const url = 'https://public-api.wordpress.com/rest/v1.1/domains/suggestions';

	// If normalized search string (`query`) contains no alphanumerics, endpoint 404s
	if ( ! queryObject.query ) {
		return receiveDomainSuggestions( queryObject, [] );
	}

	// `credentials` and `mode` args are needed since we're accessing the WP.com REST API
	// (rather than the WP Core REST API)
	const suggestions = yield apiFetch( {
		credentials: 'same-origin',
		mode: 'cors',
		url: addQueryArgs( url, queryObject ),
	} );

	return receiveDomainSuggestions( queryObject, suggestions );
}

for ( const langSlug of navigator.languages ) {
			const language = getLanguage( langSlug.toLowerCase() );
			if ( language ) {
				locale = language.langSlug;
				break;
			}
		}
	}

	let localeQueryParam;
	if ( locale && locale !== 'en' ) {
		// v2 api request
		localeQueryParam = { _locale: locale };
	}

	const verticals = yield apiFetch( { url: addQueryArgs( url, localeQueryParam ) } );

	// @TODO: validate and normalize verticals?

	return receiveVerticals( verticals );
}

export function* refreshPost() {
	const post = yield select(
		STORE_KEY,
		'getCurrentPost'
	);
	const postTypeSlug = yield select(
		STORE_KEY,
		'getCurrentPostType'
	);
	const postType = yield select(
		'core',
		'getPostType',
		postTypeSlug
	);
	const newPost = yield apiFetch(
		{
			// Timestamp arg allows caller to bypass browser caching, which is
			// expected for this specific function.
			path: `/wp/v2/${ postType.rest_base }/${ post.id }` +
				`?context=edit&_timestamp=${ Date.now() }`,
		}
	);
	yield dispatch(
		STORE_KEY,
		'resetPost',
		newPost
	);
}

*fetchCourseStructure() {
		const courseId = yield select( 'core/editor' ).getCurrentPostId();
		const result = yield apiFetch( {
			path: `/sensei-internal/v1/course-structure/${ courseId }?context=edit`,
		} );
		yield actions.setStructure( result );
	},
	/**

const postType = yield select(
		'core',
		'getPostType',
		postTypeSlug
	);
	yield dispatch(
		'core/notices',
		'removeNotice',
		TRASH_POST_NOTICE_ID
	);
	try {
		const post = yield select(
			STORE_KEY,
			'getCurrentPost'
		);
		yield apiFetch(
			{
				path: `/wp/v2/${ postType.rest_base }/${ post.id }`,
				method: 'DELETE',
			}
		);

		yield dispatch(
			STORE_KEY,
			'savePost'
		);
	} catch ( error ) {
		yield dispatch(
			'core/notices',
			'createErrorNotice',
			...getNotificationArgumentsForTrashFail( { error } ),
		);

const sendRequest = function* ( options = {} ) {
	const { skipJobCheck, endpoint, jobId, ...requestOptions } = options;

	const path = [ EXPORT_REST_API, jobId, endpoint ]
		.filter( ( i ) => !! i )
		.join( '/' );

	try {
		const response = yield apiFetch( { path, ...requestOptions } );

		if (
			skipJobCheck ||
			! response ||
			! jobId ||
			jobId === response.id ||
			'active' === jobId
		) {
			return response;
		}
	} catch ( error ) {
		if (
			'active' === jobId &&
			'sensei_data_port_job_not_found' === error.code
		) {
			return yield clearJob();

currentCollection,
	data = {}
) {
	const newCollection = [ ...currentCollection ];
	const route = yield select(
		SCHEMA_STORE_KEY,
		'getRoute',
		namespace,
		resourceName
	);
	if ( ! route ) {
		return;
	}

	try {
		const item = yield apiFetch( {
			path: route,
			method: 'POST',
			data,
			cache: 'no-store',
		} );

		if ( item ) {
			newCollection.push( item );
			yield receiveCollection(
				namespace,
				resourceName,
				'',
				[],
				{
					items: newCollection,
					headers: Headers,

namespace,
	resourceName,
	currentCollection,
	data = {}
) {
	const newCollection = [ ...currentCollection ];
	const route = yield select(
		SCHEMA_STORE_KEY,
		'getRoute',
		namespace,
		resourceName
	);
	if ( ! route ) {
		return;
	}
	const item = yield apiFetch( {
		path: route,
		method: 'POST',
		data,
		cache: 'no-store',
	} );
	if ( item ) {
		newCollection.push( item );
		yield receiveCollection(
			namespace,
			resourceName,
			'',
			[],
			{
				items: newCollection,
				headers: Headers,
			},