How to use @wordpress/api-fetch - 10 common examples

const request = async ( options ) => {
		const requestId = ++lastApiRequestId;
		try {
			const job = await apiFetch( options );
			// Drop old responses.
			if ( lastApiRequestId > requestId ) {
				return;
			}
			setState( job );
			return job;
		} catch ( error ) {
			setState( { error: error.message } );
		}
	};

requestWidgetUpdater( instanceChanges, callback ) {
		const { identifier, instanceId, instance } = this.props;
		if ( ! identifier ) {
			return;
		}

		apiFetch( {
			path: `/wp/v2/widgets/${ identifier }/`,
			data: {
				identifier,
				instance,
				// use negative ids to make sure the id does not exist on the database.
				id_to_use: instanceId * -1,
				instance_changes: instanceChanges,
			},
			method: 'POST',
		} ).then(
			( response ) => {
				if ( this.isStillMounted ) {
					this.setState( {
						form: response.form,
						idBase: response.id_base,
						id: response.id,

getReviews( order, page = 1 ) {
		const { attributes } = this.props;
		const { perPage, productId } = attributes;
		const { reviews } = this.state;
		const orderby = order || this.state.order || attributes.orderby;

		if ( ! productId ) {
			// We've removed the selected product, or no product is selected yet.
			return;
		}

		apiFetch( {
			path: addQueryArgs( `/wc/blocks/products/reviews`, {
				order_by: orderby,
				page,
				per_page: parseInt( perPage, 10 ) || 1,
				product_id: productId,
			} ),
			parse: false,
		} ).then( ( response ) => {
			if ( response.json ) {
				response.json().then( ( newReviews ) => {
					const totalReviews = parseInt( response.headers.get( 'x-wp-total' ), 10 );
					if ( page === 1 ) {
						this.setState( { reviews: newReviews, totalReviews } );
					} else {
						this.setState( {
							reviews: reviews.filter( ( review ) => Object.keys( review ).length ).concat( newReviews ),

get_subscriber_count() {
		apiFetch( { path: '/wpcom/v2/subscribers/count' } ).then( count => {
			// Handle error condition
			if ( ! count.hasOwnProperty( 'count' ) ) {
				this.setState( {
					subscriberCountString: __( 'Subscriber count unavailable', 'jetpack' ),
				} );
			} else {
				this.setState( {
					subscriberCountString: sprintf(
						_n( 'Join %s other subscriber', 'Join %s other subscribers', count.count, 'jetpack' ),
						count.count
					),
				} );
			}
		} );
	}

this.setState({ response: null });
		}

		const { postID, attributes = null, urlQueryArgs = {} } = props;

		if (!attributes['terms']) {
			// No need to fetch related posts
			this.setState({ response: '' });
			return this.currentFetchRequest;
		}

		const path = rendererPath(postID, attributes, urlQueryArgs);

		// Store the latest fetch request so that when we process it, we can
		// check if it is the current request, to avoid race conditions on slow networks.
		const fetchRequest = this.currentFetchRequest = apiFetch({ path })
			.then((response) => {
				if (this.isStillMounted && fetchRequest === this.currentFetchRequest && response) {
					this.setState({ response: response.rendered });
				}
			})
			.catch((error) => {
				if (this.isStillMounted && fetchRequest === this.currentFetchRequest) {
					this.setState({
						response: {
							error: true,
							errorMsg: error.message,
						}
					});
				}
			});
		return fetchRequest;

// External
import React, { Component } from 'react';
import apiFetch from '@wordpress/api-fetch';
import { debounce } from '../utils/debounce';
import { pluck } from '../utils/pluck';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
import { __ } from '@wordpress/i18n';

apiFetch.use( apiFetch.createRootURLMiddleware( window.epOrdering.restApiRoot ) );

/**
 * Pointer component
 */
export class Pointers extends Component {

	titleInput = null;

	/**
	 * Initializes the component with initial state set by WP
	 *
	 * @param props
	 */
	constructor( props ) {
		super( props );

export const applyAPIMiddleware = getSiteSlug => {
	// First middleware in, last out.

	// This call intentionally breaks the middleware chain.
	apiFetch.use( wpcomProxyMiddleware );

	apiFetch.use( debugMiddleware );

	apiFetch.use( wpcomPathMappingMiddleware( getSiteSlug ) );

	//depends on wpcomPathMappingMiddleware
	apiFetch.use( apiFetch.fetchAllMiddleware );

	apiFetch.use( apiFetch.createRootURLMiddleware( 'https://public-api.wordpress.com/' ) );
};

export const applyAPIMiddleware = getSiteSlug => {
	// First middleware in, last out.

	// This call intentionally breaks the middleware chain.
	apiFetch.use( wpcomProxyMiddleware );

	apiFetch.use( debugMiddleware );

	apiFetch.use( wpcomPathMappingMiddleware( getSiteSlug ) );

	//depends on wpcomPathMappingMiddleware
	apiFetch.use( apiFetch.fetchAllMiddleware );

	apiFetch.use( apiFetch.createRootURLMiddleware( 'https://public-api.wordpress.com/' ) );
};

export const applyAPIMiddleware = getSiteSlug => {
	// First middleware in, last out.

	// This call intentionally breaks the middleware chain.
	apiFetch.use( wpcomProxyMiddleware );

	apiFetch.use( debugMiddleware );

	apiFetch.use( wpcomPathMappingMiddleware( getSiteSlug ) );

	//depends on wpcomPathMappingMiddleware
	apiFetch.use( apiFetch.fetchAllMiddleware );

	apiFetch.use( apiFetch.createRootURLMiddleware( 'https://public-api.wordpress.com/' ) );
};

export const applyAPIMiddleware = getSiteSlug => {
	// First middleware in, last out.

	// This call intentionally breaks the middleware chain.
	apiFetch.use( wpcomProxyMiddleware );

	apiFetch.use( debugMiddleware );

	apiFetch.use( wpcomPathMappingMiddleware( getSiteSlug ) );

	//depends on wpcomPathMappingMiddleware
	apiFetch.use( apiFetch.fetchAllMiddleware );

	apiFetch.use( apiFetch.createRootURLMiddleware( 'https://public-api.wordpress.com/' ) );
};