Headless CMS. How to Expose Data Using REST API and JSON API Modules?

Headless CMS, a content management system directly unrelated to the frontend layer, allows flexible data exposition for different applications. This concept becomes especially important for teams that want to build modern applications with a separate frontend layer in systems like Drupal. In this blog post, I'll take you step-by-step through the process of exposing Drupal data using the REST API and JSON API. You'll see how to customize views, generate content, and manage settings to ensure seamless interoperability with frontend frameworks. I encourage you to read the article or watch the video of the "Nowoczesny Drupal" series (the video is in Polish).

Required modules and tools to work with headless CMS

We’re installing Drupal. To start with, we need two key modules:

1. RESTful Web Services - enables basic API functions in Drupal and automatically activates the Serialization module.
2. JSON API (along with JSON API Extras) - the modules provide comprehensive capabilities for exposing data in JSON format. In addition, JSON API Extras allows the customization of paths and endpoint settings, which is crucial for smooth integration.

Each of these modules is available in Drupal 10.

Creating views for API data

To start exposing article data in JSON format, we need to configure Drupal views. This process involves several steps:

1. Creating a new view - after installing the necessary modules, we go to the "Views" section of the administration panel. We create a view, choosing the type of data we want to display (for example, a list of articles).

2. JSON formatting - we configure the view to make the data available in JSON format and define the access path, such as API/V1/articles. With path versioning, we can develop APIs without interfering with versions already running.

3. Filtering and field selection - to display only the data we need, we add filters that will limit the view to certain types of content, such as articles. We also select specific fields (e.g., title, author, creation date) to be shared in the API.

Chrome shows a clear JSON structure that includes UID and NID for each node. The JSON displays the complete list of items available in the system, providing a quick view of the collected data.

Customizing the JSON format

In Drupal, we can customize the way JSON data is displayed so that it is clear and easy to interpret:

• Removing unnecessary fields - we limit JSON fields to those that are relevant, eliminating unnecessary data from Drupal, like timestamp or revision information.
• Changing field aliases - for greater clarity, we change field names to more friendly ones, e.g. use article_id instead of nid.
• Cleaning HTML tags - the "strip HTML" command allows us to remove HTML tags from text fields, which simplifies their presentation.

Using JSON API and JSON API Extras in headless CMS

JSON API is an extended tool in Drupal that allows us to handle CRUD (Create, Read, Update, Delete) operations from within the API. JSON API Extras gives additional control over paths and data structure.

1. Configuring CRUD - in the JSON API settings, we specify which operations (Create, Read, Update, Delete) are available. This allows us, for example, to add or edit content directly through the API. We set up a full CRUD.

2. Personalizing paths and fields with JSON API Extras - the JSON API Extras module allows us to rename fields. We, for example, create a personalized API/V2/articles path in JSON API Extras.

3. Creating filtering and aliasing - JSON API Extras also allows us to customize the JSON structure, eliminate unnecessary fields, and give clear names, which significantly improves the readability of the data. Using this functionality, we’ll change, for example, the title to the article.

Advanced configuration with JSON API Extras

JSON API Extras provides advanced options for customizing JSON paths and data structure, allowing, among other things, the creation of alternative paths for each API version. As an example, we give the path an API/V2/contact/feedback format, which helps keep the data structure organized and enables extensive filtering and editing options.

Uploading data to Drupal

Using JSON API, it’s possible to send data to Drupal from external applications by using Contact Form.

Contact Forms is a useful tool for collecting data from users, such as feedback or inquiries. When used together with the Contact Form Storage module, forms allow us to save submitted data inside Drupal for easy viewing and management. It makes this possible:

• Customization of paths and fields - With JSON API Extras, we give clear names to paths and fields.
• Pre-deployment testing - Postman's testing allows us to make sure that data is sent correctly and handled as intended.

Testing endpoints using Postman

We can test the exposed API data using the Postman tool, which allows us to quickly and easily test various HTTP methods and JSON structure. With this we can, for example:

• Check data reading - testing that the data is displayed correctly and that the endpoint returns correct information.
• Simulate adding and updating data—The JSON API allows us to add new entries or edit them, and tests in Postman enable us to see exactly how data is transmitted and received.

Exhibiting data from headless CMS - summary

A headless CMS like Drupal is a great solution for modern applications, allowing flexible and easy data exposure using RESTful Web Services and JSON API. With JSON API configuration and JSON API Extras, you have a wide range of customizable paths and data structures, letting you create scalable solutions and work with any framework.

However, if you encounter challenges with more advanced configurations or need support with exposing data in other formats, our Drupal agency experts are ready to help you.