Using fetch or libraries like Axios for API callsfor Drupal 8 , 9 , 10 , and 11

In our Headless Drupal series, you've learned about setting up a headless architecture and making your content available through APIs. Now, let's dive into how you can interact with these APIs using JavaScript, specifically through fetch or libraries like Axios. Both tools are fundamental in making HTTP requests to retrieve and send data to your Drupal backend.

What is fetch?

The fetch API is a native browser API that provides an easy, logical way to fetch resources asynchronously across the network. Unlike the older XMLHTTPRequest interface, fetch is modern and supports promises, making it easier to work with asynchronous operations and more straightforward error handling.

Basic Example of fetch

// Example of fetching data from a Drupal API
fetch('https://example-drupal-site.com/jsonapi/node/article')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.log('Error:', error));

This simple script requests data from a hypothetical Drupal endpoint serving JSON:API responses. It demonstrates how easily you can grab data using fetch.

Introducing Axios

Axios is a promise-based HTTP client for the browser and Node.js. It provides a simple API for making HTTP requests, supporting several advanced features that fetch does not natively handle, such as request and response interception, automatic JSON data transformation, and cancellation of requests.

Basic Example of Axios

Before using Axios, you need to include it in your project. If you're working in a Node.js environment, you can install it via npm:

npm install axios

Once installed, here's how you can perform the same API request with Axios:

const axios = require('axios');

// Fetch data using Axios from the same Drupal API
axios.get('https://example-drupal-site.com/jsonapi/node/article')
    .then(response => {
        console.log(response.data);
    })
    .catch(error => {
        console.error('Error fetching data:', error);
    });

Axios allows you to think less about the boilerplate needed to fetch resources. It handles JSON response parsing and provides an easy-to-use interface for customizing requests.

When to Use fetch or Axios

Choosing between fetch and Axios often depends on the specific needs of your project:

• Size: fetch is built-in and has no additional overhead; Axios is a library that needs to be imported and may increase your project size.
• Features: Axios offers more features out of the box and may be more efficient and flexible for handling complex requests.
• Compatibility: Axios supports older browsers through polyfills, making it potentially more versatile.

Understanding these options will empower you as a developer to interact dynamically with your Drupal back-end in a headless setup.

What's Next?

Having grasped how to perform API calls with fetch and Axios, you're ready to start building dynamic interfaces. In the next lesson, we'll see how you can connect React with JSON:API or GraphQL, bringing your headless CMS to life with a modern JavaScript framework. Stay tuned!