How to setup Axios with a Base url and Nonce for the Wp Rest Api
“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.
- 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.
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.
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.
IIf you want to leave a comment, please do so under the copy of this article on Dev.to so i can get back to you.
Thanks for reading