How to use the @wordpress/api-fetch.createRootURLMiddleware function in @wordpress/api-fetch

// 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/' ) );
};

// 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 );

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

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

export class Pointers extends Component {
	titleInput = null;

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

		// We need to know the title of the page and react to changes since this is the query we search for
		this.titleInput = document.getElementById('title');

		this.state = {

import apiFetch from '@wordpress/api-fetch';

// Middleware
apiFetch.use(apiFetch.createNonceMiddleware(window.wpApiSettings.nonce));
apiFetch.use(apiFetch.createRootURLMiddleware(window.wpApiSettings.root));

applyAPIMiddleware = siteSlug => {
		// First middleware in, last out.

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

		apiFetch.use( ( options, next ) => debugMiddleware( options, next ) );

		apiFetch.use( ( options, next ) => wpcomPathMappingMiddleware( options, next, siteSlug ) );

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

		this.setState( { hasMiddleware: true } );
	};

apiFetch({ path: '/wp/v2/posts' }).then(posts =>
        posts.map(({ date, title }) => `Post "${title.rendered}" at ${date}`)
    );
    const response = await apiFetch({ parse: false });
    if (response.ok) {
        console.log(await response.json());
    }
}

const x: Middleware = async (undefined, next) => {
    const x = await next({});
    return next({});
};

apiFetch.use(apiFetch.fetchAllMiddleware);
apiFetch.use(apiFetch.createRootURLMiddleware('https://foo.bar/wp-json'));

apiFetch.setFetchHandler(options => {
    const { url, path, data, method } = options;

    return fetch(url || path || '', {
        method,
        body: JSON.stringify(data),
    });
});