API Fetch
Utility to make WordPress REST API requests. It's a wrapper around window.fetch
.
Installation
Install the module
npm install @wordpress/api-fetch --save
This package assumes that your code will run in an ES2015+ environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using core-js or @babel/polyfill will add support for these methods. Learn more about it in Babel docs.
Usage
import apiFetch from '@wordpress/api-fetch';
apiFetch( { path: '/wp/v2/posts' } ).then( posts => {
console.log( posts );
} );
Options
apiFetch
supports and passes through all options of the fetch
global.
Additionally, the following options are available:
path
(string
)
Shorthand to be used in place of url
, appended to the REST API root URL for the current site.
url
(string
)
Absolute URL to the endpoint from which to fetch.
parse
(boolean
, default true
)
Unlike fetch
, the Promise
return value of apiFetch
will resolve to the parsed JSON result. Disable this behavior by passing parse
as false
.
data
(object
)
Shorthand to be used in place of body
, accepts an object value to be stringified to JSON.
Middlewares
the api-fetch
package supports middlewares. Middlewares are functions you can use to wrap the apiFetch
calls to perform any pre/post process to the API requests.
Example
import apiFetch from '@wordpress/api-fetch';
apiFetch.use( ( options, next ) => {
const start = Date.now();
const result = next( options );
result.then( () => {
console.log( 'The request took ' + Date.now() - start );
} );
return result;
} );
Built-in middlewares
The api-fetch
package provides built-in middlewares you can use to provide a nonce
and a custom rootURL
.
Nonce middleware
import apiFetch from '@wordpress/api-fetch';
const nonce = "nonce value";
apiFetch.use( apiFetch.createNonceMiddleware( nonce ) );
Root URL middleware
import apiFetch from '@wordpress/api-fetch';
const rootURL = "http://my-wordpress-site/wp-json/";
apiFetch.use( apiFetch.createRootURLMiddleware( rootURL ) );