WP Snippet #014: Setup Axios for the WordPress Rest Api
Tags: wordpress, php, javascript
Published: 2020-05-07 18:04:24

---
title: WP Snippet #014: Setup Axios for the WordPress Rest Api
published: true
description: How to setup AxiosJs with a Base Url and a WordPress Security Nonce for use with the WordPress Rest Api.
canonical_url: https://since1979.dev/snippet-014-setup-axios-for-the-wordpress-rest-api/
cover_image: https://since1979.dev/wp-content/uploads/2020/05/wp-snippet-014-setup-axios-for-the-wordpress-rest-api.jpg
tags: wordpress, php, javascript
---
[Originally posted on my website on May 7th 2020](https://since1979.dev/snippet-014-setup-axios-for-the-wordpress-rest-api/)

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

When dealing with the [WordPress Rest Api](https://developer.wordpress.org/rest-api/) and Javascript, WordPress offers a build-in Http Client called [apiFetch](https://developer.wordpress.org/block-editor/packages/packages-api-fetch/) that you could use in your scripts. But if you want to use the familiar [Axios.js](https://github.com/axios/axios) this post will show you how to quickly set this up with a Base Url and [WordPress Nonce](https://developer.wordpress.org/themes/theme-security/using-nonces/).

> "WordPress nonces are one-time use security tokens generated by WordPress to help protect URLs and forms from misuse"
>
> *[WordPress Handbook](https://developer.wordpress.org/themes/theme-security/using-nonces/)*

### 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.

{% gist https://gist.github.com/vanaf1979/a749804feb050dec72f47a1d6fd2dff8 %}

With the snippet above we first create a function called *namespace_enqueue_scripts*. Inside this new function we use the [wp_enqueue_script](https://developer.wordpress.org/reference/functions/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](https://developer.wordpress.org/reference/functions/get_template_directory_uri/)* function to get the full url to our theme.

Second we use the *[wp_localize_script](https://developer.wordpress.org/reference/functions/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](https://developer.wordpress.org/reference/functions/rest_url/)* function to get this Url from WordPress, and then we escape it using the *[esc_url_raw](https://developer.wordpress.org/reference/functions/esc_url_raw/)* function.
-   **nonce:** Here use the *[wp_create_nonce](https://developer.wordpress.org/reference/functions/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.

{% gist https://gist.github.com/vanaf1979/df9d7cde2f05376cc67e6ce33066ce9c %}

#### 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:

{% gist https://gist.github.com/vanaf1979/331cf30af4319349fe803ad09c7e0f8d %}

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*](https://developer.wordpress.org/reference/hooks/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:

{% gist https://gist.github.com/vanaf1979/28022bb1ec86567b75c74c80447d0080 %}

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:

{% gist https://gist.github.com/vanaf1979/70ab23bc72d0999e7a430f90bf52bfb5 %}

Again this code is similar to our earlier code but here we replaced the *wp_enqueue_scripts* hook with the *[enqueue_block_editor_assets](https://developer.wordpress.org/reference/hooks/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](https://developer.wordpress.org/block-editor/tutorials/block-tutorial/writing-your-first-block-type/) to the editor or [creating you](https://since1979.dev/making-a-gutenberg-sidebar-plugin-part-1-registering-the-plugin-with-oop-php/)[r](https://since1979.dev/making-a-gutenberg-sidebar-plugin-part-1-registering-the-plugin-with-oop-php/) [own Gutenberg sidebar plugins](https://since1979.dev/making-a-gutenberg-sidebar-plugin-part-1-registering-the-plugin-with-oop-php/).

### 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:

{% gist https://gist.github.com/vanaf1979/7f1db9d7f67d49a339f56d65222b941b %}

Here we First import Axios, and then create a new object called Api by calling the [*Axios.create*](https://github.com/axios/axios#creating-an-instance) 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:

{% gist https://gist.github.com/vanaf1979/ed8259ef84c7420a5a389f79995b2929 %}

Here we first import our Api object and then call the *[get](https://github.com/axios/axios#axios-api)* 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](https://twitter.com/Vanaf1979) or here on Dev.to [@Vanaf1979](https://dev.to/vanaf1979) to be notified about new articles, and other WordPress development related resources.

**Thanks for reading and stay safe**