Image

Retrieve Data from an API with React for Drupal 8, 9, 10, and 11

React excels at displaying lists of data. But that data needs to come from somewhere. In most cases this happens by making a network request to retrieve data from one or more APIs, processing the response, and then displaying the data. In the context of working with a Drupal site there are two possible options: Drupal core's JSON API module, or the drupalSettings JavaScript API.

In this tutorial we'll focus on the high-level overview and:

  • Explain the difference between content and configuration data
  • Introduce the JavaScript Fetch API, and where to find information about using it
  • Get an overview of the ES6 array functions we'll use to parse the complex data structures returned from an API

In the remaining tutorials in this series we'll provide examples of real world use cases.

By the end of this tutorial you should have a firm understanding of how to get started making API requests using React.

Decoupled Headless Drupal