Allowing frontend to preview unpublished contentfor Drupal 8 , 9 , 10 , and 11

In the journey of building a robust headless Drupal architecture, the ability to preview unpublished content is a critical feature. It enables content creators and managers to view how their content will appear on the live site before publishing. This preview mechanism improves content accuracy and aesthetics, reducing the potential for errors after publication.

Understanding Unpublished Content Previews

Unpublished content previews allow editorial teams to see content in a near-final form, ensuring alignment with expectations. This involves setting up secure access and integrating your headless frontend with Drupal’s API endpoints to manage unpublished states effectively.

Prerequisites and Setup in Drupal

Ensure your Drupal site includes:

• Content Moderation module enabled, providing various states like Draft, Needs Review, and Published.
• Proper permission settings allowing specific user roles (e.g., Editors) access to unpublished content through API.
• JSON:API or GraphQL module enabled for API interactions with your frontend applications.

Configuring Secure Access for Unpublished Content

Since unpublished content is intended to be private, configuring secure access is crucial. Utilize authentication methods like OAuth2 or API keys to restrict access:

Implementing OAuth2 Authentication

Use the OAuth2 protocol to manage secure access:

composer require drupal/oauth
drush en oauth

Configuring API Endpoint Security

Within the OAuth settings in Drupal, configure clients to receive tokens for accessing draft content. Ensure that these settings align with roles permitted to preview unpublished content.

For JSON:API, a request for a draft might look like this:

GET /jsonapi/node/article?filter[status][value]=draft
Authorization: Bearer [access-token]

Integrating with Frontend Applications

Whether using React, Vue.js, or Angular, your frontend will need modifications to handle unpublished content previews based on the data received from Drupal API endpoints.

React Example:

Set up a preview component to fetch and display unpublished content:

// src/components/PreviewArticle.js
import React, { useEffect, useState } from 'react';
import axios from 'axios';

const PreviewArticle = ({ articleId }) => {
    const [article, setArticle] = useState(null);

    useEffect(() => {
        axios.get(`https://example-drupal-site.com/jsonapi/node/article/${articleId}`, {
            headers: {
                'Authorization': 'Bearer [access-token]'
            }
        })
        .then(response => {
            setArticle(response.data.data);
        })
        .catch(error => {
            console.error('Error fetching unpublished article:', error);
        });
    }, [articleId]);

    return (
        <div>
            {article ? (
                <div>
                    <h2>{article.attributes.title} (Preview)</h2>
                    <p>{article.attributes.body.value}</p>
                </div>
            ) : (
                <p>Loading...</p>
            )}
        </div>
    );
};

export default PreviewArticle;

Managing Permissions

Managing who can preview unpublished content is pivotal. Ensure only authenticated users with appropriate roles can access such content. This protects your site's confidentiality and maintains content privacy until it reaches the final publication state.

Conclusion

Allowing frontend applications to preview unpublished content significantly enhances the content management process within a headless Drupal framework. This feature empowers editorial teams to ensure content is perfect before going live, improving both quality and efficiency.

In the upcoming lesson, we'll delve into creating preview-specific view modes that cater to different preview requirements, providing flexible and detailed content reviews. Stay tuned for more sophisticated implementations in your headless Drupal setup!