WP Snippet #014: Setup Axios for the WordPress Rest Api

Originally posted on my website on May 7th 2020

How to setup Axios with a Base url and Nonce for the Wp Rest Api

When dealing with the WordPress Rest Api and Javascript, WordPress offers a build-in Http Client called apiFetch that you could use in your scripts. But if you want to use the familiar Axios.js this post will show you how to quickly set this up with a Base Url and WordPress Nonce.

"WordPress nonces are one-time use security tokens generated by WordPress to help protect URLs and forms from misuse"

WordPress Handbook

Enqueue scripts for the WordPress Rest Api

The first step in the process is to Enqueue (Include) our script with WordPress and provide our script with a Base Url and a Nonce.

With the snippet above we first create a function called namespace_enqueue_scripts. Inside this new function we use the wp_enqueue_script function to enqueue a script called scripts.js as normal. Assuming the our script file lives inside our theme's directory we use the get_template_directory_uri function to get the full url to our theme.

Second we use the wp_localize_script function to add some custom data to our script. wp_localize_script accepts the following arguments:

• $handle: The handle of the script we want to add our data to. In our case we want to add data to the namespace-scripts script we enqueued.
• $object_name: This is the name of the generated/outputted Javascript object that will hold our custom data.
• $l10n: An array of data we want to pass to our Javascript

Inside the $l10n data array we create two key/value pairs that represent the data we want to pass to our Javascript:

• rootapiurl: This will be the Base Url for the Rest Api endpoints. We use the rest_url function to get this Url from WordPress, and then we escape it using the esc_url_raw function.
• nonce: Here use the wp_create_nonce function and pass 'wp_rest' to create the actual nonce token for the Rest Api.

All this will output the following Html to include our script.js and create the mynamespace Javascript object containing our custom data.

Enqueue to the admin area.

In the snippet above we used the wp_enqueue_scripts hook. This hook will add our script.js file to the frontend of our website. If on the other hand we want to enqueue to the admin area, replace the add_action call with the code below:

This code is almost the same as we used earlier except that here we replaced the wp_enqueue_scripts hook with the admin_enqueue_scripts one. This will include our scripts on every single admin screen. If we want to add our script to a specific admin screen only we can alter our namespace_enqueue_scripts function like shown below:

In this altered version we accept a new parameter called $screen. We can use this new parameter to check if the current screen is the one we want to enqueue our script to.

Enqueue to the Gutenberg editor

if we want to enqueue our scripts specifically for the Gutenberg editor we can change our call to add_action like shown below:

Again this code is similar to our earlier code but here we replaced the wp_enqueue_scripts hook with the enqueue_block_editor_assets one. This will enqueue our scripts anywhere the Gutenberg editor is use. This is ideal for adding your own custom blocks to the editor or creating your own Gutenberg sidebar plugins.

Configure Axios for the WordPress Rest Api

Now that we have our scripts enqueued it's time to configure Axios with the localized data we added. For this we create a new file called Api.js and add the code below:

Here we First import Axios, and then create a new object called Api by calling the Axios.create function and passing it a object with the following items:

• baseUrl: This will be the Base Url for the Rest Api endpoints. In our case we pass it the mynamespace.rootapiurl object key.
• headers.content-type: The content type we expect. In our case 'application/json'
• headers.X-WP-Nonce: The nonce we want to send with our Api request. In our case we pass it the mynamespace.nonce object key.

Note: The mynamespace.rootapiurl and mynamespace.nonce items come from the javascript object that was generated with the wp_localize_script function.

As a last step we export the Api object and we now have a configured Axios object that we can start using in our scripts,

Calling the WordPress Rest Api with Axios

Next we are going to use our new Api object to call the /posts endpoint of the WordPress Rest Api like shown below:

Here we first import our Api object and then call the get method to call the /posts endpoint. When the data returns we simply output it to the console.

From here it is up to you to create some code to consume the Rest Api data.

Follow

Found this post helpful? Follow me on twitter @Vanaf1979 or here on Dev.to @Vanaf1979 to be notified about new articles, and other WordPress development related resources.

Thanks for reading and stay safe