Configuring preview routes for draft contentfor Drupal 8 , 9 , 10 , and 11

In headless Drupal setups, the challenge often lies in dynamically integrating non-published content into your frontend applications. By configuring preview routes for draft content, you enable editors and content managers to view and assess unpublished changes directly on the frontend, ensuring the final presentation meets expectations before going live.

The Importance of Preview Routes

Implementing preview routes allows for seamless content editing, review, and collaboration in a headless environment. It bridges the gap between content creation and publication by providing a live representation of the draft status content that is otherwise inaccessible via public URLs.

Understanding Preview in Headless Drupal

Preview functionality typically involves setting up special routes that handle draft states in a way that segues into your existing API infrastructure. When dealing with draft content in Drupal, the aim is to render this content through private routes that can be authenticated and accessed by the content creators and reviewers only.

Setting Up Drupal for Content Previews

To effectively set up preview routes in a headless Drupal configuration, you'll need to take advantage of permissions, API endpoints, and authentication. Here’s how you can achieve this:

Step 1: Enable JSON:API or GraphQL

Ensure that either JSON:API or GraphQL modules are enabled on your Drupal backend for content retrieval. JSON:API comes standard with Drupal, whereas GraphQL might require additional installation.

For JSON:API:

drush en jsonapi

For GraphQL:

composer require drupal/graphql
drush en graphql

Step 2: Configure Access for Draft Content

Drupal’s access permissions must be appropriately set so that draft content can be retrieved only by authorized users like editors or administrators.

Go to the Drupal admin UI and navigate to People > Permissions. Adjust permissions for roles such as Content Editor and Administrator to allow "View own unpublished content" or ensure API access for draft data is secure by requiring logged-in access.

Step 3: Create Preview Routes

In the context of a traditional site, preview routes are often a unique path that only editors can access. In a headless scenario, these routes need to interface with your API.

For React or Next.js:

In React or a Next.js app, you can set up preview links that fetch draft content:

// pages/preview.js (Next.js example)
import { useEffect, useState } from 'react';
import axios from 'axios';

const Preview = ({ nodeId }) => {
    const [content, setContent] = useState(null);

    useEffect(() => {
        const fetchData = async () => {
            try {
                const result = await axios.get(`https://example-drupal-site.com/jsonapi/node/article/${nodeId}?include=draft`);
                setContent(result.data);
            } catch (error) {
                console.error('Error fetching preview:', error);
            }
        };
        fetchData();
    }, [nodeId]);

    return (
        <div>
            {content ? (
                <h2>{content.data.attributes.title} (Preview)</h2>
            ) : (
                <p>Loading...</p>
            )}
        </div>
    );
};

export default Preview;

Implementing Security Measures

While allowing previews, it's vital to ensure that only authenticated users can access this data. Implement authentication strategies such as OAuth2 or API keys to protect your draft content endpoints.

Conclusion

Configuring preview routes for draft content in a headless Drupal setup enables content teams to effectively review and refine content before publishing. By utilizing Drupal's extensive permission controls and API capabilities, you can deliver a secure, efficient preview system aligned with modern web application needs.

In our next lesson, we'll explore integrating content moderation for previews, focusing on workflows that facilitate collaborative editing and approval processes in a headless environment. Stay tuned!